d3js

Create any D3.js data visualization quickly and correctly using D3 v7. This skill supports two workflows: direct implementation (default) for fast, professional output, and creative mode for artistic, philosophy-driven visualizations. Three output formats are available: standalone HTML, HTML + separate JS, and React components.

Default Configuration

These defaults apply to every visualization unless the user explicitly overrides them. The assumption is that the user will PDF, screenshot, or otherwise export the result for insertion into another document.

Layout: Single Screen, No Scrolling

Every visualization MUST fit entirely within a single browser viewport (100vh) with no scrolling required. This is non-negotiable.

Implementation rules:

• Set html, body { height: 100vh; overflow: hidden; } on standalone HTML output
• Use body { display: flex; flex-direction: column; } with flex: 1 on the chart container to fill available space
• Use compact padding (0.5rem–0.75rem), gaps (0.5rem), and font sizes
• SVGs fill their containers via CSS (width: 100%; height: 100%) rather than fixed pixel dimensions
• Titles and labels use small but readable sizes (0.7–0.85rem for titles, 10–11px for axis text)
• When multiple charts share a page (dashboards), use CSS Grid with fractional rows (1.2fr 1fr) and min-height: 0 on flex children to prevent overflow

Sizing: Responsive viewBox, Not Fixed Pixels