为什么要做可视化#

• 快速建模：可视化能让我们迅速验证假设，发现数据里的结构或异常值。
• 聚焦重点：通过合理的视觉编码，把最重要的指标放在第一视觉层级。
• 建立共识：图表比 PPT 文本更容易在评审会上达成共识，也是讲述产品/业务故事的骨架。

从原始数据到图表#

1. 明确目标受众：他们最关心的指标是什么？背景知识到什么程度？输出的交互复杂度取决于这个答案。
2. 梳理数据结构：先在表格里做数据探查（EDA），标记可用维度、需要清洗的字段和时间跨度。
3. 挑选合适的图表类型：定量比较优先考虑柱状/折线，结构占比用堆叠柱或矩形树图，关联关系可尝试散点和网络图。
4. 草图迭代：先画草图或使用 Figma/Excalidraw 快速拼布局，再决定配色、标注和交互节奏。

设计与可读性#

• 颜色层级：主色用于核心数据，辅色承载比较组，灰度用作背景参考线。遵守品牌色的同时记得通过色盲模拟检查对比度。
• 标注策略：关键数字直接贴在图上，少用图例让读者来回对照。超出阈值的点用强调箭头或注释解释原因。
• 最少装饰：去掉无意义的 3D 效果和阴影，保留紧凑的网格线和刻度；文字切换为 Sentence case 或全中文陈述句，提高可读性。
• 响应式布局：移动端优先保留核心图表，细节可以折叠至“展开更多”里。

交互与讲故事#

当图表要讲述一个“故事”时，可以采用 Step-by-step 的结构：先出现整体趋势，再逐步揭示关键节点和原因。常见做法是分章节滚动触发（scrollytelling）或提供标签切换（tab/segmented control）。一定要配合文字说明，为读者提供上下文。

常见坑位清单#

• 数据颗粒度不对导致“锯齿”或“噪声”：先做平滑处理或改变汇总粒度。
• 多尺度指标混在同一个坐标轴：尝试正则化或使用双轴，但要清楚提示量纲不同。
• 图表过载：一次只传达一个主结论，其余信息可以放到 Tooltip 或说明文字中。
• 忽略可访问性：注意颜色对比、字号、键盘操作路径，让读屏读者也能理解。

常用工具组合#

• 探索性：Jupyter Notebook + pandas + seaborn/Plotly，用于快速验证数据特征。
• 生产级：D3.js 适合高级定制，D3 官方入门指南仍然是最佳入口；业务图表可以考虑 ECharts、Vega-Lite 或 AntV G2，能更快落地。
• 低代码：Superset、Metabase 和 Power BI 适合内部运营面板，强调权限和多数据源接入。

下方演示片段摘自 D3，展示如何用线性比例尺映射数值到可视化位置：

import * as d3 from 'd3';

const scale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 600]);

d3.select('svg')
  .append('rect')
  .attr('x', 0)
  .attr('y', 20)
  .attr('width', scale(72))
  .attr('height', 24);

评估与迭代#

发布前做一次 checklist：文字描述是否与图表一致、不同设备显示是否正常、交互是否有备选操作路径。上线后可以通过埋点或用户访谈收集反馈，根据具体结论再开新的迭代。

进一步阅读#

• 影视飓风《可视化少林功夫》：故事性的可视化参考。
• Information Dashboard Design：信息仪表盘设计经典资料。
• The Data Visualization Catalogue：图表类型速查。