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
Best use case
d3js-visualization is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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
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
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "d3js-visualization" skill to help with this workflow task. Context: 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
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/d3js-visualization/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How d3js-visualization Compares
| Feature / Agent | d3js-visualization | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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
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.Related Skills
claude-d3js-skill
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visua...
data-visualization-tool
Chart and visualization generation for DBX Studio. Use when a user wants to visualize data — bar charts, line graphs, pie charts, scatter plots, etc.
scientific-visualization
Create publication figures with matplotlib/seaborn/plotly. Multi-panel layouts, error bars, significance markers, colorblind-safe, export PDF/EPS/TIFF, for journal-ready scientific plots.
fiftyone-embeddings-visualization
Visualize datasets in 2D using embeddings with UMAP or t-SNE dimensionality reduction. Use when users want to explore dataset structure, find clusters in images, identify outliers, color samples by class or metadata, or understand data distribution. Requires FiftyOne MCP server with @voxel51/brain plugin installed.
data-visualization
Create charts, graphs, and visualizations from data. Use when the user needs to visualize data, create charts, or generate reports with graphics.
azure-quotas
Check/manage Azure quotas and usage across providers. For deployment planning, capacity validation, region selection. WHEN: "check quotas", "service limits", "current usage", "request quota increase", "quota exceeded", "validate capacity", "regional availability", "provisioning limits", "vCPU limit", "how many vCPUs available in my subscription".
raindrop-io
Manage Raindrop.io bookmarks with AI assistance. Save and organize bookmarks, search your collection, manage reading lists, and organize research materials. Use when working with bookmarks, web research, reading lists, or when user mentions Raindrop.io.
zlibrary-to-notebooklm
自动从 Z-Library 下载书籍并上传到 Google NotebookLM。支持 PDF/EPUB 格式，自动转换，一键创建知识库。
discover-skills
当你发现当前可用的技能都不够合适（或用户明确要求你寻找技能）时使用。本技能会基于任务目标和约束，给出一份精简的候选技能清单，帮助你选出最适配当前任务的技能。
web-performance-seo
Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.
project-to-obsidian
将代码项目转换为 Obsidian 知识库。当用户提到 obsidian、项目文档、知识库、分析项目、转换项目 时激活。 【激活后必须执行】： 1. 先完整阅读本 SKILL.md 文件 2. 理解 AI 写入规则（默认到 00_Inbox/AI/、追加式、统一 Schema） 3. 执行 STEP 0: 使用 AskUserQuestion 询问用户确认 4. 用户确认后才开始 STEP 1 项目扫描 5. 严格按 STEP 0 → 1 → 2 → 3 → 4 顺序执行 【禁止行为】： - 禁止不读 SKILL.md 就开始分析项目 - 禁止跳过 STEP 0 用户确认 - 禁止直接在 30_Resources 创建（先到 00_Inbox/AI/） - 禁止自作主张决定输出位置
obsidian-helper
Obsidian 智能笔记助手。当用户提到 obsidian、日记、笔记、知识库、capture、review 时激活。 【激活后必须执行】： 1. 先完整阅读本 SKILL.md 文件 2. 理解 AI 写入三条硬规矩（00_Inbox/AI/、追加式、白名单字段） 3. 按 STEP 0 → STEP 1 → ... 顺序执行 4. 不要跳过任何步骤，不要自作主张 【禁止行为】： - 禁止不读 SKILL.md 就开始工作 - 禁止跳过用户确认步骤 - 禁止在非 00_Inbox/AI/ 位置创建新笔记（除非用户明确指定）