D3 Viz
Skill Verified ActiveCreating 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.
Features
- 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
Use Cases
- 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
Non-Goals
- Creating 3D visualisations (recommend Three.js)
- Providing general-purpose JavaScript utility functions
- Handling backend data processing or API integrations
Installation
npx skills add davila7/claude-code-templatesRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedTrust Signals
Similar Extensions
D3 Viz
90Creating 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.
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Data Visualizer
99Create marketing visualizations from data. Use when: creating charts for reports; visualizing campaign performance; generating dashboards; presenting data insights; exporting charts for presentations
React Modernization
99Upgrade 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.
Data Visualization
97Data 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
Measure Dashboard Requirements
100Specifies 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.