D3.js data visualization in React/Next.js components with PIXEL-PERFECT Figma matching. Use when building interactive charts, graphs, network diagrams, geographic maps, or any custom data visualization with D3.js inside React components. Covers pixel-perfect Figma extraction workflow, iterative visual validation via Playwright, two integration approaches (useRef+useEffect imperative vs declarative React rendering), responsive sizing, TypeScript typing, SSR/Next.js compatibility, accessibility, and performance. Triggers on: 'create a chart', 'add a D3 visualization', 'build a graph component', 'data visualization', 'interactive chart', 'force-directed graph', 'bar chart', 'line chart', 'heatmap', 'scatter plot', 'pie chart', 'chord diagram'.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
D3.js data visualization in React/Next.js components with PIXEL-PERFECT Figma matching. Use when building interactive charts, graphs, network diagrams, geographic maps, or any custom data visualization with D3.js inside React components. Covers pixel-perfect Figma extraction workflow, iterative visual validation via Playwright, two integration approaches (useRef+useEffect imperative vs declarative React rendering), responsive sizing, TypeScript typing, SSR/Next.js compatibility, accessibility, and performance. Triggers on: 'create a chart', 'add a D3 visualization', 'build a graph component', 'data visualization', 'interactive chart', 'force-directed graph', 'bar chart', 'line chart', 'heatmap', 'scatter plot', 'pie chart', 'chord diagram'.
D3.js for React โ Pixel-Perfect from Figma
Every chart MUST match its Figma design 100%. Follow the steps below in order.
Study the Figma screenshot and answer these before writing any code:
Chart type โ line / multi-line / area / bar / grouped bar / scatter / pie / heatmap / other?
Area fills? โ yes (area chart) or no (line chart only)?
Series count โ how many lines/bars? Count precisely.
Line behavior โ converging, diverging, parallel, spread from one point?
Lines/shapes โ color (hex), thickness (px), opacity, style (solid/dashed/dotted), dash pattern, curve type (curveLinear / curveMonotoneX)
Special lines โ average/median/threshold? Style (e.g., white dashed)?
Fills/gradients โ direction, stops, opacity, or none?
Axes โ Y labels (values, font, color, size), Y title (text, rotation), X labels, axis line color/thickness
โ horizontal lines (color, style), vertical lines (present? color, style)
Grid
Colors on dark bg โ grid #232b3e, axis #8596bb, labels #7184af, title #ebeef4 (see AGENTS.md dark context rules)
Legend โ position, items, symbols
Step 2b: Extract Shape Fill Patterns (MANDATORY for ALL chart types)
โ DO NOT guess fill patterns for ANY shape. Always extract from Figma first.
Figma DataViz shapes (bars, area fills, pie slices, scatter dots, line strokes, heatmap cells) often use multi-layer composites โ not simple solid colors. Every shape type can have gradients, masks, textures, and blend modes. You MUST extract the exact layer structure before writing any fill/stroke code.
Which shapes to extract
Chart type
Shape atoms to find
Bar / Grouped bar / Histogram
.Atom / Bar / V or .Atom / Bar / H
Area chart
Area fill path โ look for <path> with fill + gradient/mask
Line chart
Line stroke โ look for stroke gradients, glow effects, or dashed patterns
Pie / Donut
Slice segments โ look for radial gradients, stroke separators
Scatter / Bubble
Dot/circle atoms โ look for radial gradients, opacity, blur/glow
Heatmap / Matrix
Cell rectangles โ look for color scales, opacity mapping
Treemap
Nested rectangles โ look for fill patterns, border styles
Sankey / Chord
Flow paths โ look for gradient fills along path direction
Extraction workflow
Find the shape atom node โ In the chart's design context, locate the individual shape element. Look for names like .Atom / Bar / V, Bar / V, Slice, Dot, Area, Line, or similar. Note its node ID.
Download and inspect any mask/texture images (if present):
mcp1_browser_navigate --url "<image-url>"
mcp1_browser_take_screenshot # see the tile/mask pattern
Key rules (apply to ALL shape types)
Never assume solid fills โ Always check. Even a simple-looking bar or area fill may have gradient + texture layers.
Mask โ overlay โ A Figma mask controls the visibility of the layer below. It does NOT paint color on top. In SVG, use <mask> (white = visible, black = hidden). Never use fill="black" as a painted overlay.
Gradient direction matters โ from-black to-rgba(0,0,0,0.08) in a Figma mask = opacity mask where one end is fully visible and the other fades out. Map the direction (to-b = topโbottom, to-r = leftโright, to-br = diagonal) to SVG gradient x1/y1/x2/y2.
Textures inside masks fade together โ If a tiling pattern and a gradient share the same mask container, apply the same SVG <mask> to both layers.
Check line/texture direction visually โ Download the tile image. Horizontal lines = pattern repeats vertically. Vertical lines = pattern repeats horizontally. Diagonal = both. Never assume โ always inspect.
Tile size โ The Figma bg-size value (e.g., 14.08px ร 14.08px) is the SVG <pattern> width/height.
Area chart gradients โ Often fade from the line color at the top to transparent at the bottom. Use <linearGradient> with stopOpacity.
Line stroke gradients โ Some lines change color along their length. Use <linearGradient> applied to stroke.
Radial gradients โ Used in pie slices, scatter dots, and radial charts. Use <radialGradient> with cx/cy/r.
SVG template: shape with gradient opacity mask + line texture
<defs>
{/* Opacity mask: adjust direction (x1,y1โx2,y2) per Figma gradient */}
<linearGradient id="shape-mask-grad" x1="0" y1="0" x2="0" y2="1">
<stopoffset="0%"stopColor="white"stopOpacity="1" /><stopoffset="100%"stopColor="white"stopOpacity="0.08" />
</linearGradient>
<maskid="shape-mask"maskContentUnits="objectBoundingBox"><rectwidth="1"height="1"fill="url(#shape-mask-grad)" /></mask>
{/* Tiling line pattern โ adjust width/height per Figma bg-size */}
<pattern id="shape-lines" patternUnits="userSpaceOnUse" width="100" height="3.5">
<rectwidth="100"height="3.5"fill="white" /><rectwidth="100"height="1"fill="black"opacity="0.30" />
</pattern>
</defs>
{/* Layer 1: solid color with gradient opacity mask */}
<path d={shapePath} fill={shapeColor} mask="url(#shape-mask)" />
{/* Layer 2: line texture, also masked (omit if no texture in Figma) */}
<path d={shapePath} fill="url(#shape-lines)" mask="url(#shape-mask)" opacity="0.15" />
