d3js-visualization

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 |

---

1. Project Setup

Option 1: CDN (Quick Start)

```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(${d.name}
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);

});

```

---

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 tags

Performance

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

---

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.

---

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");

```

---

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

---

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)

---

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 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

---

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.