From d3-viz
Creates D3.js data visualizations using Tufte principles. Use when the user asks to visualize data, create a chart, build a D3 visualization, or explore data visually.
How this skill is triggered — by the user, by Claude, or both
Slash command
/d3-viz:d3-vizThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Creates publication-quality D3.js visualizations grounded in Edward Tufte's information design principles: high data-ink ratio, information density, meaningful annotation, and purposeful interaction. Produces single-file HTML with inline D3 v7.
Creates publication-quality D3.js visualizations grounded in Edward Tufte's information design principles: high data-ink ratio, information density, meaningful annotation, and purposeful interaction. Produces single-file HTML with inline D3 v7.
Route the user's request to the right mode:
| User intent | Signal words | Action |
|---|---|---|
| Direct visualization | "chart", "plot", "graph", "visualize" | Generate standalone HTML → open in browser |
| Chart type help | "what chart", "how should I show", "best way to display" | Consult reference/d3-gallery.md → recommend → generate |
| Data exploration | "explore", "play with", "try different", "experiment" | Build D3 playground → see §7 Playground Integration |
| Small multiples | "compare across", "facet by", "each category" | Generate small multiples layout (one chart per group, shared axes) |
| Annotation focus | "annotate", "highlight", "call out", "story" | Generate with heavy annotation layer |
Start with the data question, not the chart name. Walk this decision tree:
| Question pattern | Category | Go to |
|---|---|---|
| "How does X change over time?" | Temporal | d3-gallery.md → Temporal |
| "How does X compare to Y?" | Comparison | d3-gallery.md → Comparison |
| "How is X distributed / spread?" | Distribution | d3-gallery.md → Distribution |
| "How do X and Y relate?" | Correlation | d3-gallery.md → Correlation |
| "What are the parts of the whole?" | Composition | d3-gallery.md → Composition |
| "How do things connect or flow?" | Flow/Network | d3-gallery.md → Flow & Network |
| "Where is X?" | Spatial | d3-gallery.md → Spatial |
| Shape | Constraint |
|---|---|
| <20 data points | Prefer dot plot, lollipop, direct-labeled bar |
| 20–500 points | Standard charts: line, bar, scatter |
| 500–5000 points | Consider hexbin, contour, aggregation |
| 5000+ points | Hexbin, density, canvas rendering, or small multiples |
| Hierarchical | Treemap, sunburst, pack, icicle, tree |
| Network/graph | Force-directed, arc, adjacency matrix, chord |
Read reference/d3-gallery.md for the selected chart type to get:
Apply these rules to every visualization generated. These are non-negotiable.
DO: Remove axis domain lines, minimize tick marks, use subtle reference lines (stroke-opacity: 0.15).
DON'T: Add gridlines by default, use 3D effects, add drop shadows, use gradient fills on data elements.
// After rendering axis:
g.select(".domain").remove();
g.selectAll(".tick line").attr("stroke-opacity", 0.15);
g.selectAll(".tick text").attr("fill", "#888").attr("font-size", "11px");
DO: Label line endpoints, bar values, notable scatter points directly on the chart with matching colors. DON'T: Use a separate legend box unless there are >5 series and direct labeling is impractical.
// Direct label at end of each line:
groups.forEach(group => {
const last = group.values[group.values.length - 1];
svg.append("text")
.attr("x", x(last.date) + 6).attr("y", y(last.value))
.attr("fill", color(group.name)).attr("font-size", "12px")
.attr("dominant-baseline", "middle")
.text(group.name);
});
DO: When comparing 4+ subgroups, render one small chart per group in a grid with shared axes. DON'T: Hide groups behind a dropdown selector or toggle that forces sequential viewing.
DO: Add at least one text annotation calling out a peak, drop, crossover, or milestone directly on the chart. DON'T: Leave the chart without any annotation. Every chart tells a story — make it explicit.
// Annotation pattern:
svg.append("text")
.attr("x", x(annotationDate)).attr("y", y(annotationValue) - 16)
.attr("fill", "#e0e0e0").attr("font-size", "11px").attr("text-anchor", "middle")
.text("Peak: 1,234 users");
svg.append("line")
.attr("x1", x(annotationDate)).attr("y1", y(annotationValue) - 10)
.attr("x2", x(annotationDate)).attr("y2", y(annotationValue) - 2)
.attr("stroke", "#888").attr("stroke-width", 1);
DO: Use d3.schemeTableau10 for categorical data. Use sequential scales (d3.interpolateBlues) for quantities. Use diverging scales when there's a meaningful midpoint.
DON'T: Use rainbow for sequential data. Use more than 7–8 distinct colors. Add decorative color that doesn't encode data.
DO: Write the chart title as a key insight: "Revenue doubled after the March campaign". DON'T: Use generic titles like "Revenue over Time". If a descriptive title is truly needed, add the finding as a subtitle.
DO: Tooltips show additional dimensions. Hover dims non-hovered elements. Brush filters linked views.
DON'T: Add bounce animations, elastic easing, or interaction that gates essential data.
Transition duration: ≤300ms. Easing: d3.easeCubicOut.
Every visualization follows this canonical single-file HTML structure. Adapt as needed but maintain the skeleton.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Insight-based title]</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
* { margin: 0; box-sizing: border-box; }
body {
background: #1a1a2e; color: #e0e0e0;
font-family: system-ui, -apple-system, sans-serif;
display: flex; justify-content: center; align-items: center;
min-height: 100vh; padding: 24px;
}
.chart-container { max-width: 900px; width: 100%; }
h1 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.subtitle { font-size: 13px; color: #888; margin-bottom: 20px; }
.source { font-size: 11px; color: #666; margin-top: 12px; }
/* Axis styles */
.axis text { fill: #888; font-size: 11px; }
.axis .domain { display: none; }
.axis .tick line { stroke: #2a2a4a; stroke-opacity: 0.3; }
/* Annotation styles */
.annotation { fill: #e0e0e0; font-size: 11px; }
.annotation-line { stroke: #888; stroke-width: 1; }
/* Tooltip */
.tooltip {
position: absolute; pointer-events: none;
background: #16213e; border: 1px solid #2a2a4a;
border-radius: 4px; padding: 8px 12px;
font-size: 12px; color: #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
opacity: 0; transition: opacity 0.15s;
}
</style>
</head>
<body>
<div class="chart-container">
<h1>[Insight title — key finding from the data]</h1>
<p class="subtitle">[Context: date range, methodology, or secondary finding]</p>
<div id="chart"></div>
<p class="source">Source: [data source]</p>
</div>
<script>
// === DATA ===
const data = [ /* inline data or fetch */ ];
// === DIMENSIONS (margin convention) ===
const margin = { top: 20, right: 120, bottom: 40, left: 60 };
const width = 860 - margin.left - margin.right;
const height = 480 - margin.top - margin.bottom;
// === SVG ===
const svg = d3.select("#chart").append("svg")
.attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
.style("max-width", "100%")
.style("height", "auto")
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// === SCALES ===
const x = d3.scaleTime() // or scaleLinear, scaleBand
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0])
.nice();
// === AXES (Tufte-clean) ===
svg.append("g")
.attr("class", "axis")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).ticks(6))
.call(g => g.select(".domain").remove());
svg.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(",.0f")))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width).attr("stroke-opacity", 0.08));
// Axis labels
svg.append("text")
.attr("x", width / 2).attr("y", height + 36)
.attr("fill", "#888").attr("font-size", "12px").attr("text-anchor", "middle")
.text("[X label]");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2).attr("y", -44)
.attr("fill", "#888").attr("font-size", "12px").attr("text-anchor", "middle")
.text("[Y label]");
// === DATA RENDERING ===
// [Chart-specific code: lines, bars, circles, etc.]
// === DIRECT LABELS ===
// [Label line ends, notable bars, key points — no legend]
// === ANNOTATIONS ===
// [At least one call-out on a notable data point]
// === TOOLTIP ===
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
// [Mouseover/mouseout handlers on data elements]
</script>
</body>
</html>
viewBox for responsive sizing — never hardcode width/height attributesd3.csv() or d3.json() with the file pathAdd interaction only when it reveals additional data, not for decoration.
| Interaction | When to use | D3 pattern | Notes |
|---|---|---|---|
| Tooltip | Always (for detail-on-demand) | mouseover → position div → mouseout → hide | Show dimensions not in the static view |
| Voronoi hover | Scatter, multi-line (nearest point detection) | d3.Delaunay.from() → find() on mousemove | Better UX than hovering tiny elements |
| Brush | Time-series range selection, scatter filtering | d3.brushX() or d3.brush() → filter data | Combine with linked views for exploration |
| Zoom + pan | Maps, dense scatter, treemaps | d3.zoom() → transform group | Set scaleExtent and translateExtent bounds |
| Linked views | Dashboard with 2+ coordinated charts | Shared selection state → re-render both | Highlight in one, filter in another |
| Transitions | Sorting, chart type switching, data updates | selection.transition().duration(250).ease(d3.easeCubicOut) | Max 300ms; no elastic/bounce |
See reference/d3-modules.md → Interaction Behaviors for full code patterns.
When the user wants to explore data interactively (try different chart types, adjust fields, toggle Tufte features), build a D3 playground following the /playground skill conventions.
Trigger playground mode on signals like: "explore", "play with", "try different views", "experiment", "what chart works best".
reference/playground-integration.md:
Follow the playground skill pattern: single state object, updateAll() triggers renderPreview() + updatePrompt(). Every control writes to state and calls updateAll().
Natural language, not a value dump. Only mentions non-default choices. Example:
"Create a scatter plot of price vs. square footage, colored by neighborhood, using a log scale for price, with direct labels on outliers and an annotation on the cluster of high-value properties."
Handle data input in order of preference:
| Input type | How to handle |
|---|---|
| File path provided (CSV/JSON) | Read the file, analyze columns, auto-detect types. Use d3.csv() or d3.json() with relative path in the HTML |
| Inline data (pasted values) | Parse and embed directly in the const data = [...] block |
| URL | Fetch with d3.csv(url) or d3.json(url). Warn about CORS if not a known open data source |
| Description only ("monthly sales data with columns date, revenue, region") | Generate realistic sample data matching the description. Note clearly in subtitle: "Sample data — replace with actual data" |
| No data (just a chart type request) | Generate with illustrative sample data. Note in subtitle |
After generating the visualization HTML, before presenting it to the user:
reference/tufte-checklist.mdopen <filename>.htmlUser: "Visualize this CSV of monthly revenue by region" Flow: Read CSV → detect date + numeric + categorical columns → select multi-line chart → generate with direct-labeled line endpoints → annotate peak month → audit checklist → open in browser
User: "Show me how departments compare on headcount" Flow: Detect categorical + numeric → select horizontal bar chart (sorted by value) → direct-label each bar → annotate the largest and smallest → title: "Engineering has 3x the headcount of Marketing" → audit → open
User: "Let me explore this sales dataset" Flow: Detect playground intent → analyze data columns → build D3 playground with chart type cards, field dropdowns, Tufte toggles → set intelligent defaults → write HTML → open in browser
User: "What does the distribution of response times look like?" Flow: Detect single numeric variable → select histogram → add KDE overlay → annotate median and p99 → add rug plot for individual data points → title: "95% of responses complete under 200ms" → audit → open
npx claudepluginhub dtran320/claud3 --plugin d3-vizGuides building interactive D3.js data visualizations with custom layouts, scales, axes, transitions for networks, geo maps in vanilla JS, React, Vue, Svelte.
Generates OpenChart VizSpec JSON for charts, tables, graphs, and sankeys from data. Guides chart selection, encoding rules, and editorial design like colors, typography, and annotations.
Guides custom D3.js visualizations: bar/line/scatter charts, network diagrams, geographic maps, hierarchies, and real-time data updates with zoom/pan/brush interactions.