Learning D3.js Line-by-Line

通过阅读官方样例的每一行代码并复现来学习 D3.js

静态散点图

静态(宽高固定)的散点图

响应式散点图 v1

响应式散点图方案一

响应式散点图 v2

响应式散点图方案二

交互式散点图-提示框

交互散点图-辅助线

交互散点图-高亮显示

交互散点图-刷选

交互散点图-缩放

动效散点图-路径展开

动效散点图-位置变动

变体-散点图矩阵

静态条形图

静态(宽高固定)的条形图

水平方向的条形图

发散型的条形图

交互条形图-缩放平移

交互条形图-层级下钻

动效条形图-可追踪条带的过渡(样例一)

为条形图添加过渡动效,可以利用物体恒存 object constancy 让用户更容易地留意和理解数据是如何变化的。

动效条形图-可追踪条带的过渡(样例二)

堆叠条形图示例

音乐产业在 1973-2018 年间的收益,并按(媒介)格式进行划分

横向堆叠条形图

发散型的堆叠条形图

标准化的堆叠条形图

分组条形图与堆叠条形图的转换

数据缺失的折线图

条形图-折线图双轴图

渐变色折线图

阈值二色折线图

线段内标注的折线图

多系列折线图

交互式绘制折线图

带有提示框的折线图

折线图展开动效

多系列折线图展开动效

比例尺切换动效

路径切换补间动画

数据缺失的面积图

堆叠式面积图

标准化的堆叠式面积图

可缩放的面积图

可平移的面积图

形状切换补间动画

河流图切换动效

美国各州人口分布

面积不同的环形图矩阵

弧形切换补间动画

Tidy Tree

紧凑型的树图 tree diagram。

Collapsible Tree

可交互(子树可伸缩)的树图 tree diagram。

Collapsible Tree Zoom

可交互(子树可伸缩,树图整体可缩放移动)的树图 tree diagram。

Radial Tidy Tree

径向树图 tree diagram。

旭日图

静态旭日图 Sunburst Chart

Zoomable Sunburst

可下钻的旭日图。