创建数据可视化
核心目标
把数据变成可正确比较、查找、解释或监测的视觉证据。图形先回答问题,再展示字段;成熟工具负责 尺度、mark、交互和渲染,模型负责问题定义、数据语义、视图组合和解释边界。
按以下顺序工作:
读者问题 → 数据语义与状态 → 可复算 view model → 关系与编码
→ 视觉系统与图形引擎 → 代表视图 → 完整状态与终态
当主要价值来自量值关系、统计结构或数据状态时使用本 Skill。真实地理位置、投影或路网运算为主时
转地图;系统组成与流程为主时转技术图;查询、告警、处置、权限或持久工作流为主时,产品 Skill
拥有工作流,本 Skill 只拥有数据视图。浏览器交付与 $build-polished-visual-frontends 组合;它负责
产品视觉语言和 Web 工程,本 Skill 继续拥有数据、分析、编码与图形语义。
1. 先确定读者任务
只选一个主要模式,其他模式作为从属目标:
| 模式 | 用户真正需要完成什么 | 初始状态必须回答 |
|---|---|---|
| 探索 | 提出、比较和排除假设 | 当前范围、覆盖、质量和可比较关系 |
| 解释 | 无需操作也能理解一个有边界的发现 | 结论所对应的 mark、尺度、基准和证据 |
| 监测 | 重复判断状态、变化和是否需要行动 | 当前值、基准、时间窗、新鲜度和异常依据 |
| 出版 | 稳定复现和传播一个版本的证据 | 数据版本、版面、单位、来源和导出合同 |
为每个主问题写一行:
观测单位 / 时间与人群 / 指标和单位 / 比较基准 / 关系
数据状态 / 允许结论 / 禁止推断 / 精确读数入口 / 必要交互
一个主视图只承担一个首要关系。多视图只能形成概览—比较—细查、证据序列或监测共视,不能因为 字段多就平均铺成 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 完成一个非空代表视图,覆盖:
- 打开后必须理解的主要问题;
- 典型密度和最高合理密度;
- 真实零、缺失、低可靠性和极值;
- 最重要的筛选或下钻状态;
- 典型与最窄合同宽度中的自然表达。
专业图形应成为页面主要证据,不要缩成 KPI 卡片墙里的装饰。先看关系是否可见、尺度是否诚实、 标签是否邻近、主要对象是否占据合理空间;这些不成立时,不用更多卡片、渐变、边框和说明文字补救。
代表视图通过后,再扩展其余问题、状态、响应式和导出。响应式可以改变图型、分面和交互,但不能 改变数据、单位、状态语义或允许结论。
6. 数据产品的视觉规则
- 打开页面先看到问题和证据,不是四个 KPI、欢迎语、工具状态或筛选器墙。
- 质量状态优先编码到 mark、空位、线型、直接标签、图例和精确表;不要复制成一排彩色胶囊。
- 一个强调通道只承担一个可复述职责;品牌色不能覆盖量值或风险语义。
- 色条、边线、框、背景色块和注释线必须映射量值、状态、选择、不确定性或真实分组;删除后数据关系 与读者路径不变,就不是编码。不得用图表旁的装饰色条制造“分析感”。
- 次要数据仍需可读,不用大片浅灰小字把上下文抹掉。
- 来源、单位、更新时间和关键限制邻近受影响的 mark 或 claim,保持可读但不争夺主视觉;详细方法 渐进展开,不复制成巨幅或重复告示。
- 工具默认轴、tooltip、字体、图例和控件必须映射到主视觉系统,不能形成第二套灰阶和圆角。
- 只在能改变问题答案或检查路径时增加交互;静态结论不能藏在 hover 后。
- 页面背景可以建立数据故事的开场,但证据视图本身保持可比较;后续图形用编码、排印与状态延续 语言,不重复铺背景或套半透明面板。CSS 不得用渐变、伪元素和边框伪造数据之外的精致图形。
7. 真实交互与导出
筛选、刷选、排序和下钻必须改变共享 view state,并同步图、表、摘要、URL/恢复状态和下载。保留当前 范围、选择数量、清除和返回路径。空态区分无记录、筛选为空、加载失败、尚未到达和数据过期。
导出明确是原始快照、当前明细、当前聚合还是图像,并记录当前筛选和数据版本。Canvas 图形应提供 同上下文的精确值入口或语义表;键盘焦点和 hover 在交互合同中提供等价信息。
8. 完成检查
- 用户进入画面即可看见主要问题、首要关系和下一步;
- 数据状态、计算、图、表、摘要和导出来自同一 view model;
- 图形引擎与产品视觉系统都真实使用,且看起来像一个产品;
- 真实零、缺失、低可靠性、极值、空、错、过期和最密状态均按风险检查;
- 最终像素来自最后一次修改后的真实入口和目标尺寸;
- 没有独立 reviewer 时只标记
SELF_REVIEW_ONLY,不声称统计、视觉或用户理解获外部通过。
需要关系、状态和压力测试细则时读取 领域模式;需要比较工具能力时读取 工具能力档案,只加载当前任务相关章节。