Frontend Dataviz

Data Visualization Skill（SWD 原则）

核心理念

遵循 Cole Nussbaumer Knaflic 的 Storytelling with Data 六大原则：

1. 理解背景 — 谁是受众？他们需要做什么决策？
2. 选择合适图表 — 见下方图表选择矩阵
3. 消除杂乱 — 删除所有不传递信息的元素（网格线、3D 效果、不必要的边框）
4. 引导注意力 — 用颜色/粗细/位置突出关键信息，其余降至背景色
5. 像设计师一样思考 — 对齐、留白、层次
6. 讲述故事 — 图表标题应是洞察，而非描述（"Q3 销售额下降 18%" 而非 "Q3 销售额"）

---

Step 1：数据分析

拿到数据后，先判断图表类型：

| 目的 | 推荐图表 | |------|---------| | 比较类别 | 条形图（横向更易读标签）| | 展示趋势 | 折线图 | | 展示构成 | 堆叠条形 / 瀑布图 | | 展示相关性 | 散点图 | | 展示分布 | 直方图 / 箱线图 | | 部分与整体 | 仅当类别 ≤5 时用饼图，否则用条形 |

---

Step 2：用 askuserinput_v0 工具向用户提问

必须在生成任何图表前，使用 ask_user_input_v0 工具一次性提出以下两个问题。

ask_user_input_v0({
  questions: [
    {
      question: "颜色风格？",
      type: "single_select",
      options: [
        "专业商务（极简灰+强调色）",
        "社交媒体（鲜艳多彩，高饱和）"
      ]
    },
    {
      question: "是否使用拟物图表（pictograph）？",
      type: "single_select",
      options: [
        "普通图表",
        "拟物图表（用实物图标代替条形）"
      ]
    }
  ]
})

---

Step 3：生成图表（HTML + Chart.js）

输出统一使用 HTML Artifact，内嵌 Chart.js（从 cdnjs 加载）。

颜色风格映射：

• 专业商务 → 灰色基调 + #2563EB 单强调色，其余数据点全灰 #D1D5DB
• 社交媒体 → 高饱和多色方案，见 references/color-palettes.md

拟物图表： 用户选择后，使用 SVG Pattern + Chart.js canvas 实现，见 references/pictograph-icons.md

SWD 视觉规范（必须遵守）：

网格线：极浅灰 #F3F4F6 或隐藏
边框：chart border 设为 none
图例：仅必要时显示，放在图表上方（自定义 HTML，不用 Chart.js 默认）
标题字体：加粗，16-18px；标签：12-13px #6B7280
柱间距：categoryPercentage: 0.6, barPercentage: 0.75

图表标题规范：

• ✅ 洞察型："华东区 Q3 营收同比下降 18%，拖累全国整体表现"
• ❌ 描述型："各区域 Q3 营收对比"

完整代码示例见 references/chart-examples.md

---

Step 4：输出检查清单

• [ ] 已通过 askuserinput_v0 收集用户偏好？
• [ ] 标题是洞察而非描述？
• [ ] 颜色方案与用户选择匹配？
• [ ] 关键数据点已高亮？
• [ ] 删除了所有装饰性杂乱元素？
• [ ] 有数据来源/时间范围注释？

---

参考文件

• references/color-palettes.md — 配色方案
• references/pictograph-icons.md — 拟物图表 SVG 图标库
• references/chart-examples.md — HTML + Chart.js 完整示例

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: endearqb
• Source: endearqb/endearqb-skills
• License: MIT

Install and usage instructions live in the source repository linked above.