D3 18,089 (Data-Driven Documents) does not draw charts for you. It binds data to DOM elements, usually SVG's SVG shapes, and supplies the math that turns numbers into positions, colors and paths: scales, axes, shape generators, layouts, projections and physics. You design the chart, and when the data outgrows the DOM, the same math drives a Canvas 2D canvas (Canvas Rendering). BookNest's six books are the running example, with sample sales data invented for this chapter (Keyed Joins).
What you will learn
How D3's modules fit together, and how selections and the data join build a chart from data.
How scales, axes, shape generators and d3-array turn raw records into lines, areas, bars and pies.
How to animate updates, add zoom, brushing, dragging and tooltips, and link charts into a dashboard.
How to lay out trees, networks and maps, render large data to canvas, and choose between D3, Observable Plot 40,840 and other chart libraries.
Sections
- Getting Started with D3.js
- Selections and the Data Join
- Scales and Axes
- Shapes and Curves
- Loading and Transforming Data
- Transitions
- Zoom, Brush and Drag
- Sales Dashboard
- Trees, Treemaps and Sunbursts
- Force-Directed Layouts
- Maps with d3-geo and TopoJSON
- Canvas Rendering
- Accessible Charts
- D3 with React
- D3 Under the Hood
- Observable Plot
- D3 and Its Alternatives
- Test Yourself!