dataviz

数据可视化

图表是供人阅读、由你执行的。这项技能将“让它看起来不错”转化为一套带检查项的流程，让结果从设计之初就正确，而不是靠审美碰运气。

这里的方法与设计系统无关。 流程、形式启发式、六项检查或标记规范中，没有任何内容专属于某个产品。设计系统只需提供一小组参数（色阶、分类顺序、发散色对、状态调色板、纹理、表面、筛选组件）；此方法会原样使用这些参数。references/palette.md 中完整定义了一个经过验证的默认调色板，可作为参考实例。若要适配你的品牌，请阅读该文件的结构并替换其中的值——其他内容一律不要改动。

最重要的习惯：颜色部分可以计算，所以就计算。 不要凭目测判断调色板是否适合色盲人士——运行 scripts/validate_palette.js。

操作流程 - 按顺序执行

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

1. 选择形式。 数据的作用是什么——表示量级、身份、极性、单一关键指标，还是随时间变化？数据的作用决定图表类型，有时答案也可能是不使用图表（统计卡片或醒目数字）。-> references/choosing-a-form.md
2. 根据用途分配颜色。 分类（身份）、顺序（量级）、发散（极性）或状态（状态）——每种都有一条规则。按固定顺序分配分类色相，绝不循环使用。-> references/color-formula.md
3. 验证调色板 - 运行脚本，不要靠推断来判断 Delta E。 node scripts/validate_palette.js "<hex,hex,...>" --mode light（相对于此技能的基础目录；或者在图表自身页面中将其作为 <script type="module"> 加载，脚本会从 <body> 读取 data-palette，并记录 console.table 报告）。脚本会检查亮度范围、色度下限、相邻颜色对的 CVD 区分度、正常视觉下限以及对比度，并返回通过或失败。继续之前，先修复所有失败项。使用该模式的表面重新运行 --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 轴刻度）。两个量级不同的度量值 → 使用两张图表、小倍图，或统一索引到一个基准。（这是图表中最常见的错误——参见反模式。）
• 颜色跟随实体，绝不跟随排名。 更改系列数量的筛选器不得改变其余系列的颜色。
• 顺序色阶 = 单一色相，由浅到深。发散色阶 = 两种色相 + 中性灰色中点。 绝不使用彩虹色；发散色阶的中点绝不使用色相。
• 发布任何分类调色板前，都要运行验证器。 CVD Delta E >= 8 是目标值（OKLab x100）；6-8 是底线，且仅在采用次级编码时才允许。正常视觉的底线低于 15 则直接判定为 FAIL——全彩读者无法区分这对颜色；请在相邻配色对列表中重新调整步长（次级编码不能成为例外）；使用 --pairs all 时，应减少系列数量或改用分面布局，参见检查 4。对比度 WARN 意味着必须显示可见标签或表格视图——不得忽略。
• 标记要纤细；系列数 >= 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	可运行的六项检查验证器（运行它，不要凭目测判断）