跳转到主要内容

D3 Viz

技能 过期

使用 d3.js 创建交互式数据可视化。当创建自定义图表、图形、网络图、地理可视化或任何需要对视觉元素、过渡或交互进行细粒度控制的复杂 SVG 数据可视化时,应使用此技能。无论是使用 React、Vue、Svelte、原生 JavaScript 还是任何其他环境,都可用于标准图表库之外的定制化可视化。

目的

旨在使用户能够使用 d3.js 创建复杂的、自定义的、交互式数据可视化,并提供超出标准图表库的细粒度控制。

功能

  • 关于 d3.js 设置和集成模式的指导
  • 各种图表类型(条形图、折线图、散点图、弦图、热力图等)的代码示例
  • 交互功能实现(工具提示、缩放、单击)
  • 响应式尺寸和动画技术
  • 数据准备、性能和可访问性的最佳实践

使用场景

  • 创建超出标准库的定制图表和图形
  • 使用自定义布局开发复杂的 SVG 可视化
  • 实现交互元素,如平移、缩放或刷选行为
  • 构建网络图、地理可视化或编排的过渡

非目标

  • 创建 3D 可视化(建议使用 Three.js)
  • 为简单用例提供预制图表(鼓励定制)
  • 处理 d3.js 可视化创建范围之外的任务

Maintenance

  • warning:Commit recency上次提交是在 8 个多月前(2025 年 10 月),这表明可能已过时,并且如果 d3.js 或相关生态系统发生了重大变化,则存在风险。

Versioning

  • warning:Release Management没有明确的版本信息(如 frontmatter 或 GitHub releases 中的 semver),并且安装说明可能会默认为 `main`,导致难以固定版本。

安装

npx skills add chrisvoncsefalvay/claude-d3js-skill

通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。

质量评分

90 /100
1 day ago 分析

信任信号

最近提交7 months ago
星标174
状态
查看源代码

类似扩展

D3 Viz

98

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

技能
davila7

Data Visualization

97

Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and storytelling with data. Use for: charts, graphs, dashboards, reports, presentations, infographics, data stories. Triggers: data visualization, chart, graph, data chart, bar chart, line chart, scatter plot, data viz, visualization, dashboard chart, infographic data, data presentation, chart design, plot, heatmap, pie chart alternative

技能
inferen-sh

Data Visualizer

99

Create marketing visualizations from data. Use when: creating charts for reports; visualizing campaign performance; generating dashboards; presenting data insights; exporting charts for presentations

技能
guia-matthieu

Measure Dashboard Requirements

100

Specifies requirements for an analytics dashboard including metrics, visualizations, filters, and data sources. Use when requesting dashboards from data teams, defining KPI tracking, or documenting reporting needs.

技能
product-on-purpose

Alterlab Nmc Data Journalist

100

This skill should be used when the user asks about "data journalism", "data visualization", "data storytelling", "FOIA request", "RTI request", "spreadsheet analysis", "chart design", "act as a data journalist", "data journalist mode", "infographic", "open data", "statistical analysis for journalism", "investigative data", "public records", "Datawrapper", "Flourish", "Tableau Public", "D3.js", "chart type selection", or needs expertise in finding, analyzing, and visualizing data for journalistic storytelling. Part of the AlterLab FC Skills collection (New Media & Communication department).

技能
AlterLab-IEU

Deepinit

100

Deep codebase initialization with hierarchical AGENTS.md documentation

技能
Yeachan-Heo