---
name: dataviz
description: 每当你即将创建任何图表、图形、绘图、仪表盘或数据可视化时使用此技能，在任何输出媒介中 — HTML 或 React 制品、内联 SVG、任何库中的绘图代码（matplotlib、plotly、d3、Recharts…）、你将渲染并上传的图像/PNG，或分享到 Slack 的图表。在编写第一行图表代码、选择图表颜色、构建统计瓦片/仪表/KPI 行或布局仪表盘之前阅读它。生成作为一个系统阅读的可视化 — 优雅、可访问、在亮色和暗色下一致 — 使用品牌中性占位符调色板，你可以替换为自己的。教授一种与设计系统无关的方法：形式启发式、带有可运行验证器的颜色公式、标记规格和交互规则。一个经过验证的默认调色板文档在 `references/palette.md` 中 — 将该文件的值替换为你品牌的值。触发词："chart"、"graph"、"plot"、"data viz"、"visualization"、"dashboard"、"analytics"、"visualize data"、"categorical colors"、"sequential / diverging palette"、"stat tile"、"sparkline"、"heatmap"、"legend"、"axis"、"tooltip"、"chart colors"、"color by series"。
---

# 数据可视化

图表是**由人阅读并由你执行**的东西。本技能将"使其好看"转化为一个带检查的程序，使结果通过构造正确而非凭借品味。

**这里的方法是与设计系统无关的。** 程序、形式启发式、六个检查和标记规格中没有任何内容是特定于一个产品的。设计系统提供一小套*参数*（其色阶、分类顺序、发散对、状态调色板、纹理、其表面、其筛选组件）；方法不变地消费它们。一个**经过验证的默认调色板**是参考实例，完整指定在 `references/palette.md` 中。要定位到你的品牌，读取该文件的结构并替换其值 — 不触碰其他任何内容。

> 最重要的单一习惯：**颜色部分是可计算的，所以计算它。**
> 永远不要凭眼力判断调色板是否对色盲安全 — 运行 `scripts/validate_palette.js`。

## 程序 — 按顺序执行

颜色放在最后。大多数糟糕的图表先选颜色。

1. **选择形式。** 数据的工作是什么 — 大小、身份、极性、单个标题、随时间变化？工作决定图表类型，有时答案*不是图表*（统计瓦片或主数字）。→ `references/choosing-a-form.md`
2. **根据颜色所做的工作赋值颜色。** 分类（身份）、顺序（大小）、发散（极性）或状态（状态）— 每个有一条规则。以固定顺序分配分类色调，从不循环。→ `references/color-formula.md`
3. **验证调色板 — 运行脚本，不要推理 ΔE。**
   `node scripts/validate_palette.js "<hex,hex,…>" --mode light`（相对于此技能的基础目录 — 或在图表自己的页面中将其加载为 `<script type="module">`，在那里它读取 `<body>` 上的 `data-palette` 并记录 `console.table` 报告）。它返回关于亮度带、色度下限、相邻对 CVD 分离和对比度的通过/失败。在继续之前修复任何 FAIL。以 `--mode dark` 和该模式的表面重新运行。
4. **应用标记规格和间隔器。** 细标记、锚定到基线的 4px 圆角数据端点、2px 线条、≥8px 标记、填充之间的 2px 表面间隙（堆叠段和相邻条均如此）和重叠标记上的 2px 表面环、选择性直接标签。→ `references/marks-and-anatomy.md`
5. **添加悬停层 — 默认。** HTML/SVG 图表*是*交互式的；在折线/面积上提供十字线+工具提示，在条形/点/格上提供逐标记悬停工具提示。唯一跳过的形式是纯统计瓦片，没有绘图。命中目标比标记更大；筛选器在图表上方的一行中。→ `references/interaction.md`
6. **最终无障碍通行。** 对于 ≥ 2 个系列，图例始终存在，且 ≤ 4 个也直接标记（单个系列不需要图例框 — 标题就是名称），因此身份从来不是仅靠颜色；存在表格视图；暗模式是**选择的** — 从相同色阶的自己步骤，对照暗表面验证，不是自动翻转；纹理可用于 CVD/打印/强制颜色情况。
7. **渲染并查看它。** 验证器检查颜色，不检查布局 — 打开或截图输出并在宣告完成之前查看标签碰撞、几何和溢出。

然后对照 **`references/anti-patterns.md`** 检查结果 — 它是出错事物的目录。如果你的图表匹配一个条目，它就是错误的。

## 不可协商（在每个设计系统中都为真）

- **以固定顺序分配分类色调，从不循环。** 第 9 个系列从来不是生成色调 — 它折叠为"其他"、小倍数或复合编码。
- **一个轴。** 永远不要双轴图表（两个 y 刻度）。不同尺度的两个度量 → 两个图表、小倍数或索引到共同基。*（这是 #1 图表错误 — 见反模式。）*
- **颜色跟随实体，从来不是其排名。** 改变系列数量的筛选器不得重新绘制幸存者。
- **顺序 = 一个色调，浅→深。发散 = 两个色调 + 一个中性灰中点。** 永远不是彩虹；永远不是发散中点上的色调。
- **在发布任何分类调色板之前运行验证器。** CVD ≥ 12 是目标；8–12 是仅在具有第二编码时才合法的下限。对比度警告要求可见标签或表格视图 — 不可忽略。
- **细标记；对于 ≥ 2 个系列始终存在图例（一个无需），具有选择性直接标签（永远不是每个点上都有数字）；退隐的网格/坐标轴。**
- **文本穿戴文本令牌，从来不是系列颜色** — 值、标签和图例保持在主要/次要/柔和墨水中；旁边的彩色标记承载身份。
- **状态颜色被保留**（良好/警告/严重/关键）且从不重新用于"系列 4"；它们附带图标 + 标签，从来不是单独的颜色。

## 插入设计系统

方法是不变的；只有这些参数因系统而异。参考实例 — 每个值都已填写 — 是 `references/palette.md`。

| 参数 | 系统提供什么 |
|---|---|
| **色阶** | 调色板提取的色调标度（命名步骤） |
| **分类主题** | 固定色调顺序（具名主题）；默认 + 替代 |
| **顺序色调** | 用于大小的默认单色调 |
| **发散对** | 两个暖/冷极 + 中性中点 |
| **状态调色板** | 良好 / 警告 / 严重 / 关键 — 步骤与分类不同 |
| **纹理填充** | 一个方向性手绘填充，以 45° / 135° 使用 |
| **表面** | 亮色和暗色图表表面颜色（验证器需要这些） |
| **筛选控件** | 日期范围和维度控件（行为规格在 `interaction.md`） |

要导入新系统：填写这些行，将其色阶提供给验证器，让它将每个槽位对齐到最近的通过步骤。结构和规则保持原样。

## 参考文件

| 文件 | 它回答什么 |
|------|-----------------|
| `references/choosing-a-form.md` | 哪种图表类型 / 它甚至是一个图表吗？ |
| `references/color-formula.md` | 四种工作、六个检查、对齐到通过 |
| `references/marks-and-anatomy.md` | 标记规格、间隔器、标签、图表、主数字 |
| `references/interaction.md` | 工具提示和悬停、筛选器和时间范围 |
| `references/components.md` | 图表由哪些部件组成 — 每个用纯 HTML 构建 |
| `references/anti-patterns.md` | **什么会出错 — 对照此检查每个图表** |
| `references/palette.md` | **参考调色板实例** — 每个参数，已填写；替换为你品牌的 |
| `scripts/validate_palette.js` | 可运行的六项检查验证器（运行它；不要凭眼力） |
