D3 Exercises

Welcome to D3

In which we briefly introduce D3 and the major components.


In which we learn how to search the DOM.

Append and Attr

In which we learn how to add elements and attributes to the DOM and hand code a simple chart.


In which we learn about Data binding.

Enter and Exit

In which we learn the genius of the enter and exit selectors, and we draw a graph with plain old HTML5.


Let’s draw some circles and squares.

SVG Histogram

In which we create a graph data binding and SVG.

SVG Scatterplot

In which we create a graph using SVG


Animation can make a graph wonderful. With D3 it’s easy.


In which we listen out for user interaction, and respond.


In which we normalise data for display.

Color Scales

In which we automatically assign colours to our data.


In which we automatically generate axes for our plots.


We learn how to pull data-feeds directly from the internet via AJAX.

Parsing Data

We parse CSV and XML.


Drawing freeform SVG paths.

Pie Layout

Layouts help us transform data for display. Here we learn about the pie layout and use it to make a pie chart.