D3：总体情况

2020-05-05 08:00:00 · 飞浪

介绍冒着过度使用陈词滥调的风险，世界正被数据淹没。当鼠标在线点击时，算法正在努力预测消费者行为。零售店的会员卡用于发送促销信息，以推动参与。我们口袋里的手机一直连接到高速网络，在后台消费和生成

介绍

冒着过度使用陈词滥调的风险，世界正被数据淹没。当鼠标在线点击时，算法正在努力预测消费者行为。零售店的会员卡用于发送促销信息，以推动参与。我们口袋里的手机一直连接到高速网络，在后台消费和生成数据。我们每个人基本上都成了“物联网”上的设备。数据相对容易找到和收集。了解数据背后的故事是另一个问题。

故事不止于此，我无意双关。上述鼠标点击通常是为了分析它们生成的数据。换句话说，数据故事有望在网络上讲述。数据分析和数据科学正在影响网络开发和软件工程领域每个人的工作。但期望每个网络开发人员和设计师都是数据科学专家是不合理的。

用户体验也必须考虑在内。将 GB/TB/PB 级数据放到服务器上并允许人们访问是件很容易的事情。但让这种访问变得有价值又是另一回事。亚马逊通过公共 API 提供其整个产品目录，供第三方应用程序使用。但仅仅拥有这些数据并不能给亚马逊带来战略优势，否则他们会保密。

这里有三个问题：

数据量
数据科学家不是 Web 开发人员，反之亦然
可访问性并不鼓励理解

了解 D3.js

所有这三个问题都可以通过一个名为 D3.js 的免费开源软件包来解决。

D3.js（或简称 D3）是一个用于在 Web 上创建数据可视化的库。数据可视化是数据集有趣特征的图形表示。换句话说，它以视觉格式讲述数据的故事。

获得正确的可视化效果以准确有效地讲述数据集的故事在某种程度上更像是一门艺术，而不是一门科学。本指南（或任何指南）本身是不够的。让您放心的是，D3 足够灵活，可以生成正确的可视化效果，而不会给开发人员带来太多负担。

D3.js 能为您做什么？

看一下这个用 D3 生成的可视化图表，称为直方图。

直方图在左侧显示频率计数（也称为y 轴），在底部显示值（也称为x 轴）。查看此直方图，您可以立即看到计数最高的值位于 4 到 6 之间。您可能还会发现，可视化的整体形状类似于带有长右尾的正态分布。对于统计学家来说，无论基础数据是什么，这都会立即暗示一些事情。一目了然，您可以快速看到有关生成此可视化的数据的许多有趣点。这就是可视化的力量。

看看这个 D3 图库。它展示了 100 多个不同的可视化示例（以及创建它们的代码）。用途范围令人难以置信。有条形图、饼图和直方图等基本类型。还有地图和箱线图等更高级的类型。甚至还有动画和交互式可视化。这使得最终用户可以通过从多个选项中进行选择并实时查看结果来塑造他们的体验。

但开发人员并不局限于图库中展示的可视化效果。请看一下这个括号布局可视化效果。

篮球迷们一眼就能认出这一点。可以在https://bl.ocks.org/jdarling/2503502上看到交互式直播版本。单击括号布局中的点将折叠或展开括号，通过显示用户所需的详细程度，使图表更易于访问。括号布局的代码也显示在上面的链接中。请注意，没有任何地方调用D3 提供的bracketLayout()函数或方法。事实上，如果你查看任何 D3 示例，你都找不到构建特定可视化类型的 API。可能有使用 D3 的第三方 API 提供特定可视化的具体实现，但 D3 抵制了这种冲动。相反，它为你提供了基本构建块和组装它们的基础，以满足你所讲述的数据故事的需求。

无需重新发明轮子

D3 严重依赖SVG（可缩放矢量图形），这是一项得到广泛支持的 W3C 标准。借助 SVG，Web 应用可以在浏览器中创建非常精确和复杂的插图。您可以声称 D3 是 SVG 标准的抽象。D3 不会试图预测或强加未来；它依赖于现有标准。

D3 并不试图规定一种首选的开发理念。它是用 JavaScript 编写的（尽管您也可以使用 TypeScript），因此由于编程语言的选择，会做出某些假设。除此之外，无论您是精通 React 或 Angular 等主流 Web 框架，还是更喜欢 Svelte 等较新的产品，您都可以利用 D3 的优势。

D3 本身并不是一个新兴产品；第一次发布是在十年前。D3 借鉴了 Protovis 等先前的 Web 可视化尝试。维护 Protovis 的团队现在也在开发 D3。Coursera、Square、New Relic、Weebly 和 Mapbox 等许多知名公司都依赖 D3。然而，D3 对学术界、政府和工业界的小公司和个人同样有益。

如果听起来 D3 可以帮助您的下一个数据科学或数据分析项目在网络上讲述数据故事，请前往d3js.org获取更多示例。D3 在网上被广泛讨论，因此当您寻找更具体用途的答案时，Stack Overflow 和您最喜欢的搜索引擎就是您的好帮手。此外，D3 是开源的，其代码在 Github 上维护。您还可以在那里找到大量文档。