visualizing-data

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Data Visualization Component Library

数据可视化组件库

Systematic guidance for selecting and implementing effective data visualizations, matching data characteristics with appropriate visualization types, ensuring clarity, accessibility, and impact.

为选择和实现高效的数据可视化提供系统化指导，匹配数据特征与合适的可视化类型，确保内容清晰、具备可访问性且有影响力。

Overview

概述

Data visualization transforms raw data into visual representations that reveal patterns, trends, and insights. This skill provides:

Selection Framework: Systematic decision trees from data type + purpose → chart type
24+ Visualization Methods: Organized by analytical purpose
Accessibility Patterns: WCAG 2.1 AA compliance, colorblind-safe palettes
Performance Strategies: Optimize for dataset size (<1000 to >100K points)
Multi-Language Support: JavaScript/TypeScript (primary), Python, Rust, Go

数据可视化将原始数据转换为可视化表示形式，从而揭示模式、趋势和洞察。本技能提供以下内容：

选型框架：基于数据类型+分析目标的系统化决策树，指导选择图表类型
24种以上可视化方法：按分析目标分类
可访问性模式：符合WCAG 2.1 AA标准，提供色弱友好调色板
性能优化策略：针对不同数据集规模（<1000条到>10万条数据）进行优化
多语言支持：主要支持JavaScript/TypeScript，同时兼容Python、Rust、Go

Quick Start Workflow

快速开始工作流

Step 1: Assess Data

步骤1：评估数据

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

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

Step 2: Determine Purpose

步骤2：确定分析目标

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

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

Step 3: Select Chart Type

步骤3：选择图表类型

Quick Selection:

Compare 5-10 categories → Bar Chart
Show sales over 12 months → Line Chart
Display distribution of ages → Histogram or Violin Plot
Explore correlation → Scatter Plot
Show budget breakdown → Treemap or Stacked Bar

Complete decision trees: See

references/selection-matrix.md

快速选型：

对比5-10个分类 → Bar Chart
展示12个月的销售额趋势 → Line Chart
展示年龄分布 → Histogram或Violin Plot
探索变量相关性 → Scatter Plot
展示预算占比 → Treemap或Stacked Bar

完整决策树： 查看

references/selection-matrix.md

Step 4: Implement

步骤4：实现开发

See language sections below for recommended libraries.

请查看下方对应语言章节的推荐库。

Step 5: Apply Accessibility

步骤5：应用可访问性规范

Add text alternative (aria-label)
Ensure 3:1 color contrast minimum
Use colorblind-safe palette
Provide data table alternative

添加文本替代方案（aria-label）
确保最低3:1的颜色对比度
使用色弱友好调色板
提供数据表格作为替代展示

Step 6: Optimize Performance

步骤6：优化性能

<1000 points: Standard SVG rendering
1000 points: Sampling or Canvas rendering
Very large: Server-side aggregation

数据量<1000条：标准SVG渲染
数据量>1000条：采用采样或Canvas渲染
超大数据量：服务端聚合处理

Purpose-First Selection

基于目标的选型

Match analytical purpose to chart type:

Purpose	Chart Types
Compare values	Bar Chart, Lollipop Chart
Show trends	Line Chart, Area Chart
Reveal distributions	Histogram, Violin Plot, Box Plot
Explore relationships	Scatter Plot, Bubble Chart
Explain composition	Treemap, Stacked Bar, Pie Chart (<6 slices)
Visualize flow	Sankey Diagram, Chord Diagram
Display hierarchy	Sunburst, Dendrogram, Treemap
Show geographic	Choropleth Map, Symbol Map

根据分析目标匹配图表类型：

分析目标	图表类型
对比数值	Bar Chart、Lollipop Chart
展示趋势	Line Chart、Area Chart
揭示分布	Histogram、Violin Plot、Box Plot
探索关联	Scatter Plot、Bubble Chart
说明构成	Treemap、Stacked Bar、Pie Chart（不超过6个分片）
可视化流向	Sankey Diagram、Chord Diagram
展示层级结构	Sunburst、Dendrogram、Treemap
地理空间展示	Choropleth Map、Symbol Map

Visualization Catalog

可视化类型目录

Tier 1: Fundamental Primitives

第一层：基础原生类型

General audiences, straightforward data stories:

Bar Chart: Compare categories
Line Chart: Show trends over time
Scatter Plot: Explore relationships
Pie Chart: Part-to-whole (max 5-6 slices)
Area Chart: Emphasize magnitude over time

面向普通受众，适用于简单数据叙事：

Bar Chart：对比分类数据
Line Chart：展示时间趋势
Scatter Plot：探索变量关联
Pie Chart：展示部分与整体关系（最多5-6个分片）
Area Chart：强调随时间变化的数值规模

Tier 2: Purpose-Driven

第二层：目标导向类型

Specific analytical insights:

Comparison: Grouped Bar, Lollipop, Bullet Chart
Trend: Stream Graph, Slope Graph, Sparklines
Distribution: Violin Plot, Box Plot, Histogram
Relationship: Bubble Chart, Hexbin Plot
Composition: Treemap, Sunburst, Waterfall
Flow: Sankey Diagram, Chord Diagram

用于特定分析洞察：

对比类：Grouped Bar、Lollipop、Bullet Chart
趋势类：Stream Graph、Slope Graph、Sparklines
分布类：Violin Plot、Box Plot、Histogram
关联类：Bubble Chart、Hexbin Plot
构成类：Treemap、Sunburst、Waterfall
流向类：Sankey Diagram、Chord Diagram

Tier 3: Advanced

第三层：高级类型

Complex data, sophisticated audiences:

Multi-dimensional: Parallel Coordinates, Radar Chart, Small Multiples
Temporal: Gantt Chart, Calendar Heatmap, Candlestick
Network: Force-Directed Graph, Adjacency Matrix

Detailed descriptions: See

references/chart-catalog.md

面向复杂数据与专业受众：

多维数据：Parallel Coordinates、Radar Chart、Small Multiples
时间序列：Gantt Chart、Calendar Heatmap、Candlestick
网络关系：Force-Directed Graph、Adjacency Matrix

详细说明： 查看

references/chart-catalog.md

Accessibility Requirements (WCAG 2.1 AA)

可访问性要求（WCAG 2.1 AA）

Text Alternatives

文本替代方案

html

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

html

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

Color Requirements

颜色要求

Non-text UI elements: 3:1 minimum contrast
Text: 4.5:1 minimum (or 3:1 for large text ≥24px)
Don't rely on color alone - use patterns/textures + labels

非文本UI元素：最低3:1的对比度
文本：最低4.5:1的对比度（大文本≥24px时为3:1）
不要仅依赖颜色区分——同时使用图案/纹理+标签

Colorblind-Safe Palettes

色弱友好调色板

IBM Palette (Recommended):

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

Avoid: Red/Green combinations (8% of males have red-green colorblindness)

推荐IBM调色板：

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

避免： 红/绿配色组合（8%的男性存在红绿色弱）

Keyboard Navigation

键盘导航

Tab through interactive elements
Enter/Space to activate tooltips
Arrow keys to navigate data points

Complete accessibility guide: See

references/accessibility.md

通过Tab键遍历交互元素
按Enter/Space键激活提示框
使用方向键导航数据点

完整可访问性指南： 查看

references/accessibility.md

Performance by Data Volume

按数据量优化性能

Rows	Strategy	Implementation
<1,000	Direct rendering	Standard libraries (SVG)
1K-10K	Sampling/aggregation	Downsample to ~500 points
10K-100K	Canvas rendering	Switch from SVG to Canvas
>100K	Server-side aggregation	Backend processing

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

JavaScript/TypeScript Implementation

JavaScript/TypeScript 实现

Recharts (Business Dashboards)

Recharts（商务仪表板）

Composable React components, declarative API, responsive by default.

bash

npm install recharts

tsx

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>
  );
}

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

bash

npm install recharts

tsx

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 (Custom Visualizations)

D3.js（自定义可视化）

Maximum flexibility, industry standard, unlimited chart types.

bash

npm install d3

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

bash

npm install d3

Plotly (Scientific/Interactive)

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

3D visualizations, statistical charts, interactive out-of-box.

bash

npm install react-plotly.js plotly.js

Detailed examples: See

references/javascript/

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

bash

npm install react-plotly.js plotly.js

详细示例： 查看

references/javascript/

Python Implementation

Python 实现

Common Libraries:

Plotly - Interactive charts (same API as JavaScript)
Matplotlib - Publication-quality static plots
Seaborn - Statistical visualizations
Altair - Declarative visualization grammar

When building Python implementations:

Follow universal patterns above
Use RESEARCH_GUIDE.md to research libraries
Add to
```
references/python/
```

常用库：

Plotly - 交互式图表（与JavaScript API一致）
Matplotlib - 出版级静态图表
Seaborn - 统计可视化
Altair - 声明式可视化语法

开发Python实现时的注意事项：

遵循上述通用模式
参考RESEARCH_GUIDE.md研究各类库
将内容添加至
```
references/python/
```

Integration with Design Tokens

与设计令牌集成

Reference the design-tokens skill for theming:

css

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

tsx

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

Light/dark/high-contrast themes work automatically via design tokens.

参考 design-tokens 技能实现主题定制：

css

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

tsx

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

通过设计令牌可自动适配亮色/暗色/高对比度主题。

Common Mistakes to Avoid

需避免的常见错误

Chart-first thinking - Choose based on data + purpose, not aesthetics
Pie charts for >6 categories - Use sorted bar chart instead
Dual-axis charts - Usually misleading, use small multiples
3D when 2D sufficient - Adds complexity, reduces clarity
Rainbow color scales - Not perceptually uniform, not colorblind-safe
Truncated y-axis - Indicate clearly or start at zero
Too many colors - Limit to 6-8 distinct categories
Missing context - Always label axes, include units

先选图表再看数据 - 应基于数据+目标选择，而非仅考虑美观
Pie Chart用于超过6个分类的场景 - 改用排序后的Bar Chart
双轴图表 - 通常具有误导性，改用小多图（Small Multiples）
能用2D却用3D - 增加复杂度，降低清晰度
彩虹色阶 - 感知不均匀，且对色弱不友好
截断Y轴 - 需明确标注或从0开始
使用过多颜色 - 限制为6-8个不同分类
缺少上下文 - 务必标注坐标轴、包含单位

Quick Decision Tree

快速决策树

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

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

参考资料

Selection Guides:

```
references/chart-catalog.md
```
- All 24+ visualization types
```
references/selection-matrix.md
```
- Complete decision trees

Technical Guides:

```
references/accessibility.md
```
- WCAG 2.1 AA patterns
```
references/color-systems.md
```
- Colorblind-safe palettes
```
references/performance.md
```
- Optimization by data volume

Language-Specific:

```
references/javascript/
```
- React, D3.js, Plotly examples
```
references/python/
```
- Plotly, Matplotlib, Seaborn

Assets:

```
assets/color-palettes/
```
- Accessible color schemes
```
assets/example-datasets/
```
- Sample data for testing

选型指南：

```
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

示例代码

Working code examples:

```
examples/javascript/bar-chart.tsx
```
```
examples/javascript/line-chart.tsx
```
```
examples/javascript/scatter-plot.tsx
```

examples/javascript/accessible-chart.tsx

bash

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

可运行的代码示例：

```
examples/javascript/bar-chart.tsx
```
```
examples/javascript/line-chart.tsx
```
```
examples/javascript/scatter-plot.tsx
```

examples/javascript/accessible-chart.tsx

bash

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

Validation

验证方法

bash

undefined

bash

undefined

Validate accessibility

验证可访问性

scripts/validate_accessibility.py <chart-html>

Test colorblind

测试色弱适配

Use browser DevTools color vision deficiency emulator

使用浏览器开发者工具的色觉缺陷模拟器


---

**Progressive disclosure:** This SKILL.md provides overview and quick start. Detailed documentation, code examples, and language-specific implementations in `references/` and `examples/` directories.


---

**渐进式披露：** 本SKILL.md提供概述和快速入门内容。详细文档、代码示例和语言专属实现请查看 `references/` 和 `examples/` 目录。