claude-d3js-skill

Topics in the source

• D3.js Visualisation
• Overview
• When to use d3.js
• Core workflow
• 1. Set up d3.js
• 2. Choose the integration pattern
• 3. Structure the visualisation code
• 4. Implement responsive sizing

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. 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 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. Pattern A: Direct DOM manipulation (recommended for mos

This is an excerpt. Refer to the complete source and its current requirements.