Back to Details

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:
  1. Selection Framework: Systematic decision trees from data type + purpose → chart type
  2. 24+ Visualization Methods: Organized by analytical purpose
  3. Accessibility Patterns: WCAG 2.1 AA compliance, colorblind-safe palettes
  4. Performance Strategies: Optimize for dataset size (<1000 to >100K points)
  5. Multi-Language Support: JavaScript/TypeScript (primary), Python, Rust, Go
数据可视化将原始数据转换为可视化表示形式，从而揭示模式、趋势和洞察。本技能提供以下内容：
  1. 选型框架：基于数据类型+分析目标的系统化决策树，指导选择图表类型
  2. 24种以上可视化方法：按分析目标分类
  3. 可访问性模式：符合WCAG 2.1 AA标准，提供色弱友好调色板
  4. 性能优化策略：针对不同数据集规模（<1000条到>10万条数据）进行优化
  5. 多语言支持：主要支持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:
PurposeChart Types
Compare valuesBar Chart, Lollipop Chart
Show trendsLine Chart, Area Chart
Reveal distributionsHistogram, Violin Plot, Box Plot
Explore relationshipsScatter Plot, Bubble Chart
Explain compositionTreemap, Stacked Bar, Pie Chart (<6 slices)
Visualize flowSankey Diagram, Chord Diagram
Display hierarchySunburst, Dendrogram, Treemap
Show geographicChoropleth 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

按数据量优化性能

RowsStrategyImplementation
<1,000Direct renderingStandard libraries (SVG)
1K-10KSampling/aggregationDownsample to ~500 points
10K-100KCanvas renderingSwitch from SVG to Canvas
>100KServer-side aggregationBackend processing
数据行数优化策略实现方式
<1,000直接渲染标准库（SVG）
1K-10K采样/聚合下采样至约500个数据点
10K-100KCanvas渲染从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:
  1. Follow universal patterns above
  2. Use RESEARCH_GUIDE.md to research libraries
  3. Add to 
    references/python/
常用库：
  • Plotly - 交互式图表（与JavaScript API一致）
  • Matplotlib - 出版级静态图表
  • Seaborn - 统计可视化
  • Altair - 声明式可视化语法
开发Python实现时的注意事项：
  1. 遵循上述通用模式
  2. 参考RESEARCH_GUIDE.md研究各类库
  3. 将内容添加至 
    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

需避免的常见错误

  1. Chart-first thinking - Choose based on data + purpose, not aesthetics
  2. Pie charts for >6 categories - Use sorted bar chart instead
  3. Dual-axis charts - Usually misleading, use small multiples
  4. 3D when 2D sufficient - Adds complexity, reduces clarity
  5. Rainbow color scales - Not perceptually uniform, not colorblind-safe
  6. Truncated y-axis - Indicate clearly or start at zero
  7. Too many colors - Limit to 6-8 distinct categories
  8. Missing context - Always label axes, include units
  1. 先选图表再看数据 - 应基于数据+目标选择，而非仅考虑美观
  2. Pie Chart用于超过6个分类的场景 - 改用排序后的Bar Chart
  3. 双轴图表 - 通常具有误导性，改用小多图（Small Multiples）
  4. 能用2D却用3D - 增加复杂度，降低清晰度
  5. 彩虹色阶 - 感知不均匀，且对色弱不友好
  6. 截断Y轴 - 需明确标注或从0开始
  7. 使用过多颜色 - 限制为6-8个不同分类
  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>
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/` 目录。