UPDATE (July 18, 2016): The code and API links in these tutorials have been updated to target D3 v4, which was a complete rewrite. The D3 wiki contains a breakdown of the changes from v3.
This post is part of a series that explores some key concepts in D3.js by building up an example, step by step, from a bare-bones pie chart to an interactive, animated donut chart that loads external data. For the enough-with-the-jibber-jabber-show-me-the-code types out there, here's a breakdown of the steps we'll be covering:
- Step 0: Intro ← You Are Here
- Step 1: A Basic Pie Chart (Code | Demo)
- Step 2: A Basic Donut Chart (Code | Demo)
- Step 3: Adding a Legend (Code | Demo)
- Step 4: Loading External Data (Code | Demo)
- Step 5: Adding Tooltips (Code | Demo)
- Step 6: Animating Interactivity (Code | Demo)
NOTE: Because we're building things up step by step, the source code contains
REMOVED comments to annotate the lines that have been added, altered or deleted relative to the previous step.
We'll start with this bare-bones pie chart:
And by the end we'll have this interactive, animated donut chart that loads data from an external source. Try clicking on the coloured squares in the legend to filter the dataset:
We're going to be covering a lot of ground in these posts, so we'd better get started... onwards to Step 1: A Basic Pie Chart.