关于 data-visualization
data-visualization 是面向开发者和数据从业者的可视化设计技能，涵盖图表、图形和仪表板。它提供编码方式、图表选择、布局、渲染、交互及无障碍设计指导，并介绍成熟库与算法。
主要功能
- 01视觉编码与图表选择
- 02交互和注释模式
- 03图布局库选择指导
- 04渲染与性能阈值
- 05无障碍和配色指导
适用场景
- 01为数据或问题选择合适图表
- 02设计交互式图形和仪表板
- 03提升可视化性能与无障碍性
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/data-visualization确认已加载。
详细介绍
数据可视化
可视化是一种沟通方式。每个视觉元素都必须服务于理解。
关键规则
🚨 使用成熟的算法。 图布局、树布局、空间索引——这些问题已有解决方案。在自定义实现前，先了解 dagre、d3-force 和 ELK.js。
🚨 根据感知准确度选择编码方式。 位置优于长度，长度优于角度，角度优于面积，面积优于颜色。优先使用条形图，其次是饼图，再次是气泡图。
🚨 绝不要只依赖颜色。 8% 的男性有色盲。应使用形状、图案或标签作为备用编码。
🚨 根据规模匹配渲染方式。 <1000 个元素用 SVG，1000-10000 个用 Canvas，>10000 个用 WebGL。
1. 视觉编码
图形标记与视觉通道
图形标记是表示数据的几何图元：
- 点（散点图、点图）
- 线（折线图、网络边）
- 面（条形图、面积图、地图）
视觉通道是应用于图形标记的视觉属性：
- 位置（x、y 坐标）
- 尺寸（长度、面积、体积）
- 颜色（色相、饱和度、明度）
- 形状（圆形、正方形、三角形）
- 方向（角度、斜率）
Cleveland 与 McGill 层级（1984）
按感知准确度排列的视觉编码：
- 沿共同刻度的位置（最准确）
- 非对齐刻度上的位置
- 长度
- 角度／斜率
- 面积
- 体积
- 颜色饱和度／色相（最不准确）
启示： 条形图（位置）> 饼图（角度）> 气泡图（面积）
前注意属性
无需有意识处理即可在 <250ms 内感知的属性：
- 颜色（色相、饱和度）
- 形态（方向、长度、宽度、尺寸、形状）
- 空间位置
- 动态
将前注意属性用于最重要的数据——它们会自动“脱颖而出”。
不同数据类型的通道有效性
| 数据类型 | 最佳通道 |
|---|---|
| 定量 | 位置、长度、角度、面积 |
| 有序 | 位置、密度、饱和度 |
| 分类 | 形状、色相、空间区域 |
2. 交互设计
Shneiderman 准则（1996）
“先看全貌，再缩放和筛选，最后按需查看细节”
- 全貌 — 展示整个数据集，建立上下文
- 缩放与筛选 — 降低复杂度，聚焦于子集
- 按需查看细节 — 工具提示、点击展开、逐层深入
交互模式
| 模式 | 使用场景 |
|---|---|
| 刷选与联动 | 在协调视图之间交叉高亮 |
| 焦点＋上下文 | 鱼眼镜头、按需查看细节面板 |
| 直接操作 | 拖动节点、调整元素大小、重新排序 |
| 动画过渡 | 帮助用户跟踪不同状态之间的变化 |
| 平移与缩放 | 浏览大型可视化 |
| 筛选 | 将数据缩减到相关子集 |
| 选择 | 高亮特定数据点 |
3. 图表选择
按问题类型选择
| 问题 | 图表类型 | 原因 |
|---|---|---|
| 数值如何比较？ | 条形图 | 位置编码最准确 |
| 随时间发生了怎样的变化？ | 折线图 | 展示趋势，可处理多个数据点 |
| 分布情况如何？ | 直方图、箱线图 | 展示离散程度、异常值和形状 |
| 存在怎样的关系？ | 散点图 | 揭示相关性和聚类 |
| 各部分如何构成整体？ | 堆叠条形图、矩形树图 | 展示构成 |
| 存在哪些连接？ | 网络图、桑基图 | 展示关系和流向 |
| 层级结构如何？ | 树图、旭日图、矩形树图 | 展示父子结构 |
| 它在哪里？ | 分级统计地图、符号地图 | 提供地理上下文 |
按数据量选择
| 数据量 | 处理方式 |
|---|---|
| <20 个点 | 简单图表、直接标注 |
| 20-500 个 | 标准可视化 |
| 500-5000 个 | 考虑聚合、筛选 |
| 5000+ 个 | 必须聚合，或使用 Canvas/WebGL |
常见反模式
- ❌ 饼图超过 5 个扇区（应使用条形图）
- ❌ 缺乏充分理由的 3D 图表
- ❌ 双轴使用无关刻度（会造成误导）
- ❌ 条形图的基线不为零（会扭曲感知）
- ❌ 截断坐标轴但未明确标示
4. 颜色
调色板类型
| 类型 | 用例 | 示例 |
|---|---|---|
| 顺序型 | 从低到高的值 | Blues、Greens、Viridis |
| 发散型 | 值从中点向两侧发散 | RdBu、BrBG、Spectral |
| 分类型 | 不同类别 | Set2、Tableau10、Category10 |
色盲友好性
- 8% 的男性、0.5% 的女性存在色觉缺陷
- 绝不要只依赖颜色——应使用形状、图案和标签
- 色盲友好的顺序型调色板：viridis、cividis、plasma
- 色盲友好的分类型调色板：ColorBrewer 的色盲友好选项
- 使用 Coblis、Sim Daltonism、Chrome DevTools 进行测试
感知均匀性
- 避免使用彩虹色图（jet）——感知上的色阶不均匀
- 顺序型数据使用 viridis、parula、cividis
- 这些调色板可确保不同值之间的感知距离相等
颜色指南
- 文本对比度至少为 4.5:1（WCAG AA）
- UI 组件对比度至少为 3:1
- 不同的分类颜色最多使用 7-10 种
- 使用饱和度或亮度变化来突出重点
5. 布局算法
🚨 在实现任何布局算法之前，先检查是否已有现成的库。
算法 → 库对应关系
| 问题 | 算法 | 库 |
|---|---|---|
| 分层图/DAG | Sugiyama（1981） | dagre、ELK.js |
| 力导向网络 | Fruchterman-Reingold（1991） | d3-force、Cytoscape.js |
| 树布局 | Reingold-Tilford（1981） | d3-hierarchy |
| 矩形树图 | Squarified（2000） | d3-hierarchy、ECharts |
| 圆形打包 | Wang（2006） | d3-hierarchy |
| 桑基图 | — | d3-sankey |
| 弦图 | — | d3-chord |
| 大型图（10k+） | WebGL + 空间索引 | Sigma.js、G6、deck.gl |
| 空间查询 | 四叉树、R 树 | d3-quadtree、rbush |
| 最小化边交叉 | Barth（2002） | dagre/ELK 内置 |
布局的适用场景
| 布局 | 最适用场景 |
|---|---|
| Sugiyama（dagre） | 流程图、依赖关系图、有方向的 DAG |
| 力导向布局 | 社交网络、有机关系、探索 |
| 树形布局 | 每个节点只有一个父节点的层级结构 |
| 矩形树图 | 带有定量值的层级结构 |
| 环形布局 | 突出中心节点、环状结构 |
| 矩阵布局 | 边会重叠的稠密图 |
这些问题已经有成熟的解决方案。绝不要从头实现。
6. 渲染与性能
渲染技术阈值
<1000 elements → SVG
- DOM events work naturally
- Accessibility (ARIA) supported
- Crisp at any zoom level
- CSS styling
1000-10000 → Canvas
- Batch rendering
- Manual hit testing required
- Lower memory footprint
- requestAnimationFrame for animation
>10000 → WebGL
- GPU acceleration
- Sigma.js, deck.gl, regl
- Complex setup
- Limited text rendering
性能模式
| 模式 | 适用场景 |
|---|---|
| Web Workers | 布局计算（绝不阻塞主线程） |
| 空间索引 | 使用四叉树/R 树进行命中检测 |
| 细节层次 | 简化远处或较小的元素 |
| 视口裁剪 | 仅渲染可见元素 |
| 防抖 | 开销较大的交互（缩放、筛选） |
| 虚拟化 | 图表组件的长列表 |
| 聚合 | 数据点过多，无法逐个渲染 |
反模式
- ❌ 5000 个 SVG 节点（改用 Canvas）
- ❌ 在主线程上计算布局
- ❌ 不使用空间索引进行命中测试
- ❌ 渲染屏幕外的元素
- ❌ 单独为数千个元素添加动画
7. 库
图布局
| 库 | 最适用场景 | 说明 |
|---|---|---|
| dagre | 分层 DAG、流程图 | Sugiyama 算法，默认配置表现良好 |
| dagre-d3 | dagre + D3 渲染 | SVG 输出 |
| ELK.js | 复杂布局、复合图 | Eclipse Layout Kernel，高度可配置 |
| d3-force | 有机网络 | Fruchterman-Reingold，可自定义力 |
| Cytoscape.js | 图分析与可视化 | 算法库丰富 |
| Sigma.js | 大型图（10k+） | WebGL 渲染 |
| G6/AntV | 企业级图 | 功能全面，中文生态 |
| vis-network | 快速原型 | API 简单，可定制性有限 |
图表
| 库 | 最适用于 | 说明 |
|---|---|---|
| D3.js | 自定义、高交互性图表 | 底层库，提供最大控制权 |
| Observable Plot | 快速探索 | 由 D3 团队开发，默认设置出色 |
| Recharts | React 集成 | 声明式、可组合 |
| Victory | React 集成 | 支持动画 |
| ECharts | 功能丰富的仪表板 | 移动端体验出色，支持大型数据集 |
| Vega-Lite | 图形语法 | 声明式 JSON 规范 |
| Chart.js | 简单图表 | 易于设置，自定义能力有限 |
| Plotly | 科学可视化 | 支持 3D 和交互 |
何时使用 D3，何时使用更高级别的库
使用 D3 的场景：
- 需要完全控制渲染
- 构建新颖或自定义可视化
- 与现有 SVG/Canvas 代码集成
- 对性能要求严苛，需要自定义优化
使用更高级别库的场景：
- 标准图表类型已足够
- 重视更快的开发速度
- 团队对 D3 不太熟悉
- 需要内置的响应式布局或动画
8. 组合与布局
项目组合（仪表板层级）
- 视觉层级 — 引导视线优先关注最重要的内容
- 网格系统 — 对齐元素，保持整体协调
- 分组 — 将相关可视化放在一起
- 留白 — 留出呼吸空间，而不是浪费空间
- 阅读流 — 面向西方受众时采用 Z 形或 F 形布局
图表组合（单个图表）
| 元素 | 指南 |
|---|---|
| 标题 | 清晰、描述性强；放在左上方或上方居中 |
| 副标题 | 补充背景信息；字号小于标题，放在标题下方 |
| 坐标轴 | 标注单位；刻度间隔应有实际意义 |
| 图例 | 尽可能嵌入图表；内容复杂时放在图表外 |
| 宽高比 | 会影响斜率感知；趋势图采用 45° 倾斜 |
| 边距 | 为标签留出足够空间；各图表间保持一致 |
宽高比指南
- 折线图： 趋势图约采用 16:9（倾斜至 45°）
- 条形图： 取决于条形数量
- 散点图： 通常采用正方形（1:1），以便观察相关性
- 地图： 保持地理比例
9. 注释
注释类型
| 类型 | 用途 |
|---|---|
| 标题 | 说明“是什么”——标识可视化内容 |
| 副标题 | 补充背景信息和数据来源 |
| 图注 | 说明“意味着什么”——关键洞察或结论 |
| 坐标轴标签 | 变量名称和单位 |
| 图例 | 解读颜色、形状和大小的映射关系 |
| 标注 | 突出显示特定数据点 |
| 参考线 | 基准值、目标值、平均值 |
| 来源引用 | 数据出处 |
最佳实践
- 标注洞察，而不只是数据 — 使用“销售额在第 3 季度达到峰值”，而不只是“随时间变化的销售额”
- 少量使用标注 — 最多突出显示 1–3 个关键点
- 直接标注 — 尽可能将标签嵌入图表（而不是使用单独的图例）
- 提供背景信息 — 基准值、历史参考值、目标值
- 分层呈现信息 — 显示概览，交互时呈现细节
文本层级
- 标题（字号最大、字重最粗）
- 副标题/图注
- 坐标轴标题
- 刻度标签
- 注释
- 来源（字号最小）
10. 无障碍
WCAG 要求
- 最低 AA 级（优先达到 AAA 级）
- 普通文本的对比度至少为 4.5:1
- 大号文本和 UI 组件的对比度至少为 3:1
- 不得仅依靠颜色传达信息
键盘导航
- 使用 Tab 键遍历交互元素
- 使用方向键遍历数据点
- 使用 Enter/Space 键进行选择
- 使用 Escape 键取消/关闭
屏幕阅读器支持
<svg role="img" aria-labelledby="chart-title chart-desc">
<title id="chart-title">Monthly Sales 2024</title>
<desc id="chart-desc">Bar chart showing sales increasing from $10M in January to $15M in December</desc>
</svg>
- 使用 ARIA 标签和角色
- 提供文本替代内容
- 使用实时区域播报动态更新
- 按照符合逻辑的阅读顺序进行结构化
替代呈现方式
- 数据表格 — 为所有图表提供备用方案
- 文本摘要 — 描述关键洞察
- 声化 — 为时间序列提供音频呈现
- 触觉图形 — 满足实体无障碍需求
11. 反模式摘要
设计反模式
| 反模式 | 为什么不合适 | 应该怎么做 |
|---|---|---|
| 3D 图表 | 会扭曲感知 | 使用 2D 图表 |
| 扇区数 >5 的饼图 | 难以比较 | 使用条形图 |
| 两个无关的坐标轴 | 会造成误导性关联 | 使用独立图表 |
| 非零基线 | 会夸大差异 | 从零开始 |
| 彩虹色映射 | 感知均匀性差 | 使用 viridis |
| 仅用颜色编码 | 无法满足色盲用户的需求 | 添加形状或图案 |
| 图表杂物 | 会分散对数据的注意力 | 移除装饰 |
| 点位重叠 | 会掩盖数据密度 | 聚合数据或添加抖动 |
实现反模式
| 反模式 | 为什么不合适 | 应该怎么做 |
|---|---|---|
| 自定义图布局 | 重复解决已有问题 | 使用 dagre/ELK |
| 5000 个 SVG 节点 | 性能不佳 | 使用 Canvas |
| 在主线程上进行布局 | 会阻塞 UI | 使用 Web Worker |
| 没有空间索引 | 命中检测速度慢 | 使用四叉树 |
| 渲染屏幕外的内容 | 浪费计算资源 | 进行视口剔除 |
12. 学术基础
奠基性论文
| 论文 | 年份 | 贡献 |
|---|---|---|
| Cleveland 与 McGill《Graphical Perception》 | 1984 | 视觉编码层级 |
| Shneiderman《The Eyes Have It》 | 1996 | 概览、缩放、筛选、细节原则 |
| Gansner 等人《Drawing Directed Graphs》 | 1993 | dagre 的基础 |
| Fruchterman 与 Reingold《Force-directed Placement》 | 1991 | d3-force 的基础 |
| Sugiyama 等人《Hierarchical Systems》 | 1981 | 分层图布局 |
| Barth 等人《Bilayer Cross Counting》 | 2002 | 边交叉最小化 |
| Brewer《Color Use Guidelines》 | 1994 | ColorBrewer 调色板 |
必备资源
| 资源 | 类型 | 重点 |
|---|---|---|
| ColorBrewer (colorbrewer2.org) | 工具 | 无障碍调色板 |
| From Data to Viz (data-to-viz.com) | 指南 | 图表选择决策树 |
| Visualization Analysis & Design（Munzner） | 教科书 | 全面的理论 |
| Data Visualisation（Kirk） | 教科书 | 面向实践者的指南 |
| Visual Display of Quantitative Information（Tufte） | 教科书 | 数据墨水比、图表杂物 |
| D3 Gallery (observablehq.com/@d3/gallery) | 示例 | 实现模式 |
总结
🚨 实现可视化之前：
- 你要回答什么问题？ → 选择图表类型
- 数据量有多大？ → 选择渲染技术
- 是否已有成熟算法？ → 使用相关库
- 是否满足无障碍要求？ → 颜色、键盘、屏幕阅读器
- 是否遵循感知方面的最佳实践？ → 编码层级
评论
支持 Markdown