D3

Use this skill when work touches D3.js (d3 or modular d3-*) — data prep, scales, shapes, selections/joins, axes, transitions, brush/drag/zoom, force, hierarchy, geo, delaunay, or framework interop.

Treat d3@7.9.x as the current umbrella line (getting started, API index). Prefer official d3js.org module pages and npm-resolved majors over memory. D3 is a toolbox of ~30 modules, not a chart library — compose encodings yourself (or choose a higher-level chart stack when bespoke D3 is unnecessary).

Workflow

1. Confirm the local surface before changing code:
   • Umbrella d3 version vs modular d3-* installs; TypeScript via @types/d3 / @types/d3-* (DefinitelyTyped).
   • Whether the task needs DOM modules (selection, transition, axis-via-call, brush, drag, zoom) or pure math (array, scale, shape, interpolate, format, …).
   • Rendering target: SVG, Canvas (generator.context), or declarative JSX path/cx/cy attributes.
2. Refresh package evidence and docs URLs from source-map.md.
3. For install strategy, data prep, scales, chromatic schemes, color, and interpolate, use setup-data-scales.md.
4. For line/area/arc/pie/stack/symbol/link, path, polygon, axis, contour/density, and quadtree, use shapes-geometry.md.
5. For hierarchy, force, chord, geo, and delaunay/voronoi, use layouts-geo.md.
6. For selection/join, brush, drag, zoom, and dispatch — including React/Svelte DOM conflict rules — use selection-interaction.md.
7. For transitions/ease/timer, framework guidance, production/SSR/canvas, v6→v7 notes, and AI traps, use animation-frameworks.md.