格子越深,表示该主题在这项指标上越高。
清晰92
说服58
密度40
制作成本25
作业适配94
工作适配93
低高
简短问答
什么时候选数据到图表的决策?
故事符合「任何报告、广告声明或分配数据的前 60 秒」时选用。
什么时候避开?
遇到「选择一个图表,因为它在模板库中看起来很漂亮」就换形式。
谁发明或推广了它?
贝尔廷符号学;现代选择器指南和图形语法工具
它编码什么?
映射到标记和通道的任务类型(长度、位置、角度、颜色)
广告能用吗?
在微信、抖音与展示广告里主张能一眼看见就可以;否则把图放在落地页。
老师会收吗?
实验报告与展板里有轴、单位、来源一行就可以。
数据到图表的决策把值编码为映射到标记和通道的任务类型(长度、位置、角度、颜色)。贝尔廷符号学;现代选择器指南和图形语法工具。
工作报告、广告与作业中适合「任何报告、广告声明或分配数据的前 60 秒」。若「选择一个图表,因为它在模板库中看起来很漂亮」,换一种形式。
软件
- Observable Plot — 整洁数据的简洁语法 - 非常适合快速尝试编码。 · ISC · github.com/observablehq/plot
- Vega-Lite — 强制您命名编码的声明性规范。 · BSD-3-Clause · github.com/vega/vega-lite
- D3 — 当选择者说您需要自定义表单时,低级标记。 · ISC · github.com/d3/d3
- Chart.js — 一旦编码决定确定,即可快速生成网络图表。 · MIT · github.com/chartjs/Chart.js
- Viz chooser pillar — 此站点选择器按工作过滤表单,无需 SaaS 登录。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯(不要截图)
- 导出 4 — 网页用 SVG,印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1,大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
数据到图表的决策:守住映射到标记和通道的任务类型(长度、位置、角度、颜色),「选择一个图表,因为它在模板库中看起来很漂亮」时换图。