D3 Data Visualization

Overview

Use this skill for custom browser visualizations where SVG or DOM semantics matter and a declarative grammar no longer fits cleanly. D3 is strongest when the chart needs bespoke scales, marks, layouts, transitions, zooming, brushing, annotations, or vector export.

Default assumption: use D3 for scales, layouts, geometry, labels, annotation layers, and behavior. Do not turn D3 into the entire application architecture if a framework already owns the surrounding UI.

Choose D3 When

• the chart needs custom marks or nonstandard layouts
• SVG quality matters for export, print, or accessibility
• annotation and labeling are part of the design, not an afterthought
• the visualization needs custom vector background geometry such as a field, court, track, floor plan, schematic, or other meaningful contextual surface
• an editorial story needs data-bound generated cutouts, illustrated substrates, scrollytelling/parallax states, or animated annotation reveals in SVG
• the mark count is moderate enough for DOM or SVG
• the interaction model needs zoom, brush, drag, or coordinated views
• a UML-like, dependency, architecture, state, or flow diagram needs bespoke SVG annotation or product-specific composition after ../uml-and-software-architecture-visualization/SKILL.md has defined the diagram semantics
• a declarative grammar would become harder to read than the resulting D3 code