Metaphor

数据可视化原理

7分钟阅读

概述

数据可视化（Data Visualization）是将数据转换为图形或图表的技术，使用户能够理解数据、发现模式并做出决策。1

好的数据可视化遵循三个核心原则：准确性、清晰性和美观性。

可视化设计原则

1. 准确展示数据（Truthful）

可视化必须准确反映数据，不扭曲信息：

原则说明反面案例
完整比例轴的起点应为0截断Y轴夸大差异
面积/体积守恒图形大小与数值成正比3D效果扭曲比例
无装饰性扭曲避免不必要的美化过于复杂的3D饼图

2. 支持高效解码（Functional）

用户应能快速从图表中提取信息：

视觉编码优先级（从强到弱）：

位置 > 长度 > 角度 > 面积 > 体积 > 颜色饱和度 > 颜色色调
视觉通道精度适用数据类型
位置（Position）精确定量/有序
长度（Length）精确定量
角度（Angle）中等定量
面积（Area）较弱定量
颜色饱和度（Saturation）较弱有序
颜色色调（Hue）分类定性

3. 美学追求（Beautiful）

美观但不过度装饰：

  • 减少视觉杂乱
  • 使用适当的空白
  • 选择协调的配色方案
  • 保持简单而优雅

常见图表类型

选择图表的决策树

数据关系
    │
    ├── 比较 → 离散比较 → 柱状图/条形图
    │         排名 → 条形图
    │         时间趋势 → 折线图
    │
    ├── 构成 → 静态 → 饼图/堆叠柱状图
    │         动态 → 堆叠面积图
    │
    ├── 关系 → 两个变量 → 散点图
    │         三个变量 → 气泡图
    │
    └── 分布 → 单变量 → 直方图/箱线图
              多变量 → 散点图矩阵

柱状图（Bar Chart）

适用场景：比较离散类别的值

最佳实践：

  • 柱间距约为柱宽的 50%
  • 按值的大小排序（除非有固有顺序）
  • 使用水平柱状图展示长类别名称
销售数据（2024 Q1）

产品A  ████████████████  1200
产品B  █████████████      980
产品C  ██████████        720
产品D  ████████          580
      └───────────────
           金额（元）

折线图（Line Chart）

适用场景：展示数据随时间的变化趋势

最佳实践：

  • Y轴从0开始（除非有充分理由）
  • 线条不超过4条
  • 使用实线，避免虚线（虚线通常表示预测）

饼图（Pie Chart）

适用场景：展示整体中的比例

最佳实践：

  • 类别不超过7个
  • 从12点钟位置开始，顺时针排列
  • 避免3D效果
  • 考虑用柱状图替代（人眼更易比较长度）

散点图（Scatter Plot）

适用场景：展示两个变量之间的关系

最佳实践：

  • 使用点的大小表示第三个变量（气泡图）
  • 避免过度绘图（考虑采样或透明度）
  • 添加趋势线时标注公式

箱线图（Box Plot）

适用场景：展示分布和离群值

        ┌─────────────────────────────┐
        │           ━━━━ (上须)       │
        │         ┌───┴───┐           │
   ─────│         │ ▪ ▪   │           │ ───── 上须
        │         │   ▪   │           │
        │         │ ▪   ▪│           │
        │         └───┬───┘           │
        │           ━━━━ (下须)       │
        └─────────────────────────────┘
              │    │          │
              └──┬─┘          │
                 │            └── 离群值
              四分位距(IQR)

组件：

  • 箱体：包含中间50%的数据（Q1 到 Q3）
  • 中位线：数据的中位数
  • 须：Q1 - 1.5×IQR 和 Q3 + 1.5×IQR
  • 离群值：超出须的点

热力图（Heatmap）

适用场景：展示矩阵数据或密度

最佳实践：

  • 使用连续的配色方案
  • 提供清晰的图例
  • 行和列按逻辑顺序排列

配色方案

分类数据（Qualitative）

用于区分无顺序的类别：

Blues 顺序配色（单色）：
■ ■ ■ ■ ■ ■ ■ ■ ■ ■

Paired（配对，适合色盲用户）：
■ ■ ■ ■ ■ ■ ■ ■ ■ ■

顺序数据（Sequential）

用于展示有序数据（从低到高）：

Viridis（感知均匀，适合色盲）：
■ ■ ■ ■ ■ ■ ■ ■ ■ ■

发散数据（Diverging）

用于展示偏离中心的值：

Red-Blue 中心发散：
■ ■ ■ ■ ■ ■ ■ ■ ■ ■
（低）        中性       （高）

色盲友好配色

约8%的男性患有红绿色盲：

方案说明
Viridis感知均匀，色盲友好
ColorBrewer’s “Set2”分类的理想选择
避免纯红/纯绿使用蓝/橙或棕/青替代

可视化常见错误

1. 轴截断

❌ 截断Y轴：                    ✓ 完整Y轴：
    │                               │
    │   ████                         │   ████
    │   ████   ████                   │   ████   ████
────┼───────────────             ────┼─────────────────
    │   A    B                       │   A    B

2. 3D效果扭曲

❌ 3D饼图（扭曲比例）：           ✓ 2D饼图：
      ╱╲                            ┌───────┐
     ╱  ╲                           │       │
    ╱    ╲                          │       │
   3D    10%                        └───────┘
   效果                          人眼更易准确判断

3. 双重编码

同一数据用两种视觉通道编码，造成冗余：

❌ 双重编码：同时用高度和颜色编码同一数据
✓ 单一编码：用位置编码数据，用颜色编码类别

4. 误导性颜色映射

❌ 从红到绿渐变（红绿色盲不友好）：
  ▓▓▓▓▓▓▓▓▓▓  0 → 100

✓ Viridis（色盲友好）：
  ▓▓▓▓▓▓▓▓▓▓  0 → 100

可视化工具与库

类别工具/库适用场景
入门级Excel, Google Sheets快速简单图表
统计R (ggplot2)统计分析
WebD3.js, ECharts交互式Web可视化
PythonMatplotlib, Seaborn数据分析
BI工具Tableau, PowerBI商业智能

参考

Footnotes

  1. 参考《The Visual Display of Quantitative Information》by Edward Tufte 和《Fundamentals of Data Visualization》by Claus Wilke ↩

关系图谱