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

🧠 Knowledge Modules (Fractal Skills)

1. 1. Set up d3.js

2. 2. Choose the integration pattern

3. 3. Structure the visualisation code

4. 4. Implement responsive sizing

5. Bar chart

6. Line chart

7. Scatter plot

8. Chord diagram

9. Heatmap

10. Pie chart

11. Force-directed network

12. Tooltips

13. Zoom and pan

14. Click interactions

15. Quantitative scales

16. Ordinal scales

17. Sequential scales

18. Data preparation

19. Performance optimisation

20. Accessibility

21. Styling

22. references/

23. assets/