数据可视化工具简介
就像单反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/
- 未完待续 ...