dataviz 是一项面向数据可视化创建的方法型技能，适用于制作图表、图形、统计磁贴或分析仪表板。其核心思路是把“让图表好看”转变为一套有检查点的流程，使结果在设计上正确，而不依赖个人品味。资料说明该方法与具体设计系统无关：流程、形式启发式、六项检查和标记规范都不绑定单一产品。设计系统只需提供少量参数，包括色阶、分类色序、发散色对、状态色板、纹理、表面色和筛选组件，方法会原样使用这些参数。资料中提供了一个经过验证的默认调色板实例，完整定义在 references/palette.md；若要适配自有品牌，应读取该文件结构并替换其中的值，其他部分保持不变。
使用流程按顺序执行，且颜色放在最后处理，因为多数糟糕的图表会先选颜色。第一步是选择图形形式：先明确数据要表达的任务，例如量级、身份、极性、单一核心数字或随时间变化；任务决定图表类型，有时答案并非图表，而是一个统计磁贴或核心数字。第二步是按用途分配颜色：分类色用于身份，顺序色用于量级，发散色用于极性，状态色用于状态，每种都有对应规则；分类色按固定顺序分配，不得循环使用。第三步是校验调色板：资料明确要求运行脚本，而不是靠推理判断色差，命令为 node scripts/validate_palette.js "<hex,hex,…>" --mode light，相对于该技能的基础目录执行，也可以作为 <script type="module"> 加载到图表页面中，脚本会从 <body> 读取 data-palette 并在控制台输出表格报告；校验返回明度带、彩度下限、相邻色对色盲分离度、正常视觉下限和对比度的通过或失败结果，任何失败项都必须在继续前修复，并针对深色模式以对应表面色重新运行 --mode dark。第四步应用标记规范与间隔：细标记、数据端 4px 圆角并锚定基线、2px 线条、≥8px 标记点、填充之间保留 2px 表面间隙（堆叠段和相邻条形均适用）、重叠标记加 2px 表面环、选择性直接标注。第五步默认加入悬停层：HTML/SVG 图表是交互式的，折线图和面积图应提供十字准线加工具提示，条形图、点图和单元格图应提供逐标记悬停工具提示；唯一例外是没有绘图区的纯统计磁贴。命中目标应大于标记本身，筛选器放在图表上方一行。第六步做最终无障碍检查：两个及以上系列始终提供图例，四个及以下系列同时直接标注（单系列不需要图例框，标题即可命名），确保身份不只靠颜色区分；提供表格视图；深色模式应使用同一色阶中独立选取的步进值，并针对深色表面校验，而不是自动反转；在色盲、打印或强制颜色场景下提供纹理。最后渲染并目视检查输出，校验器只检查颜色不检查布局，需查看标签碰撞、几何形状和溢出问题，并对照 references/anti-patterns.md 检查结果，若匹配其中条目则说明图表有误。
资料还列出若干不可妥协的规则：分类色按固定顺序分配，不得循环，第九个系列不应生成新色相，而应归入“其他”、小多图或复合编码；只使用一个坐标轴，禁止双轴图，两个不同量级的度量应拆成两张图、小多图或索引到共同基准；颜色跟随实体而非排名，筛选改变系列数量时不得重绘幸存系列；顺序色为单一色相由浅到深，发散色为两个色相加中性灰中点，禁止彩虹色，也禁止在发散中点使用色相；发布任何分类调色板前必须运行校验器，色盲 ΔE ≥ 8 为目标，6–8 是仅在配合二级编码时才合法的下限，正常视觉下限低于 15 为硬失败，必须在相邻色对列表上重新取步，二级编码不能豁免此项，在 --pairs 模式下应切除系列或分面；对比度警告必须配合可见标签或表格视图，不可忽略；标记要细，两个及以上系列始终提供图例（单系列不提供），选择性直接标注，绝不在每个点上标数字，网格和坐标轴应弱化；文本使用文本色令牌而非系列颜色，数值、标签和图例保持主/次/弱文本色，旁边的彩色标记负责身份；状态色为保留色（good/warning/serious/critical），不得复用于“系列 4”，并且始终配合图标和标签，不能只靠颜色。
资料还说明接入新设计系统时需要填写的参数行：色阶（调色板取用的命名步进）、分类主题（固定色相顺序及默认与备选）、顺序色相（量级默认单色相）、发散色对（两个冷/暖极点加中性中点）、状态色板（good/warning/serious/critical，步进需与分类色区分）、纹理填充（一种方向性手绘填充，以 45°/135° 使用）、表面色（浅色与深色图表表面色，校验器需要）、筛选控件（日期范围和维度控件，行为规范在 interaction.md）。接入新系统时，填写这些行，将色阶输入校验器，让每个槽位对齐到最近的通过步进，结构与规则保持不变。资料列出的参考文件包括：choosing-a-form.md 回答选择哪种图表类型甚至是否使用图表；color-formula.md 说明四种用途、六项检查和对齐通过步进；marks-and-anatomy.md 说明标记规范、间隔、标签、图形和核心数字；interaction.md 说明工具提示与悬停、筛选与时间范围；components.md 说明图表由哪些部件组成以及如何用纯 HTML 构建；anti-patterns.md 列出常见错误，供每张图表对照检查；palette.md 是参考调色板实例，所有参数已填写，可替换为品牌参数；scripts/validate_palette.js 是可运行的六项检查校验器，要求运行而非目测。资料未提供收费、平台支持范围或具体性能指标等信息。