D3.js 与数据可视化

数据可视化工具简介

就像单反vs手机照相机一样，越复杂越强大。把数据可视化工具按照复杂程度排序，最右端是D3.js，它最强大，也最难学！

D3.js = a JavaScript library

• D3.js 是一个开源的JavaScript库: https://github.com/d3/d3
• D3.js提供了很多可视化函数。

D3.js ≠ a dataviz library

但是，都是底层代码，不直接面向用户，比如没有: boxplot() or scatterplot() 直接出图的函数。

它提供的是辅助函数，核心是：你要手动绘图。

• 遍历数据，计算X和Y位置，画出每个点；
• 绘制X轴：线 + tick + label，同理Y轴;
• 添加标题: 使用 html p标签
• 需要 tooltip? 需要更多代码

D3.js不直接绘图，但是提供了强大的工具：

• scale() 计算圆圈位置
• ticks() 找到轴上刻度位置
• …

这里提供一个交互式沙箱，最简单的散点图：https://www.react-graph-gallery.com/scatter-plot#circles

D3.js = powerful, but hard

自己手工构建所有东西 - 包括交互。而不局限于：如果这个库有这个选项。

缺点？需要花很多时间学习。所有都自己写很强大，但对能力要求也高。

这是一个小项目，展示如何使用D3创建自定义：https://www.react-graph-gallery.com/example/radar-chart-animation

直到现在，相对于D3，其他工具显得很局限，限制很多。

The web is split

很重要、很困惑的点：

• 之前很长时间，人们用纯js构建网站，一切正常。
• 但是最近15年，Facebook推出一个UI库叫React改变了一切！它解决了开发者很多头疼的问题，并成为了标准。
• 而你使用React(或者 Vue，Svelte)，D3中2/3不是必须的。

这决定着你怎么学D3。

如果按照过时教程，你将花很多时间学习以后再也用不到的内容。

• D3图片库: https://d3-graph-gallery.com/
• React图片库: https://www.react-graph-gallery.com/

• 未完待续 …