格子越深,表示该主题在这项指标上越高。
清晰70
说服45
密度92
制作成本88
作业适配60
工作适配72
低高
简短问答
什么时候选D3定制工艺?
故事符合「新颖的形式、研究数据、定制的解释者」时选用。
什么时候避开?
遇到「Chart.js 栏已经回答了经理的问题」就换形式。
谁发明或推广了它?
Mike Bostock D3 (2011) - 仍然是定制可视化的工艺支柱
它编码什么?
数据连接到具有显式比例的 SVG/Canvas 标记
广告能用吗?
在微信、抖音与展示广告里主张能一眼看见就可以;否则把图放在落地页。
老师会收吗?
实验报告与展板里有轴、单位、来源一行就可以。
D3定制工艺把值编码为数据连接到具有显式比例的 SVG/Canvas 标记。Mike Bostock D3 (2011) - 仍然是定制可视化的工艺支柱。
工作报告、广告与作业中适合「新颖的形式、研究数据、定制的解释者」。若「Chart.js 栏已经回答了经理的问题」,换一种形式。
软件
- D3 — 用于比例、形状、层次结构等的模块 - ISC。 · ISC · github.com/d3/d3
- d3-shape — 直线、面积、堆栈和弧的生成器。 · ISC · github.com/d3/d3-shape
- d3-scale — 诚实地将数据域映射到视觉范围。 · ISC · github.com/d3/d3-scale
- Observable Plot — 当您需要速度时,可以使用更高级别的 D3 族语法。 · ISC · github.com/observablehq/plot
- Vega — 复杂交互规范的运行时语法替代方案。 · BSD-3-Clause · github.com/vega/vega
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯(不要截图)
- 导出 4 — 网页用 SVG,印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1,大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
D3定制工艺:守住数据连接到具有显式比例的 SVG/Canvas 标记,「Chart.js 栏已经回答了经理的问题」时换图。