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
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.
Choose D3.js when you need:
Consider alternatives when:
| 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 |
Option 1: CDN (Quick Start)
<!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)
npm install d3
// 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";
// 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);
});
Tooltips:
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:
circles
.transition()
.duration(300)
.ease(d3.easeCubicOut)
.attr("r", 8);
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);
});
.data() to bind data to DOM elements.join() for cleaner code.nice() to scales for rounded axis values[height, 0]<g> tagsTime 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 for detailed chart selection criteria and best practices.
// 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);
});
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"));
svg
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "xMidYMid meet")
.style("width", "100%")
.style("height", "auto");
See scripts/ directory for implementations.
See examples/ directory for complete implementations.
D3 Fundamentals: SVG basics, data binding, selections, transitions, events
→ references/d3-fundamentals.md
Scales and Axes: All scale types, axis customization, color palettes
→ references/scales-and-axes.md
Paths and Shapes: Line/area generators, arcs, force simulations
→ references/paths-and-shapes.md
Data Transformation: Loading, parsing, grouping, aggregation, date handling
→ references/data-transformation.md
Chart Types: Detailed guidance on when to use each chart type
→ references/chart-types.md
Advanced Patterns: Reusable charts, performance optimization, responsive design
→ references/advanced-patterns.md
Common Pitfalls: Frequent mistakes and their solutions
→ references/common-pitfalls.md
Integration Patterns: Using D3 with React, Vue, Angular, Svelte
→ references/integration-patterns.md
Chart not appearing?
Elements in wrong position?
[height, 0]<g> elementTransitions not working?
Poor performance?
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.