此内容尚未提供您的语言版本,正在以英文显示。

D3 Viz

技能已验证活跃

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.

目的

To empower developers to create sophisticated, custom, and interactive data visualisations using d3.js by providing clear code patterns, best practices, and detailed explanations.

功能

Interactive data visualisation with d3.js
Examples for custom charts, graphs, and diagrams
Guidance on transitions, interactions, and responsiveness
Code patterns for various chart types (bar, line, scatter, network, geo)
Best practices for data preparation, performance, and accessibility

使用场景

Creating bespoke visualisations beyond standard charting libraries
Implementing complex SVG-based data visualisations
Adding fine-grained control over visual elements, transitions, or interactions
Developing visualisations for React, Vue, Svelte, or vanilla JavaScript projects

非目标

Creating 3D visualisations (recommend Three.js)
Providing general-purpose JavaScript utility functions
Handling backend data processing or API integrations

安装

npx skills add davila7/claude-code-templates

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

质量评分

已验证

98 /100

1 day ago 分析

信任信号

最近提交1 day ago

GitHub 所有者 davila7

星标27.2k

下载量 23k

许可证MIT

网站aitmpl.com

状态

查看源代码

类似扩展

D3 Viz

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

技能

chrisvoncsefalvay

Layout Audit

100

Layout and spacing audit covering grid, spacing consistency, density, responsive behavior

技能

Aboudjem

Data Visualizer

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

React Modernization

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

技能

wshobson

Data Visualization

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

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