D3.js Data Visualization Patterns

Quick Guide: D3 v7 is fully modular ES modules. Use selection.join() for the data join (replaces manual enter/update/exit). Prefer modular imports (d3-selection, d3-scale, etc.) to reduce bundle size. Scales map data domains to visual ranges; axes render tick marks from scales. Shape generators (d3.line, d3.arc, d3.area) produce SVG path strings from data arrays. Transitions animate attribute/style changes with automatic interpolation. For framework integration, let D3 handle data computation (scales, layouts, shapes) and let your framework own the DOM.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST use selection.join() for data joins — NOT manual enter/append/merge/exit chains)

(You MUST use modular imports (d3-selection, d3-scale, d3-shape) — NOT import * as d3 from "d3" in production bundles)

(You MUST use named constants for ALL visual dimensions, colors, and timing values — NO magic numbers)

(You MUST type D3 selections and scales with TypeScript generics — Selection<SVGGElement, Datum, ...>, ScaleLinear<number, number>)