# Create Data Visualizations

> 为探索、解释、监测与出版任务设计、实现、编辑或诊断可信的数据可视化。用于结构化数据、统计图、交互图、数据故事、分析页面或仪表板中的量化证据；负责数据语义与状态、分析变换、编码与尺度、专业工具选型、图形母版、交互和读者任务验证。

- Skill: `evermind-ai/create-data-visualizations` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add evermind-ai/create-data-visualizations`
- Raw SKILL.md: https://api.skillmd.com/api/skills/evermind-ai/create-data-visualizations/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: EverMind-AI (https://skillmd.com/u/evermind-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/evermind-ai/create-data-visualizations

---


# 创建数据可视化

## 核心目标

把数据变成可正确比较、查找、解释或监测的视觉证据。图形先回答问题，再展示字段；成熟工具负责
尺度、mark、交互和渲染，模型负责问题定义、数据语义、视图组合和解释边界。

按以下顺序工作：

```text
读者问题 → 数据语义与状态 → 可复算 view model → 关系与编码
        → 视觉系统与图形引擎 → 代表视图 → 完整状态与终态
```

当主要价值来自量值关系、统计结构或数据状态时使用本 Skill。真实地理位置、投影或路网运算为主时
转地图；系统组成与流程为主时转技术图；查询、告警、处置、权限或持久工作流为主时，产品 Skill
拥有工作流，本 Skill 只拥有数据视图。浏览器交付与 `$build-polished-visual-frontends` 组合；它负责
产品视觉语言和 Web 工程，本 Skill 继续拥有数据、分析、编码与图形语义。

## 1. 先确定读者任务

只选一个主要模式，其他模式作为从属目标：

| 模式 | 用户真正需要完成什么 | 初始状态必须回答 |
| --- | --- | --- |
| 探索 | 提出、比较和排除假设 | 当前范围、覆盖、质量和可比较关系 |
| 解释 | 无需操作也能理解一个有边界的发现 | 结论所对应的 mark、尺度、基准和证据 |
| 监测 | 重复判断状态、变化和是否需要行动 | 当前值、基准、时间窗、新鲜度和异常依据 |
| 出版 | 稳定复现和传播一个版本的证据 | 数据版本、版面、单位、来源和导出合同 |

为每个主问题写一行：

```text
观测单位 / 时间与人群 / 指标和单位 / 比较基准 / 关系
数据状态 / 允许结论 / 禁止推断 / 精确读数入口 / 必要交互
```

一个主视图只承担一个首要关系。多视图只能形成概览—比较—细查、证据序列或监测共视，不能因为
字段多就平均铺成 dashboard。

## 2. 先建立真实数据状态

冻结数据来源、版本、键、粒度、单位、范围、覆盖和聚合规则。至少区分：

- 真实零；
- 缺失或未上报；
- 不适用；
- 抑制；
- 估计或临时值；
- 低可靠性或低样本；
- 异常值；
- 修订值与过期数据。

这些状态从 source 进入 validated records、derived dataset、view state、view model、图、表、摘要和
导出，不能在渲染阶段临时猜测。缺失不能变成零，低可靠性不能只靠降低透明度，过期数据不能继续
伪装成实时。

标题数字、图形、表格和下载从同一版本化 view model 派生。记录筛选、join、分母、权重、聚合、
舍入、排序、ties 和区间；用代表值独立复算，而不是相信图形看起来合理。

## 3. 分别选择产品视觉系统与数据工具

数据工具负责图形语法、尺度、交互和渲染；成熟设计系统负责页面外壳、控件、表格周边、反馈和
响应式。两者是不同选择，必须通过共享字体、token、密度、图例、选中和焦点形成一种视觉语言。

| 任务与约束 | 优先考察 |
| --- | --- |
| 清晰统计关系、解释图、小倍图和编辑式注释 | Observable Plot |
| 可移植、可校验的声明式 spec 与组合视图 | Vega-Lite；必要时下沉 Vega |
| 产品中的联动分析与中文生态 | AntV G2 |
| 高频监测、常见业务图型和较大 Canvas 数据量 | Apache ECharts |
| 多页交互报告、构建期数据快照和静态部署 | Observable Framework + Plot/其他适合引擎 |
| 精确表格、筛选、排序和虚拟长列表 | TanStack Table / Virtual 或成熟 Data Grid |
| 受治理指标、权限、查询和持续 BI | 组织已有 BI；无真实实例时不要模拟 |
| 高层工具无法表达的专属几何或直接操作 | D3，只实现能力探针确认的最小缺口 |

Observable Framework 是数据报告和 data app 的候选环境，不是所有分析产品的默认 UI。持续业务操作
通常采用成熟产品设计系统加 Plot、G2、ECharts、TanStack 等专业能力；不要让 Framework 的默认主题、
图表库默认配色或组件库示例页直接决定成品。

选型时查看真实样张（环境提供本地 visual catalog 时以其图版为准，可联网时看官方样张），并在当前
环境运行包含最难数据状态和交互的最小示例。比较原生数据模型、
任务覆盖、状态与无障碍、主题能力、框架集成、离线、性能、维护、许可和导出。选中的工具必须原生
拥有对应能力；只导入一个 mark、画一条轴或在 `package.json` 中出现名字，不算使用。

候选比较、包版本、hash、schema 报告和计算证明属于 evidence，不是可见界面。用户界面只显示完成
当前判断所需的更新时间、指标口径、来源与限制，并按需展开细节。

## 4. 先选关系，再选图形

优先从读者需要辨认的关系出发：

- 类别量级或排名：共同基线的点、条或小倍图；
- 相对基准偏离：偏离点、发散条或区间；
- 时间变化：折线、阶梯、区间带或小倍图；
- 分布：原始点、ECDF、直方或箱线/小提琴；
- 估计与不确定性：区间点、误差条、带或分布；
- 多变量关系：散点、hexbin、等高线或分面；
- 部分与整体：堆叠条或 100% 堆叠，前提是分母与闭合成立；
- 流向或转移：流量矩阵、alluvial 或 Sankey，前提是方向与守恒成立。

精确量值优先共同位置和共同基线，其次长度。面积、角度和颜色承担次级关系。条形通常从零开始；
非零 domain、对数、自由尺度、截断、平滑和双轴都必须有任务理由并检查误读。缺失、真实零、估计和
异常必须在图形、摘要和精确值中保持同一语义。

## 5. 先完成决定成败的代表视图

先用真实数据或明确标记的确定性 fixture 完成一个非空代表视图，覆盖：

1. 打开后必须理解的主要问题；
2. 典型密度和最高合理密度；
3. 真实零、缺失、低可靠性和极值；
4. 最重要的筛选或下钻状态；
5. 典型与最窄合同宽度中的自然表达。

专业图形应成为页面主要证据，不要缩成 KPI 卡片墙里的装饰。先看关系是否可见、尺度是否诚实、
标签是否邻近、主要对象是否占据合理空间；这些不成立时，不用更多卡片、渐变、边框和说明文字补救。

代表视图通过后，再扩展其余问题、状态、响应式和导出。响应式可以改变图型、分面和交互，但不能
改变数据、单位、状态语义或允许结论。

## 6. 数据产品的视觉规则

- 打开页面先看到问题和证据，不是四个 KPI、欢迎语、工具状态或筛选器墙。
- 质量状态优先编码到 mark、空位、线型、直接标签、图例和精确表；不要复制成一排彩色胶囊。
- 一个强调通道只承担一个可复述职责；品牌色不能覆盖量值或风险语义。
- 色条、边线、框、背景色块和注释线必须映射量值、状态、选择、不确定性或真实分组；删除后数据关系
  与读者路径不变，就不是编码。不得用图表旁的装饰色条制造“分析感”。
- 次要数据仍需可读，不用大片浅灰小字把上下文抹掉。
- 来源、单位、更新时间和关键限制邻近受影响的 mark 或 claim，保持可读但不争夺主视觉；详细方法
  渐进展开，不复制成巨幅或重复告示。
- 工具默认轴、tooltip、字体、图例和控件必须映射到主视觉系统，不能形成第二套灰阶和圆角。
- 只在能改变问题答案或检查路径时增加交互；静态结论不能藏在 hover 后。
- 页面背景可以建立数据故事的开场，但证据视图本身保持可比较；后续图形用编码、排印与状态延续
  语言，不重复铺背景或套半透明面板。CSS 不得用渐变、伪元素和边框伪造数据之外的精致图形。

## 7. 真实交互与导出

筛选、刷选、排序和下钻必须改变共享 view state，并同步图、表、摘要、URL/恢复状态和下载。保留当前
范围、选择数量、清除和返回路径。空态区分无记录、筛选为空、加载失败、尚未到达和数据过期。

导出明确是原始快照、当前明细、当前聚合还是图像，并记录当前筛选和数据版本。Canvas 图形应提供
同上下文的精确值入口或语义表；键盘焦点和 hover 在交互合同中提供等价信息。

## 8. 完成检查

- 用户进入画面即可看见主要问题、首要关系和下一步；
- 数据状态、计算、图、表、摘要和导出来自同一 view model；
- 图形引擎与产品视觉系统都真实使用，且看起来像一个产品；
- 真实零、缺失、低可靠性、极值、空、错、过期和最密状态均按风险检查；
- 最终像素来自最后一次修改后的真实入口和目标尺寸；
- 没有独立 reviewer 时只标记 `SELF_REVIEW_ONLY`，不声称统计、视觉或用户理解获外部通过。

需要关系、状态和压力测试细则时读取 [领域模式](references/patterns.md)；需要比较工具能力时读取
[工具能力档案](references/tool-profiles.md)，只加载当前任务相关章节。