创建数据可视化

核心目标

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

按以下顺序工作：

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

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

1. 先确定读者任务

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

为每个主问题写一行：

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

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

2. 先建立真实数据状态

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

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

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

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

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

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

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，不声称统计、视觉或用户理解获外部通过。

需要关系、状态和压力测试细则时读取 领域模式；需要比较工具能力时读取 工具能力档案，只加载当前任务相关章节。