会说话的数据—— D3.js 折腾小记
标签: # D3.js # Data Visualization # Data-Driven Documents # Histogram # 数据可视化 # 直方图

我一个写后端代码运维服务器的,怎么就去搞前端数据可视化了呢? 接触 D3.js 纯属机缘巧合,但既然现在的工作跟数据打交道,数据的可视化总是不可避免的,学了总没什么坏处。由于是前端小白,所以不可避免的会掉入一些看起来很可乐的坑,因此随便写一篇小文章,记录一下自己折腾的过程。 起 D3 的名字由来从它的官网就能看出来, Data-Driven Documents ,三个 D ,不愿意发那么多音,所以这帮老外就简称 D3 。这套可视化工具还是挺流行的,比如说我最近在搞的 Airflow 就利用 D3 来进行一个 DAG 运行状态的可视化。具体举例来说, Airflow 利用 D3 进行一个 DAG 中每个任务运行时间的表示,代码可以参见这里。我也从官网上找到了一个示例图片,画出来还是很直观很漂亮的。 <figure> <figcaption> Task Durat