评分明细
适用场景
data-visualization 快速入门
用 d3.js 写出”会讲故事的数据图”,让 PPT 里那张密密麻麻的 Excel 截图变成历史。
这是什么?解决什么问题?
数据可视化听起来高大上,实操中常遇到三类痛点:一是 Excel/PPT 图表丑且难定制;二是 ECharts/Chart.js 这类库能做标准图,但要做”非典型布局”(如桑基图、力导向网络、地图)就吃力;三是要做”能讲故事”的图(多视图联动、点击下钻),得自己写一堆交互逻辑。
data-visualization 是 Anthropic 官方 skills 仓库里的可视化 Skill,核心是 d3.js。d3 是可视化领域的”底层核武器”,它不直接画图,而是给你”数据 → 像素”的全部控制权。Skill 内部封装了 d3 的常见使用模式:比例尺(d3.scale)、坐标轴(d3.axis)、选择器(d3.select)、过渡动画(d3.transition)、地理投影(d3.geo)。
加载 Skill 后,AI 可以根据你的数据(JSON/CSV)和想要的图表类型(柱状/折线/力导向/地图/桑基),直接输出 d3.js 代码,渲染到浏览器或导出 SVG/PNG。
适合:做 BI 报表的数据分析师、做学术可视化的研究员、需要”非典型图”的运营/产品、做数据故事的内容创作者。
准备工作
- Node.js 18+ 或 Python 3.10+(Python 走
d3思维 + 别的渲染库) - d3.js 7.x:前端用
npm install d3,Python 端用d3blocks或plotly - Claude Code / Cursor:支持 Skill 加载的 AI 客户端
- 可选:
vite本地开发服务器预览
3 步快速上手
第 1 步:安装 Skill
npx skills add anthropics/skills --skill data-visualization
仓库:https://github.com/JackyST0/awesome-agent-skills(Anthropic 官方:https://github.com/anthropics/skills)
第 2 步:验证 Skill
向 AI 询问:
用 data-visualization Skill,解释 d3 的 enter/update/exit 模式
如果 AI 提到了 d3 的核心数据绑定概念,说明 Skill 加载成功。
第 3 步:生成第一张图
用 data-visualization Skill,基于这份 CSV(季度营收)
生成一张带过渡动画的折线图,鼠标悬停时显示数值
AI 会输出完整 HTML + JavaScript,跑 npx serve 即可在浏览器看到交互式图表。
常见踩坑
- 数据规模太大导致卡顿:10 万+ 数据点直接渲染会卡死浏览器。要先用 d3 的
data采样,或者用 Canvas 而非 SVG。 - 比例尺选错:横轴是时间用
scaleTime,离散类别用scaleBand,连续数值用scaleLinear,选错会导致图变形。 - 响应式适配缺失:d3 默认按固定尺寸绘制,窗口 resize 时不会跟随。要监听
window.addEventListener('resize', ...)重绘。 - 动画过渡不合理:把 10000 个元素的过渡时长设成 3000ms,用户看到”卡住 + 慢动作”。要分批过渡或缩短时长。
- 颜色不够区分:分类数据用 5 种相近的蓝色,色弱用户分不清。用
d3.schemeCategory10或d3.interpolateViridis色板。 - 可访问性缺失:图表没有 alt 文本、没有键盘导航,屏幕阅读器读不出来。要加
<title>、<desc>和 ARIA 属性。
初级用法
- 柱状图:用
d3.scaleBand做 X 轴,scaleLinear做 Y 轴,rect元素画柱子,最常见的入门图。 - 折线图:
d3.line配合scaleTime处理时间序列数据,path元素画线。 - 散点图:用
circle元素 +scaleLinear双向定位,适合看相关性。
高级玩法
- 力导向图(Force-Directed Graph):用
d3.forceSimulation模拟物理引力,适合画社交网络、依赖关系。 - 地图可视化:用
d3.geoPath+ TopoJSON 数据,画中国/世界地图,choropleth(色块)或 bubble(气泡)叠加。 - 桑基图(Sankey):展示”流量”从源到汇的路径,适合做用户行为漏斗、能量流向分析。
小技巧
- 用
d3.range()快速生成测试数据(如d3.range(50).map(d => ({ x: d, y: Math.random() }))),调试代码方便。 - 颜色色板用
d3.schemeTableau10,这是 Tableau 的 10 色方案,区分度好且对色盲友好。 - 调试时用
console.log(d3.select('#chart').data())看数据是否正确绑定。 - 性能优化:用
d3.selectAll().data(data, d => d.id)配合 key function,避免重复创建 DOM。 - 导出 SVG 时用
d3.select('svg').node().outerHTML,保存为.svg文件,印刷无损。 - 配合
Observable Plot(https://observablehq.com/plot/)可以用更简洁的语法做 d3 同款图,适合快速出图。
data-visualization Skill 多维度简评
类别:开发工具 来源:anthropics/knowledge-work-plugins 定位:基于 Python(matplotlib/seaborn/plotly)的数据可视化 Skill,涵盖图表选择指南、代码模式、色彩理论和可访问性设计原则。
免责声明:本文基于官方文档和公开资料整理,未经过 MagicNetWorld 实测。
一、核心定位与价值
data-visualization 是 Anthropic 官方知识工作插件集合中的可视化 Skill,旨在帮助 AI Agent 创建专业级的数据图表。
核心价值:提供完整的图表选择决策框架(13 种以上图表类型)、Python 代码模板(matplotlib/seaborn/plotly)、以及基于 Cleveland & McGill 感知层次的设计原则——确保 AI Agent 生成的每个图表都遵循”可视化即沟通”的核心理念。
Anthropic 的 knowledge-work-plugins 仓库(19,987 Stars)包含一系列面向知识工作场景的官方 Skill,data-visualization 是其中最常用的 Skill 之一。其设计哲学基于 Edward Tufte 和 Cleveland & McGill 的可视化理论,强调”每个视觉元素都必须服务于理解”。
二、核心能力清单
| 能力 | 实现方式 | 适用场景 |
|---|---|---|
| 图表选择指南 | 13+ 图表类型选择表格及反模式警告 | 数据集→图表类型匹配 |
| Python 代码模板 | matplotlib/seaborn/plotly 即用示例 | 折线图、柱状图、热力图、散点图等 |
| 色彩理论 | Sequential/Diverging/Qualitative 色板指导 | 数据语义与视觉映射 |
| 可访问性设计 | 色盲友好配色、非颜色编码备份 | 无障碍数据可视化 |
| 渲染方案选择 | SVG(< 1k 元素)/Canvas(1k-10k)/WebGL(> 10k) | 性能与保真度平衡 |
三、可视化设计原则
3.1 Cleveland & McGill 感知层次(1984)
可视化编码方式按人类感知精度从高到低排列:
| 排名 | 编码方式 | 适用图表 |
|---|---|---|
| 1 | 公共标尺上的位置 | 柱状图、折线图 |
| 2 | 非对齐标尺上的位置 | 多面板散点图 |
| 3 | 长度 | 柱状图 |
| 4 | 角度/斜率 | 饼图、雷达图 |
| 5 | 面积 | 气泡图 |
| 6 | 体积 | 3D 柱状图 |
| 7 | 颜色饱和度/色相 | 热力图 |
核心推论:柱状图(位置) > 饼图(角度) > 气泡图(面积)。当需要精确比较数值时,优先选择柱状图而非饼图。
3.2 图表选择指南
SKILL.md 内置了完整的图表选择决策表:
| 数据关系 | 推荐图表 | 避免使用 |
|---|---|---|
| 时间趋势 | 折线图 | 柱状图(当有连续多时间点时) |
| 类别比较 | 水平柱状图 | 饼图(类别 > 5 个) |
| 分布 | 直方图/箱线图 | 柱状图(非聚合数据) |
| 相关性 | 散点图 | 双 y 轴图(易误导) |
| 层级/部分-整体 | 堆叠柱状图/树图 | 饼图(多个) |
| 地理空间 | 等值区域图 | 气泡地图(非比例) |
关键反模式:
- 饼图仅用于 2-5 个类别且总和为 100%
- 3D 图表在任何情况下都不推荐(扭曲比例)
- 双 y 轴图仅在明确标注并注明可能存在误导性时使用
3.3 色彩理论
- Sequential 色板:表示从低到高的数值(浅→深单色)
- Diverging 色板:表示偏离中点的数值(两色从中间发散)
- Qualitative 色板:表示不同类别(离散颜色)
- 8% 的男性有色盲:永远不要仅依赖颜色编码,使用形状、图案或标签作为备份编码
四、Python 代码模式
4.1 Matplotlib(出版物级别)
import matplotlib.pyplot as plt
fig, ax = plt.subplots(figsize=(10, 6))
bars = ax.bar(categories, values, color='#2196F3', edgecolor='white')
ax.bar_label(bars, fmt='%.1f', padding=3)
ax.set_title('Monthly Revenue', fontsize=14, fontweight='bold')
ax.spines['top'].set_visible(False)
ax.spines['right'].set_visible(False)
plt.tight_layout()
plt.savefig('chart.png', dpi=150, bbox_inches='tight')
4.2 Plotly(交互式)
import plotly.express as px
fig = px.line(df, x='date', y='value', color='category',
title='Interactive Time Series',
template='plotly_white')
fig.update_layout(hovermode='x unified')
fig.show()
4.3 Seaborn(统计图表)
import seaborn as sns
sns.set_theme(style='whitegrid')
g = sns.FacetGrid(df, col='region', col_wrap=3, height=3)
g.map(sns.scatterplot, 'x', 'y')
五、渲染性能建议
| 数据量 | 推荐渲染方案 |
|---|---|
| < 1,000 数据点 | SVG(matplotlib/plotly 默认) |
| 1,000-10,000 | Canvas(plotly scattergl) |
| > 10,000 | WebGL 或服务端渲染 + 图片 |
六、与其他 Anthropic 官方 Skill 的协同
data-visualization 在 Anthropic 的 Skills 生态中与以下 Skill 形成数据工作流:
- deep-research:深度调研 → data-visualization 将调研数据可视化
- xlsx/docx:从 Excel 读取数据 → data-visualization 生成图表 → 嵌入文档
- pdf:生成包含图表的专业 PDF 报告
七、安装与使用
# 通过 skills CLI 安装
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill data-visualization
# 或手动安装
git clone https://github.com/anthropics/knowledge-work-plugins
八、总结
核心价值:
- Anthropic 官方出品(19,987 Stars),遵循 Agent Skills 标准
- 基于 Cleveland & McGill 感知层次和 Tufte 设计理论的图表选择框架
- Python 三件套(matplotlib/seaborn/plotly)的即用代码模板
- 内置可访问性设计指南(色盲友好、非颜色编码备份)
适用人群:
- 数据分析师 / 数据科学家 / 需要做数据报告的技术人员
推荐程度:⭐⭐⭐⭐⭐ —— 强烈推荐。对于需要频繁生成数据图表的场景,该 Skill 极大地提升了图表质量和一致性。
参考资料
- anthropics/knowledge-work-plugins GitHub 仓库 — 官方仓库(20K Stars)
- data-visualization SKILL.md 内容(SkillsMP) — Skill 文件内容
- data-visualization Agent Skills Library 页面 — 完整能力说明
- Claude Code Skills 系统文档 — 什么是 Skills?
- Agent Skills 开放标准 — 技能规范
📊 评分与标签
评分说明
总分 7.8/10 · S_入选
📊 可观测社区指标(数据核验日期:2026-07-07)
- GitHub: anthropics/knowledge-work-plugins ★22.4k, 🔱2.6k
- 收录索引: JackyST0/awesome-agent-skills(索引仓库)
📦 可安装性 2.0/2.5
- 安装方式: 通过
npx skills add anthropics/knowledge-work-plugins --skill data-visualization一键安装,或手动克隆仓库 - 依赖复杂度: 纯 Markdown + YAML 格式,零外部运行时依赖。但实际使用需配合 Python(matplotlib/seaborn/plotly)或 JavaScript(d3.js)运行时
- 对比 anthropic-pdf: 同为 Anthropic 官方 Skill,安装方式完全一致
- 对比 anthropic-frontend-design: 安装方式一致,但无需额外运行时
🎯 实用性 2.0/2.5
- 核心功能覆盖: 提供 13+ 图表类型选择指南、Python(matplotlib/seaborn/plotly)代码模板、基于 Cleveland & McGill 感知层次的设计原则、色盲友好配色方案、SVG/Canvas/WebGL 渲染方案选择
- 解决实际问题的能力: 帮助 AI 生成的图表从「默认审美」升级为「专业级可视化」,涵盖图表类型匹配、色彩理论、可访问性设计。但仅在 Anthropic 知识工作插件生态中可用,d3.js 学习曲线较陡
- 来源:同上
- 对比 Observable Plot: 语法更简洁但功能范围较窄
- 对比 ECharts Skill: 图表类型丰富但灵活性不如 d3
📖 文档质量 1.6/2.0
- README 完整度: SKILL.md 包含完整的图表选择决策表、Python 代码示例、色彩理论和可访问性指南,268 次 Commits 持续迭代
- 示例代码: 提供 matplotlib/seaborn/plotly 三大库的即用代码模板,但缺少 JavaScript/d3.js 侧的对应示例
- 来源:同上
- 对比 anthropic-pdf: 文档详尽程度相似,但 pdf 含更多实战代码
- 对比 anthropic-frontend-design: 文档结构更清晰,含视觉效果对比
👥 社区活跃 1.0/1.5
- 父仓库 ★22.4k, 🔱2.6k, 268 Commits,Anthropic 官方维护,最近更新为 13 小时前
- 60 Issues, 10 PRs,社区参与度中等
- 来源:同上
- 对比 anthropics/skills(★159k): 社区规模和活跃度更大
- 对比 obra/superpowers(★248k): 同样是顶级 Agent Skills 仓库
🔗 兼容性 1.2/1.5
- 兼容 Claude Code、Cursor、OpenCode、Windsurf 等支持 Agent Skills 标准的工具
- 零外部网络依赖(除显式声明),Apache-2.0 许可
- 对比 anthropic-pdf: 兼容性范围一致
- 对比 create-react-component: 同为 Anthropic 生态,兼容性相似
评分依据可追溯至公开来源,每项分数均有明确理由和数据支撑。
🏷️ 标签说明
- 免费: 核心功能完全免费,无强制付费墙。来源:anthropics/knowledge-work-plugins
- 设计: 面向 UI/平面/产品设计场景的 AI 工具。来源:data-visualization SKILL.md
- Anthropic: Anthropic 官方产品或 Claude 生态核心工具。来源:同上
📋 来源与核验记录
- ✅ 已核验: anthropics/knowledge-work-plugins(★22.4k, 🔱2.6k)
- ✅ 已核验: anthropics/skills(★159k, 🔱18.8k)
- ✅ 已核验: obra/superpowers(★248k, 🔱22k)
- ✅ 已核验: affaan-m/ECC(★227k, 🔱34.7k)
- ⚠️ 未验证: JackyST0/awesome-agent-skills(页面被 GitHub bot 检测拦截)