skills.rest
openai
openaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

d3-data-visualization

Build custom SVG and DOM-based data visualizations with D3 scales, layouts, and interactions.

5.3k|765|Updated Mar 4, 2026
Search Tags:#charts#svg#annotation#D3#scrollytelling#Data Visualization#Responsive design
One-click install
npx skills add https://github.com/openai/plugins --skill d3-data-visualization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d3-data-visualization
Source: https://github.com/openai/plugins/tree/main/plugins/build-web-data-visualization/skills/d3-data-visualization
Command: npx skills add https://github.com/openai/plugins --skill d3-data-visualization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Declarative charting libraries fall short when a visualization needs bespoke marks, custom scales, rich annotation, domain-specific background geometry, or precise control over SVG output. This Skill guides the design and implementation of custom D3 visualizations with editorial-quality polish.

Core Features & Use Cases

  • Custom Chart Construction: Build charts with d3-scale, d3-shape, d3-axis, and d3-selection using stable data joins, separated parsing, geometry, rendering, and interaction layers.
  • Interaction and Annotation: Implement zoom, brush, drag, scrollytelling scene states, and explicit label and annotation layers with reduced-motion fallbacks.
  • SVG Polish and Responsiveness: Apply concrete typography, stroke, crispEdges, and non-scaling-stroke defaults, plus mobile-first recomputation of layouts for small screens.
  • Use Case: A developer needs a publication-quality slopegraph with direct end labels, quiet gridlines, and zoom-stable strokes that exports cleanly to SVG for an editorial article.

Quick Start

Use the d3-data-visualization skill to build a responsive SVG line chart with direct labels, styled axes, and zoom support from my dataset.

Frequently Asked Questions about d3-data-visualization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom chart with D3?▼

Start with a clean data model, then separate parsing, scale construction, derived geometry, rendering, and interaction state. Use d3-scale for mappings, d3-shape for lines and areas, d3-axis for axes, and stable keys in data joins.

When should I use D3 instead of a charting library?▼

Use D3 when the chart needs custom marks, nonstandard layouts, rich annotation, domain-specific background geometry, or export-quality SVG. Avoid it when a declarative grammar is simpler or when mark counts make DOM rendering the bottleneck.

Can I use D3 with React?▼

Yes. Let React own the container structure and component lifecycle while D3 owns scales, geometry math, and behaviors like zoom and brush. Keep imperative D3 islands small with a clear boundary between the two.

When should a D3 chart move to Canvas or WebGL?▼

Move rendering to Canvas or WebGL when DOM node counts or continuous redraws exceed frame budgets, such as very dense scatterplots or constant animation. Keep D3 for scales and math, and prefer SVG overlays for labels and annotations.

How do I make D3 charts responsive on mobile?▼

Recompute scales, tick counts, label placement, and plot height from measured container width rather than only scaling the viewBox. Replace hover with tap or focus inspection, enlarge hit areas, and define pinch and zoom ownership.

Related Skills

Explore More Software Engineering Skills→
miloswrathmiloswrath

d3-visualization

Create custom data-driven D3.js visualizations from raw datasets.

Community
Advanced
cat-xierluocat-xierluo
557

svg-article-illustrator

Generate SVG illustrations from Markdown articles with animation and PNG export.

Community
Advanced
anhnq-labanhnq-lab

dark-mode-polisher

Audit and fix dark mode inconsistencies in the CIC ERP application.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-chart-render

Detect chart containers with axes or legends but no data marks.

Community
Advanced