AI agent skill · by @Dokhacgiakhoa

Agent D3js Skill

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.

Archived 2026-10-23 · Source updated 2026-06-11. Check the original repository for the latest version.

SKILL.md instructions

# 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](./sub-skills/1-set-up-d3js.md)
### 2. [2. Choose the integration pattern](./sub-skills/2-choose-the-integration-pattern.md)
### 3. [3. Structure the visualisation code](./sub-skills/3-structure-the-visualisation-code.md)
### 4. [4. Implement responsive sizing](./sub-skills/4-implement-responsive-sizing.md)
### 5. [Bar chart](./sub-skills/bar-chart.md)
### 6. [Line chart](./sub-skills/line-chart.md)
### 7. [Scatter plot](./sub-skills/scatter-plot.md)
### 8. [Chord diagram](./sub-skills/chord-diagram.md)
### 9. [Heatmap](./sub-skills/heatmap.md)
### 10. [Pie chart](./sub-skills/pie-chart.md)
### 11. [Force-directed network](./sub-skills/force-directed-network.md)
### 12. [Tooltips](./sub-skills/tooltips.md)
### 13. [Zoom and pan](./sub-skills/zoom-and-pan.md)
### 14. [Click interactions](./sub-skills/click-interactions.md)
### 15. [Quantitative scales](./sub-skills/quantitative-scales.md)
### 16. [Ordinal scales](./sub-skills/ordinal-scales.md)
### 17. [Sequential scales](./sub-skills/sequential-scales.md)
### 18. [Data preparation](./sub-skills/data-preparation.md)
### 19. [Performance optimisation](./sub-skills/performance-optimisation.md)
### 20. [Accessibility](./sub-skills/accessibility.md)
### 21. [Styling](./sub-skills/styling.md)
### 22. [references/](./sub-skills/references.md)
### 23. [assets/](./sub-skills/assets.md)