d3js
Create custom, highly interactive data visualizations with D3.js (Data-Driven Documents)
Best use case
d3js is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create custom, highly interactive data visualizations with D3.js (Data-Driven Documents)
Teams using d3js should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/d3js/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How d3js Compares
| Feature / Agent | d3js | 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?
Create custom, highly interactive data visualizations with D3.js (Data-Driven Documents)
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
# D3Js
## When to Use This Skill
Use D3.js when you need:
- **Complete customization** - Every aspect of the visualization controlled
- **Complex interactions** - Advanced user interactions and transitions
- **Unique visualizations** - Bespoke charts not available in other libraries
- **Data-driven DOM manipulation** - Direct binding of data to DOM elements
- **Custom animations** - Sophisticated transitions and effects
**Avoid when:**
- Simple charts with default styling are sufficient (use Chart.js)
- Quick implementation is priority (use Plotly or Chart.js)
- Team lacks JavaScript expertise
## Complete Examples
### Example 1: Interactive Bar Chart
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.bar { fill: steelblue; cursor: pointer; }
.bar:hover { fill: orange; }
.tooltip {
position: absolute;
*See sub-skills for full details.*
### Example 2: Animated Line Chart with CSV Data
```javascript
// Load and visualize CSV data
d3.csv('../data/timeseries.csv').then(data => {
// Parse dates and values
const parseDate = d3.timeParse('%Y-%m-%d');
data.forEach(d => {
d.date = parseDate(d.date);
d.value = +d.value;
});
*See sub-skills for full details.*
### Example 3: Force-Directed Network Graph
```javascript
// Network data
const nodes = [
{ id: 'A', group: 1 },
{ id: 'B', group: 1 },
{ id: 'C', group: 2 },
{ id: 'D', group: 2 },
{ id: 'E', group: 3 }
];
*See sub-skills for full details.*
## Common Patterns
### Update Pattern (Enter, Update, Exit)
```javascript
function update(data) {
// Bind data
const circles = svg.selectAll('circle')
.data(data, d => d.id);
// EXIT: Remove old elements
circles.exit()
.transition()
.duration(500)
*See sub-skills for full details.*
### Brush and Zoom
```javascript
// Add zoom behavior
const zoom = d3.zoom()
.scaleExtent([1, 10])
.on('zoom', zoomed);
svg.call(zoom);
function zoomed(event) {
const transform = event.transform;
*See sub-skills for full details.*
## Installation & Setup
### CDN (Quick Start)
```html
<script src="https://d3js.org/d3.v7.min.js"></script>
```
### NPM (Production)
```bash
npm install d3
```
```javascript
import * as d3 from 'd3';
// Or import specific modules
import { select, scaleLinear, axisBottom } from 'd3';
```
## Performance Tips
1. **Minimize DOM operations** - Batch updates when possible
2. **Use canvas for large datasets** - Switch to canvas for >1000 points
3. **Throttle events** - Debounce mousemove/scroll events
4. **Optimize transitions** - Limit concurrent animations
5. **Use web workers** - Offload heavy computations
## Resources
- **Official Docs**: https://d3js.org/
- **Observable**: https://observablehq.com/@d3 (Interactive examples)
- **GitHub**: https://github.com/d3/d3
- **Gallery**: https://observablehq.com/@d3/gallery
## Integration with Other Tools
### With React
```javascript
import { useEffect, useRef } from 'react';
import * as d3 from 'd3';
function D3Chart({ data }) {
const svgRef = useRef();
useEffect(() => {
const svg = d3.select(svgRef.current);
// D3 code here
}, [data]);
return <svg ref={svgRef}></svg>;
}
```
### With CSV/JSON Data
```javascript
// Load from relative path
d3.csv('../data/data.csv').then(data => {
// Process and visualize
});
d3.json('../data/data.json').then(data => {
// Visualize JSON
});
```
---
**Use this skill when you need maximum control and customization in your data visualizations!**
## Sub-Skills
- [1. Data Binding (+3)](1-data-binding/SKILL.md)
- [1. Use Proper Margins Convention (+3)](1-use-proper-margins-convention/SKILL.md)Related Skills
chartjs
Create simple, responsive charts quickly with Chart.js using canvas-based rendering
d3js-1-use-proper-margins-convention
Sub-skill of d3js: 1. Use Proper Margins Convention (+3).
d3js-1-data-binding
Sub-skill of d3js: 1. Data Binding (+3).
test-oversized-skill
A test fixture skill that exceeds 200 lines with multiple H2/H3 sections for split testing.
interactive-report-generator
Generate interactive HTML reports with Plotly visualizations from data analysis results. Supports dashboards, charts, and professional styling.
data-validation-reporter
Generate interactive validation reports with quality scoring, missing data analysis, and type checking. Combines Pandas validation, Plotly visualization, and YAML configuration for comprehensive data quality reporting.
claude-reflection
Self-improvement and learning skill that helps Claude learn from user interactions, corrections, and preferences
agent-os-framework
Generate standardized .agent-os directory structure with product documentation, mission, tech-stack, roadmap, and decision records. Enables AI-native workflows.
OrcaFlex Specialist Skill
```yaml
repo-ecosystem-hygiene
Interpret the daily read-only repo ecosystem hygiene audit and route remediation through approved workflows.
domain-knowledge-sweep
Systematic multi-source research of an engineering domain. Spawns parent issue → 6 research subissues (Standards, Academic, Industry, LinkedIn-marketing, Code-audit, Synthesis) → gap implementation subissues. Replaces LinkedIn-only extraction with defensible comprehensive sourcing.
subagent-write-verification
Independently verify subagent-claimed file writes with filesystem and git checks before treating the artifact as real, before committing it, and before referencing the path in downstream prompts.