multiAI Summary Pending

d3js-visualization

Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design. Use for: (1) Creating custom interactive charts, (2) Building dashboards, (3) Network/graph visualizations, (4) Geographic data mapping, (5) Time series analysis, (6) Real-time data visualization, (7) Complex multi-dimensional data displays

231 stars

byaiskillstore

View on GitHub Installation ↓

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/d3js-visualization/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/autumnsgrove/d3js-visualization/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/d3js-visualization/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How d3js-visualization Compares

Feature / Agent	d3js-visualization	Standard Approach
Platform Support	multi	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# D3.js Data Visualization Skill

## What is D3.js

D3.js (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS standards to bind data to the DOM and apply data-driven transformations.

### When to Use D3.js

**Choose D3.js when you need:**
- Custom, unique visualizations not available in chart libraries
- Fine-grained control over every visual element
- Complex interactions and animations
- Data-driven DOM manipulation beyond just charts
- Performance with large datasets (when using Canvas)
- Web standards-based visualizations

**Consider alternatives when:**
- Simple standard charts are sufficient (use Chart.js, Plotly)
- Quick prototyping is priority (use Observable, Vega-Lite)
- Static charts for print/reports (use matplotlib, ggplot2)
- 3D visualizations (use Three.js, WebGL libraries)

### D3.js vs Other Libraries

| Library | Best For | Learning Curve | Customization |
|---------|----------|----------------|---------------|
| D3.js | Custom visualizations | Steep | Complete |
| Chart.js | Standard charts | Easy | Limited |
| Plotly | Scientific plots | Medium | Good |
| Highcharts | Business dashboards | Easy | Good |
| Three.js | 3D graphics | Steep | Complete |

---

## Core Workflow

### 1. Project Setup

**Option 1: CDN (Quick Start)**

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Visualization</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    svg { display: block; }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // Your code here
  </script>
</body>
</html>
```

**Option 2: NPM (Production)**

```bash
npm install d3
```

```javascript
// Import all of D3
import * as d3 from "d3";

// Or import specific modules
import { select, selectAll } from "d3-selection";
import { scaleLinear, scaleTime } from "d3-scale";
```

### 2. Create Basic Chart

```javascript
// Set up dimensions and margins
const margin = {top: 20, right: 30, bottom: 40, left: 50};
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// Create SVG
const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// Load and process data
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value
})).then(data => {

  // Create scales
  const xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);

  // Create and append axes
  svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(xScale));

  svg.append("g")
    .call(d3.axisLeft(yScale));

  // Create line generator
  const line = d3.line()
    .x(d => xScale(d.date))
    .y(d => yScale(d.value))
    .curve(d3.curveMonotoneX);

  // Draw line
  svg.append("path")
    .datum(data)
    .attr("d", line)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2);
});
```

### 3. Add Interactivity

**Tooltips:**

```javascript
const tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background", "white")
  .style("border", "1px solid #ddd")
  .style("padding", "10px")
  .style("border-radius", "4px");

circles
  .on("mouseover", function(event, d) {
    tooltip
      .style("visibility", "visible")
      .html(`<strong>${d.name}</strong><br/>Value: ${d.value}`);
  })
  .on("mousemove", function(event) {
    tooltip
      .style("top", (event.pageY - 10) + "px")
      .style("left", (event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    tooltip.style("visibility", "hidden");
  });
```

**Transitions:**

```javascript
circles
  .transition()
  .duration(300)
  .ease(d3.easeCubicOut)
  .attr("r", 8);
```

### 4. Implement Responsive Design

```javascript
function createChart() {
  const container = d3.select("#chart");
  const containerWidth = container.node().getBoundingClientRect().width;

  const margin = {top: 20, right: 30, bottom: 40, left: 50};
  const width = containerWidth - margin.left - margin.right;
  const height = Math.min(width * 0.6, 500);

  container.selectAll("*").remove(); // Clear previous

  // Create SVG...
}

// Initial render
createChart();

// Re-render on resize with debouncing
let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(createChart, 250);
});
```

---

## Key Principles

### Data Binding
- Use `.data()` to bind data to DOM elements
- Handle enter, update, and exit selections
- Use key functions for consistent element-to-data matching
- Modern syntax: use `.join()` for cleaner code

### Scales
- Map data values (domain) to visual values (range)
- Use appropriate scale types (linear, time, band, ordinal)
- Apply `.nice()` to scales for rounded axis values
- Invert y-scale range for bottom-up coordinates: `[height, 0]`

### SVG Coordinate System
- Origin (0,0) is at top-left corner
- Y increases downward (opposite of Cartesian)
- Use margin convention for proper spacing
- Group related elements with `<g>` tags

### Performance
- Use SVG for <1,000 elements
- Use Canvas for >1,000 elements
- Aggregate or sample large datasets
- Debounce resize handlers

---

## Chart Selection Guide

**Time series data?** → Line chart or area chart

**Comparing categories?** → Bar chart (vertical or horizontal)

**Showing relationships?** → Scatter plot or bubble chart

**Part-to-whole?** → Donut chart or stacked bar (limit to 5-7 categories)

**Network data?** → Force-directed graph

**Distribution?** → Histogram or box plot

See [`references/chart-types.md`](./references/chart-types.md) for detailed chart selection criteria and best practices.

---

## Common Patterns

### Quick Data Loading

```javascript
// Load CSV with type conversion
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value,
  category: d.category
})).then(data => {
  createChart(data);
});
```

### Quick Tooltip

```javascript
selection
  .on("mouseover", (event, d) => {
    tooltip.style("visibility", "visible").html(`Value: ${d.value}`);
  })
  .on("mousemove", (event) => {
    tooltip.style("top", event.pageY + "px").style("left", event.pageX + "px");
  })
  .on("mouseout", () => tooltip.style("visibility", "hidden"));
```

### Quick Responsive SVG

```javascript
svg
  .attr("viewBox", `0 0 ${width} ${height}`)
  .attr("preserveAspectRatio", "xMidYMid meet")
  .style("width", "100%")
  .style("height", "auto");
```

---

## Quality Standards

### Visual Quality
- Use appropriate chart type for data
- Apply consistent color schemes
- Include clear axis labels and legends
- Provide proper spacing with margin convention
- Use appropriate scale types and ranges

### Interaction Quality
- Add meaningful tooltips
- Use smooth transitions (300-500ms duration)
- Provide hover feedback
- Enable keyboard navigation for accessibility
- Implement zoom/pan for detailed exploration

### Code Quality
- Use key functions in data joins
- Handle enter, update, and exit properly
- Clean up previous renders before updates
- Use reusable chart pattern for modularity
- Debounce expensive operations

### Accessibility
- Add ARIA labels and descriptions
- Provide keyboard navigation
- Use colorblind-safe palettes
- Include text alternatives for screen readers
- Ensure sufficient color contrast

---

## Helper Resources

### Available Scripts
- **data-helpers.js**: Data loading, parsing, and transformation utilities
- **chart-templates.js**: Reusable chart templates for common visualizations

See [`scripts/`](./scripts/) directory for implementations.

### Working Examples
- **line-chart.html**: Time series visualization with tooltips
- **bar-chart.html**: Grouped and stacked bar charts
- **network-graph.html**: Force-directed network visualization

See [`examples/`](./examples/) directory for complete implementations.

### Detailed References
- **D3 Fundamentals**: SVG basics, data binding, selections, transitions, events
  → [`references/d3-fundamentals.md`](./references/d3-fundamentals.md)

- **Scales and Axes**: All scale types, axis customization, color palettes
  → [`references/scales-and-axes.md`](./references/scales-and-axes.md)

- **Paths and Shapes**: Line/area generators, arcs, force simulations
  → [`references/paths-and-shapes.md`](./references/paths-and-shapes.md)

- **Data Transformation**: Loading, parsing, grouping, aggregation, date handling
  → [`references/data-transformation.md`](./references/data-transformation.md)

- **Chart Types**: Detailed guidance on when to use each chart type
  → [`references/chart-types.md`](./references/chart-types.md)

- **Advanced Patterns**: Reusable charts, performance optimization, responsive design
  → [`references/advanced-patterns.md`](./references/advanced-patterns.md)

- **Common Pitfalls**: Frequent mistakes and their solutions
  → [`references/common-pitfalls.md`](./references/common-pitfalls.md)

- **Integration Patterns**: Using D3 with React, Vue, Angular, Svelte
  → [`references/integration-patterns.md`](./references/integration-patterns.md)

---

## Troubleshooting

**Chart not appearing?**
- Check browser console for errors
- Verify data loaded correctly
- Ensure SVG has width and height
- Check scale domains and ranges

**Elements in wrong position?**
- Verify scale domain matches data range
- Check if y-scale range is inverted: `[height, 0]`
- Confirm margin transform applied to `<g>` element
- Check SVG coordinate system (top-left origin)

**Transitions not working?**
- Ensure duration is reasonable (300-500ms)
- Check if transition applied to selection, not data
- Verify easing function is valid
- Confirm elements exist before transitioning

**Poor performance?**
- Reduce number of DOM elements (use Canvas if >1,000)
- Aggregate or sample data
- Debounce resize handlers
- Minimize redraws

---

## External Resources

### Official Documentation
- D3.js API Reference: https://d3js.org/
- Observable Examples: https://observablehq.com/@d3

### Learning Resources
- "Interactive Data Visualization for the Web" by Scott Murray
- D3 Graph Gallery: https://d3-graph-gallery.com/
- Amelia Wattenberger's D3 Tutorial: https://wattenberger.com/blog/d3

### Color Tools
- ColorBrewer: https://colorbrewer2.org/
- D3 Color Schemes: https://d3js.org/d3-scale-chromatic

### Inspiration
- Observable Trending: https://observablehq.com/trending
- Reddit r/dataisbeautiful: https://reddit.com/r/dataisbeautiful

---

This skill provides comprehensive coverage of D3.js for creating professional, interactive data visualizations. Use the core workflow as a starting point, refer to the detailed references for specific topics, and customize the examples for your needs.