📚 数据可视化 全难度 📦 Anthropic

data-visualization

用 d3.js 创建交互式数据可视化(图表、网络、地理)。

📄 相关文章

📊 评分明细

📦 打包完整度
2 2 / 2.5
🎯 实用性
2 2 / 2.5
📖 文档清晰度
1.6 1.6 / 2
👥 社区影响力
1.2 1.2 / 1.5
🔗 集成度
1.2 1.2 / 1.5

🎯 适用场景

免费设计Anthropic

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 报表的数据分析师、做学术可视化的研究员、需要”非典型图”的运营/产品、做数据故事的内容创作者。

准备工作

  1. Node.js 18+Python 3.10+(Python 走 d3 思维 + 别的渲染库)
  2. d3.js 7.x:前端用 npm install d3,Python 端用 d3blocksplotly
  3. Claude Code / Cursor:支持 Skill 加载的 AI 客户端
  4. 可选: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 即可在浏览器看到交互式图表。

常见踩坑

  1. 数据规模太大导致卡顿:10 万+ 数据点直接渲染会卡死浏览器。要先用 d3 的 data 采样,或者用 Canvas 而非 SVG。
  2. 比例尺选错:横轴是时间用 scaleTime,离散类别用 scaleBand,连续数值用 scaleLinear,选错会导致图变形。
  3. 响应式适配缺失:d3 默认按固定尺寸绘制,窗口 resize 时不会跟随。要监听 window.addEventListener('resize', ...) 重绘。
  4. 动画过渡不合理:把 10000 个元素的过渡时长设成 3000ms,用户看到”卡住 + 慢动作”。要分批过渡或缩短时长。
  5. 颜色不够区分:分类数据用 5 种相近的蓝色,色弱用户分不清。用 d3.schemeCategory10d3.interpolateViridis 色板。
  6. 可访问性缺失:图表没有 alt 文本、没有键盘导航,屏幕阅读器读不出来。要加 <title><desc> 和 ARIA 属性。

初级用法

  1. 柱状图:用 d3.scaleBand 做 X 轴,scaleLinear 做 Y 轴,rect 元素画柱子,最常见的入门图。
  2. 折线图:d3.line 配合 scaleTime 处理时间序列数据,path 元素画线。
  3. 散点图:用 circle 元素 + scaleLinear 双向定位,适合看相关性。

高级玩法

  1. 力导向图(Force-Directed Graph):用 d3.forceSimulation 模拟物理引力,适合画社交网络、依赖关系。
  2. 地图可视化:用 d3.geoPath + TopoJSON 数据,画中国/世界地图,choropleth(色块)或 bubble(气泡)叠加。
  3. 桑基图(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,000Canvas(plotly scattergl)
> 10,000WebGL 或服务端渲染 + 图片

六、与其他 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 极大地提升了图表质量和一致性。


参考资料

📊 评分与标签

评分说明

总分 7.8/10 · S_入选

📊 可观测社区指标(数据核验日期:2026-07-07)

📦 可安装性 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 生态,兼容性相似

评分依据可追溯至公开来源,每项分数均有明确理由和数据支撑。

🏷️ 标签说明

📋 来源与核验记录