Agent skill · design visual · davila7
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.
Why this skill is useful
Provides specific techniques and patterns for creating complex, interactive visualisations with d3.js that the AI wouldn't reliably generate on its own.
What it needs
Requires d3 installed locally. About 9k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
D3.js Visualisation Overview This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks. When to use d3.js Use d3.js for: Custom visualisations requiring unique visual encodings or layouts Interactive explorations with complex pan, zoom, or brush behaviours Network/graph visualisations (force-directed layouts, tree diagrams, hierarchies, chord diagrams) Geographic visualisations with custom projections Visualisations requiring smooth, choreographed transitions Publication-quality graphics with fine-grained styling control Novel chart types not available in standard libraries Consider alternatives for: 3D visualisations - use Three.js instead Core workflow 1. Set up d3.js Import d3 at the top of your script: Or use the CDN version (7.x): All modules (scales, axes, shapes, transitions, etc.) are accessible through the d3 namespace. 2. Choose the integration pattern Pattern A: Direct DOM manipulation (recommended for most cases) Use d3 to select DOM elements and manipulate them imperatively. This works in any JavaScript environment: Pattern B: Declarative rendering (for frameworks with templating) Use d3 for data calculations (scales, layouts) but render elements via your framework: Use Pattern A for complex visualisations with transitions, interactions, or when leveraging d3's full capabilities. Use Pattern B for simpler visualisations or when your framework prefers declarative rendering. 3. Structure the visualisation code Follow this standard structure in your drawing function: 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/claude-d3js-skill