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)
<!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";
2. Create Basic Chart
// 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:
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);
4. Implement Responsive Design
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 for detailed chart selection criteria and best practices.
Common Patterns
Quick Data Loading
// 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
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
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/ directory