⚡

数据可视化Skill visualizing-data

数据可视化技能提供一个系统框架，用于选择和实现有效的数据可视化，匹配数据特征与分析目的，确保清晰性、可访问性和性能优化。关键词包括数据可视化、图表选择、可访问性、性能优化、数据分析、仪表板构建。

数据可视化 0 次安装 0 次浏览 更新于 3/23/2026

name: 数据可视化 description: 构建仪表板、报告和数据驱动界面，需要图表、图形或视觉分析。提供系统框架，基于数据特征和分析目的选择适当的可视化。包括24+种可视化类型，按目的组织（趋势、比较、分布、关系、流程、层次、地理空间），可访问性模式（符合WCAG 2.1 AA标准），色盲安全调色板，和性能优化策略。在创建可视化、选择图表类型、以图形方式显示数据或设计数据界面时使用。

数据可视化组件库

选择和实现有效数据可视化的系统指导，匹配数据特征与适当的可视化类型，确保清晰性、可访问性和影响力。

概述

数据可视化将原始数据转换为视觉表示，揭示模式、趋势和洞见。此技能提供：

  1. 选择框架：从数据类型 + 目的 → 图表类型的系统决策树
  2. 24+ 可视化方法：按分析目的组织
  3. 可访问性模式：符合WCAG 2.1 AA标准，色盲安全调色板
  4. 性能策略：针对数据集大小优化（<1000 到 >100K 点）
  5. 多语言支持：JavaScript/TypeScript（主要），Python，Rust，Go

快速开始工作流

步骤 1: 评估数据

什么类型？ [分类 | 连续 | 时间序列 | 空间 | 层次]
多少维度？ [1D | 2D | 多变量]
多少点？ [<100 | 100-1K | 1K-10K | >10K]

步骤 2: 确定目的

要讲述什么故事？ [比较 | 趋势 | 分布 | 关系 | 构成 | 流程 | 层次 | 地理]

步骤 3: 选择图表类型

快速选择：

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

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

步骤 4: 实现

见下面的语言部分推荐库。

步骤 5: 应用可访问性

  • 添加文本替代（aria-label）
  • 确保 3:1 颜色对比度最小值
  • 使用色盲安全调色板
  • 提供数据表替代

步骤 6: 优化性能

  • <1000 点：标准 SVG 渲染

  • 1000 点：采样或 Canvas 渲染

  • 非常大：服务器端聚合

目的优先选择

匹配分析目的到图表类型：

目的 图表类型
比较值 条形图，棒棒糖图
显示趋势 折线图，面积图
揭示分布 直方图，小提琴图，箱形图
探索关系 散点图，气泡图
解释构成 树状图，堆叠条形图，饼图（<6 片）
可视化流程 桑基图，弦图
显示层次 旭日图，树状图，树状图
显示地理 等值线图，符号地图

可视化目录

层级 1: 基本原语

普通受众，直接的数据故事：

  • 条形图：比较类别
  • 折线图：显示随时间趋势
  • 散点图：探索关系
  • 饼图：部分到整体（最大 5-6 片）
  • 面积图：强调随时间幅度

层级 2: 目的驱动

特定分析洞察：

  • 比较：分组条形图，棒棒糖图，子弹图
  • 趋势：流图，坡度图，Sparklines
  • 分布：小提琴图，箱形图，直方图
  • 关系：气泡图，Hexbin 图
  • 构成：树状图，旭日图，瀑布图
  • 流程：桑基图，弦图

层级 3: 高级

复杂数据，复杂受众：

  • 多维度：平行坐标图，雷达图，Small Multiples
  • 时间序列：甘特图，日历热力图，蜡烛图
  • 网络：力导向图，邻接矩阵

详细描述： 见 references/chart-catalog.md

可访问性要求（WCAG 2.1 AA）

文本替代

<figure role="img" aria-label="销售额从第三季度到第四季度增长了15%">
  <svg>...</svg>
</figure>

颜色要求

  • 非文本UI元素：3:1 最小对比度
  • 文本：4.5:1 最小（或大文本 ≥24px 为 3:1）
  • 不要单独依赖颜色 - 使用图案/纹理 + 标签

色盲安全调色板

IBM 调色板（推荐）：

#648FFF (蓝色), #785EF0 (紫色), #DC267F (洋红色),
#FE6100 (橙色), #FFB000 (黄色)

避免： 红/绿组合（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 到 --chart-color-10
--chart-axis-color
--chart-grid-color
--chart-tooltip-bg

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

浅色/深色/高对比度主题通过设计令牌自动工作。

常见错误避免

  1. 图表优先思维 - 基于数据 + 目的选择，不是美观
  2. 饼图用于 >6 类别 - 使用排序条形图代替
  3. 双轴图表 - 通常误导，使用 Small Multiples
  4. 2D 足够时用 3D - 增加复杂性，减少清晰性
  5. 彩虹颜色尺度 - 不感知统一，不色盲安全
  6. 截断 y 轴 - 清晰指示或从零开始
  7. 太多颜色 - 限制到 6-8 个不同类别
  8. 缺少上下文 - 始终标记轴，包括单位

快速决策树

开始：您的数据是什么？

分类（类别/组）
  ├─ 比较值 → 条形图
  ├─ 显示构成 → 树状图或饼图（<6 片）
  └─ 显示流程 → 桑基图

连续（数字）
  ├─ 单变量 → 直方图，小提琴图
  └─ 双变量 → 散点图

时间序列（时间序列）
  ├─ 单指标 → 折线图
  ├─ 多指标 → Small Multiples
  └─ 日常模式 → 日历热力图

层次（嵌套）
  ├─ 比例 → 树状图
  └─ 显示深度 → 旭日图，树状图

地理（位置）
  ├─ 区域聚合 → 等值线图
  └─ 点位置 → 符号地图

参考

选择指南：

  • 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

验证

# 验证可访问性
scripts/validate_accessibility.py <chart-html>

# 测试色盲
# 使用浏览器开发工具颜色视觉缺陷模拟器

渐进式披露： 此 SKILL.md 提供概述和快速开始。详细文档、代码例子和语言特定实现在 references/ 和 examples/ 目录中。