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.
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Claude Sonnet 4.5
$0.20/task
Best for coding tasks
Environment setup included
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)
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:
function drawChart(data) { if (!data || data.length === 0) return; const svg = d3.select('#chart'); // Select by ID, class, or DOM element // Clear previous content svg.selectAll("*").
Pattern B: Declarative rendering (for frameworks with templating)
Use d3 for data calculations (scales, layouts) but render elements via your framework:
function getChartElements(data) { const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([0, 400]); return data.map((d
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:
function drawVisualization(data) { if (!data || data.length === 0) return; const svg =
4. Implement responsive sizing
Make visualisations responsive to container size:
function setupResponsiveChart(containerId, data) { const container = document.getElementById(containerId); const svg = d3.select(`#${containerId}`).append('svg'); function
Or use ResizeObserver for more direct container monitoring:
Always validate and prepare data before visualisation:
// Filter invalid valuesconst cleanData = data.filter(d => d.value != null && !isNaN(d.value));// Sort data if order mattersconst sortedData = [...data].sort((a, b) => b.value - a.value);// Parse dates
Performance optimisation
For large datasets (>1000 elements):
// Use canvas instead of SVG for many elements// Use quadtree for collision detection// Simplify paths with d3.line().curve(d3.curveStep)// Implement virtual scrolling for large lists// Use requestAnimationFrame for custom animations
Accessibility
Make visualisations accessible:
// Add ARIA labelssvg.attr("role", "img") .attr("aria-label", "Bar chart showing quarterly revenue");// Add title and descriptionsvg.append("title").text("Quarterly Revenue 2024");svg.append("desc").text("Bar chart showing revenue growth across four quarters"
Ensure scales have valid domains (check for NaN values)
Verify axis is appended to correct group
Check transform translations are correct
Issue: Transitions not working
Call .transition() before attribute changes
Ensure elements have unique keys for proper data binding
Check that useEffect dependencies include all changing data
Issue: Responsive sizing not working
Use ResizeObserver or window resize listener
Update dimensions in state to trigger re-render
Ensure SVG has width/height attributes or viewBox
Issue: Performance problems
Limit number of DOM elements (consider canvas for >1000 items)
Debounce resize handlers
Use .join() instead of separate enter/update/exit selections
Avoid unnecessary re-renders by checking dependencies
Resources
references/
Contains detailed reference materials:
d3-patterns.md - Comprehensive collection of visualisation patterns and code examples
scale-reference.md - Complete guide to d3 scales with examples
colour-schemes.md - D3 colour schemes and palette recommendations
assets/
Contains boilerplate templates:
chart-template.js - Starter template for basic chart
interactive-template.js - Template with tooltips, zoom, and interactions
sample-data.json - Example datasets for testing
These templates work with vanilla JavaScript, React, Vue, Svelte, or any other JavaScript environment. Adapt them as needed for your specific framework.
To use these resources, read the relevant files when detailed guidance is needed for specific visualisation types or patterns.