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)，只加载当前任务相关章节。