visualizing-data

数据可视化组件库

关于如何选择和实现有效数据可视化的系统化指南，帮助根据数据特征匹配合适的可视化类型，确保清晰、易用且富有影响力。

概述

数据可视化将原始数据转化为直观呈现形式，从而揭示规律、趋势和洞察。本技能提供：

1. 选择框架：从数据类型 + 目的 → 图表类型的系统化决策树
2. 24+ 种可视化方法：按分析目的分类
3. 无障碍模式：符合 WCAG 2.1 AA 标准，采用色盲友好型配色方案
4. 性能策略：针对不同数据集大小（<1000 到 >100K 个点）进行优化
5. 多语言支持：JavaScript/TypeScript（主要）、Python、Rust、Go

---

快速入门工作流

步骤 1：评估数据

What type? [categorical | continuous | temporal | spatial | hierarchical]
How many dimensions? [1D | 2D | multivariate]
How many points? [<100 | 100-1K | 1K-10K | >10K]

步骤 2：确定目的

What story to tell? [comparison | trend | distribution | relationship | composition | flow | hierarchy | geographic]

步骤 3：选择图表类型

快速选择：

• 比较 5-10 个类别 → 条形图
• 展示 12 个月的销售额 → 折线图
• 展示年龄分布 → 直方图或小提琴图
• 探索相关性 → 散点图
• 展示预算构成 → 矩形树图或堆叠条形图

**完整决策树：**参见 references/selection-matrix.md

步骤 4：实现

推荐库请参见下方的语言章节。

步骤 5：应用无障碍要求

• 添加文本替代内容（aria-label）
• 确保颜色对比度至少达到 3:1
• 使用色盲友好型配色方案
• 提供数据表格作为替代形式

步骤 6：优化性能

• <1000 个点：标准 SVG 渲染

• 1000 个点：采样或使用 Canvas 渲染

• 超大型数据集：服务器端聚合

---

以目的为先的选择方式

根据分析目的选择图表类型：

目的	图表类型
比较数值	条形图、棒棒糖图
展示趋势	折线图、面积图
揭示分布	直方图、小提琴图、箱线图
探索关系	散点图、气泡图
说明构成	矩形树图、堆叠条形图、饼图（<6 个扇区）
可视化流向	桑基图、弦图
展示层级	旭日图、树状图、矩形树图
展示地理信息	分级统计地图、符号地图

---

可视化目录

第 1 级：基础图形元素

面向大众受众，适用于直观的数据叙述：

• 条形图：比较类别
• 折线图：展示随时间变化的趋势
• 散点图：探索关系
• 饼图：展示部分与整体的关系（最多 5-6 个扇区）
• 面积图：强调随时间变化的数值大小

第 2 级：以目的为导向

用于展示特定的分析洞察：

• 比较：分组条形图、棒棒糖图、子弹图
• 趋势：河流图、斜率图、迷你图
• 分布：小提琴图、箱线图、直方图
• 关系：气泡图、六边形分箱图
• 构成：矩形树图、旭日图、瀑布图
• 流向：桑基图、弦图

第 3 级：高级图表

适用于复杂数据和专业受众：

• 多维数据：平行坐标图、雷达图、小多图
• 时间数据：甘特图、日历热力图、蜡烛图
• 网络：力导向图、邻接矩阵

**详细说明：**参见 references/chart-catalog.md

---

无障碍要求（WCAG 2.1 AA）

文本替代内容

<figure role="img" aria-label="Sales increased 15% from Q3 to Q4">
  <svg>...</svg>
</figure>

颜色要求

• 非文本 UI 元素：对比度至少为 3:1
• 文本：对比度至少为 4.5:1（大号文本 ≥24px 时为 3:1）
• 不要仅依赖颜色——应结合图案/纹理和标签

色盲友好型配色方案

IBM 配色方案（推荐）：

#648FFF (Blue), #785EF0 (Purple), #DC267F (Magenta),
#FE6100 (Orange), #FFB000 (Yellow)

**避免：**红/绿色组合（8% 的男性患有红绿色盲）

键盘导航

• 使用 Tab 键遍历交互元素
• 使用 Enter/Space 激活工具提示
• 使用方向键浏览数据点

**完整无障碍指南：**参见 references/accessibility.md

按数据量划分的性能策略

行数	策略	实现方式
<1,000	直接渲染	标准库（SVG）
1K-10K	采样/聚合	降采样至约 500 个点
10K-100K	Canvas 渲染	从 SVG 切换到 Canvas
>100K	服务端聚合	后端处理

---

JavaScript/TypeScript 实现

Recharts（业务仪表板）

可组合的 React 组件、声明式 API，默认支持响应式布局。

npm install recharts

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
];

export function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="sales" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

D3.js（自定义可视化）

灵活性极高、行业标准，支持无限种图表类型。

npm install d3

Plotly（科学/交互式可视化）

3D 可视化、统计图表，开箱即用的交互功能。

npm install react-plotly.js plotly.js

**详细示例：**参见 references/javascript/

---

Python 实现

常用库：

• Plotly - 交互式图表（与 JavaScript 使用相同的 API）
• Matplotlib - 可用于出版物的高质量静态绘图
• Seaborn - 统计可视化
• Altair - 声明式可视化语法

构建 Python 实现时：

1. 遵循上述通用模式
2. 使用 RESEARCH_GUIDE.md 研究相关库
3. 添加到 references/python/

---

与设计令牌集成

如需应用主题，请参考 design-tokens 技能：

--chart-color-primary
--chart-color-1 through --chart-color-10
--chart-axis-color
--chart-grid-color
--chart-tooltip-bg

<Line stroke="var(--chart-color-primary)" />

浅色、深色和高对比度主题均可通过设计令牌自动生效。

---

应避免的常见错误

1. 先入为主地选择图表 - 根据数据和用途选择，而非外观
2. 为超过 6 个类别使用饼图 - 改用排序条形图
3. 双轴图表 - 通常会造成误导，改用小多图
4. 能用 2D 时却使用 3D - 增加复杂度，降低清晰度
5. 彩虹色阶 - 感知均匀性不足，也不利于色盲用户辨识
6. 截断 y 轴 - 明确标示，或从零开始
7. 颜色过多 - 将不同类别限制在 6-8 种
8. 缺少上下文 - 始终标注坐标轴，并注明单位

---

快速决策树

START: What is your data?

Categorical (categories/groups)
  ├─ Compare values → Bar Chart
  ├─ Show composition → Treemap or Pie Chart (<6 slices)
  └─ Show flow → Sankey Diagram

Continuous (numbers)
  ├─ Single variable → Histogram, Violin Plot
  └─ Two variables → Scatter Plot

Temporal (time series)
  ├─ Single metric → Line Chart
  ├─ Multiple metrics → Small Multiples
  └─ Daily patterns → Calendar Heatmap

Hierarchical (nested)
  ├─ Proportions → Treemap
  └─ Show depth → Sunburst, Dendrogram

Geographic (locations)
  ├─ Regional aggregates → Choropleth Map
  └─ Point locations → Symbol Map

---

参考资料

选择指南：

• references/chart-catalog.md - 全部 24 种以上的可视化类型
• references/selection-matrix.md - 完整的决策树

技术指南：

• references/accessibility.md - WCAG 2.1 AA 模式
• references/color-systems.md - 适合色盲用户的调色板
• references/performance.md - 按数据量优化

特定语言资料：

• references/javascript/ - React、D3.js、Plotly 示例
• references/python/ - Plotly、Matplotlib、Seaborn

资源文件：

• assets/color-palettes/ - 无障碍调色方案
• assets/example-datasets/ - 用于测试的示例数据

---

示例

可运行的代码示例：

• examples/javascript/bar-chart.tsx
• examples/javascript/line-chart.tsx
• examples/javascript/scatter-plot.tsx
• examples/javascript/accessible-chart.tsx

cd examples/javascript && npm install && npm start

---

验证

# Validate accessibility
scripts/validate_accessibility.py <chart-html>

# Test colorblind
# Use browser DevTools color vision deficiency emulator

---

**渐进式披露：**此 SKILL.md 提供概览和快速入门。详细文档、代码示例和特定语言的实现位于 references/ 和 examples/ 目录中。