图表问题先于图表类型

大理论

图表选择的第一步不是库、颜色或动效，而是问题：用户要比较大小、看时间变化、看分布、找相关、理解组成、判断排名、定位地理差异、追踪流向，还是发现异常？不同问题需要不同编码。

小知识点

1. 比较数量优先考虑 bar、dot plot、line 或 slope，不要先用面积和颜色。
2. 时间变化通常用 line、area、calendar 或 small multiples，根据密度和比较对象决定。
3. 分布用 histogram、box plot、violin、density 或 strip plot，避免只显示平均值。
4. 相关关系用 scatter、bubble 或 connected scatter，但要小心因果暗示。
5. 组成关系可以用 stacked bar、100% stacked、treemap 或 small multiples；pie/donut 只适合少量、低精度比例。
6. 地理数据不要自动上地图；如果问题是排名或比较，表格/条形图通常更清楚。

设计判断

当一个图表能说清“用户需要做什么判断、这个图形为什么比备选更合适、会误导什么”，它才可以进入界面；如果只能说明“看起来高级”，还没有通过设计判断。

实现建议

交付图表前写一张 chart brief：问题、受众、数据结构、候选图表、选择理由、避免的图表、编码、交互、可访问替代、库选择和数据更新时间。库选择按需求：D3 做高度定制，Observable Plot 做探索，Vega-Lite 做可审查 spec，ECharts 做大规模交互 dashboard，Chart.js 做轻量标准图表。

反例/风险

用饼图比较 12 个类别、用地图表达非地理问题、所有指标都做折线、堆叠面积图比较具体数值、把 dashboard 塞满没有标题结论的小图。

案例分析

FT Visual Vocabulary 的目标是帮助设计师和记者选择合适的数据可视化符号，并按 deviation、correlation、ranking、distribution、change over time 等关系组织图表；From Data to Viz 也以数据类型和常见 caveats 引导图表选择。可学习点是：图表库应该先存选择逻辑，再存视觉样式。

来源链接

FT Visual Vocabulary: https://ft-interactive.github.io/visual-vocabulary/ Financial Times chart-doctor visual vocabulary: https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary From Data to Viz: https://www.data-to-viz.com/ Observable Plot: https://observablehq.com/plot/ Vega-Lite: https://vega.github.io/vega-lite/