D3.js Visualization
by chrisvoncsefalvay
A Claude Code agent skill that enables the creation of sophisticated, interactive data visualizations using D3.js (Data-Driven Documents). This skill guides Claude through building publication-quality SVG-based graphics with precise control over visual elements, transitions, and interactions. It supports two integration patterns: direct DOM manipulation for complex visualizations with transitions, and declarative rendering where D3 handles calculations while your framework renders elements. The skill covers a wide range of visualization types including bar charts, line charts, scatter plots, chord diagrams, heatmaps, pie charts, force-directed network graphs, and hierarchical layouts. It includes boilerplate templates, sample datasets, scale documentation, and color scheme guidance. Visualizations are responsive, accessible, and can feature tooltips, zoom, pan, brush behaviors, and choreographed animated transitions between data states. Works across any JavaScript environment including React, Vue, Svelte, and vanilla JS. Created by data scientist and computational epidemiologist Chris von Csefalvay.
Installation
Key Features
- ✓Creates interactive SVG-based visualizations with tooltips, zoom, pan, and brush behaviors
- ✓Supports custom chart types including chord diagrams, force-directed networks, heatmaps, and geographic projections
- ✓Includes boilerplate templates, sample datasets, and responsive/accessible implementation patterns
Use Cases
- →Building custom data dashboards with interactive charts that go beyond standard charting libraries
- →Creating network and graph visualizations such as force-directed layouts and hierarchical tree diagrams
- →Generating publication-quality graphics with choreographed animated transitions between data states