“D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.”

——D3

D3.js是一个数据驱动的JavaScript第三方库，通过使用HTML、SVG和CSS进行数据可视化。D3是基于现代浏览器使用JavaScript语言进行编写与使用的，无需将自己束缚在专有框架中，结合了强大的可视化组件和数据驱动的DOM操作方法。

‍

过去209年间180个国家的人均收入(x)、预期寿命(y)和人口(面积)-按地区分类。

streamgraph是堆积面积图的一种变形

D3.js数据可视化的优点

1.D3.js是一个开源的JavaScript库，可视化后的数据可以在浏览器，如Chrome、Firefox、Safari等中进行展示，便于传播与交流。

2.其可视化的图形是基于SVG（Scalable Vector Graphics），即可缩放矢量图形，不存在可视化图形的失真问题。

3.D3.js开发的数据可视化与传统的在AI软件中制作的Infographic相比，可交互性更强，信息传达度更高，更加有趣。

·使用D3.js进行数据可视化的挑战

由于D3.js是一个开源的JavaScript库，所以在使用D3.js之前，需要有一定的前端网页开发（html、css、JavaScript）知识。

如何使用D3.js

使用D3.js进行开发，首先要使用一种IDE（Integrated Development Environment）集成开发环境，UXD推荐使用Visual Studio Code进行开发，vs code是免费开源的，其官网的下载地址为：https://code.visualstudio.com/download。

在使用D3.js之前，需要引用D3.js库：

D3的代码可以新建一个index.js文件，在其中进行编写

将d3.js可视化图形加入到svg标签（tag）

如图为使用d3.js开发的框架

解读D3 Data-Driven数据可视化

本周五,UXD的D3 Data-Driven数据可视化公开课将在线上开播，本次课程我们将带同学们进入一个全新的数据可视化新视觉，学习如何使用编程语言创造炫酷的数据可视化作品

讲座时间

11月20日周五

PM 15:00-16:00

主讲人

Shizhe Sun

ECA 爱丁堡大学

Design Informatics

爱丁堡 Design Informatics专业，有跨专业申请经验与能力，专注于软硬件交互，致力于研究用户行为、挖掘用户痛点与提升用户体验，热爱分享设计与科技。希望通过设计、数据与新科技的手段，驱动创新，创造突破性产品。

D3.js案例

1.Streamgraph Transitions

streamgraph是堆积面积图的一种变形，通过“流动”的形状来展示不同类别的数据随时间的变化情况。但不同于堆积面积图，河流图并不是将数据描绘在一个固定的、笔直的轴上（堆积图的基准线就是x轴），而是将数据分散到一个变化的中心基准线上（该基准线不一定是笔直的）。

但不可否认的是，在面对巨大数据量，且数值波动幅度大的情况下，河流图拥有优雅的视觉结构，能很好地吸引读者的注意力，同时凸显变化大的数据。

2.Zoom to Bounding Box

Pan and zoom, or click to zoom into a particular state using zoom.transform transitions. The bounding box is computed using path.bounds.

https://observablehq.com/@d3/zoom-to-bounding-box

通过使用d3.js的zoom.transform方法，点击地图中被分割的区域，即会放大相应的倍数，最大可以充满整个svg标签的边界。

3.Front Row to Fashion Week

‍

https://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/index.html

在纽约时装周期间展出的300多个系列中，上图是时尚编辑前往伦敦、米兰和巴黎的下一轮时装秀时引起轰动并给他们留下最大印象的系列。The New York Times将时装秀的系列展品整理成细长条图片的形式。当鼠标悬浮在某一张图片时，该图片放大至最大，其他图片依次缩小。

4.the Wealth & Health of Nations‍

https://observablehq.com/@mbostock/the-wealth-health-of-nations

其显示了过去209年间180个国家的人均收入(x)、预期寿命(y)和人口(面积)-按地区分类。1950年以前的数据比较稀疏，所以这个图用二等分和线性插值来填充缺失的数据点。

5.Word tree

https://www.jasondavies.com/wordtree/

其中摘录了一些名人演讲与故事文本，通过搜索关键字可以获取关键字所在的句子与Word tree，用来观察与研究关键词在文章的使用情况，进而促进对文章的理解与思考。

扫码获取免费留学评估

D3.js数据可视化黑科技上线，快来UXD学习如何快速上手超级硬核的数据可视化工具

1.Streamgraph Transitions

2.Zoom to Bounding Box

3.Front Row to Fashion Week

4.the Wealth & Health of Nations‍

相关推荐