Live Coding D3.js

Three Little Circles

D3 is most useful when used to generate and manipulate visuals as SVGs because SVGs can be transformed and scaled witout suffering from pixelation. All major modern web browsers - including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari - have at least some degree of SVG support and can render the markup directly.

Before we get into examples in d3.js, let's briefly review SVGs in html. This will give you a better idea of how d3.js utilizes javascript to animate data visualizations. Check out the code below; it shows a SVG circle in html.

As you can see above, the append method allows you to create a single element. This is can be useful in small applications. If we want to scale this process, we need to utilize D3's data join methods which creates and updates elements corresponding to your data.

svg.selectAll("circle")
      .data(data)
    .enter().append("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", 10);

Mike Bostock has a great explanation of the data joing process on one of his blog posts. Here is what he has to say in brief:

First, svg.selectAll("circle") returns a new empty selection, since the SVG container was empty. The parent node of this selection is the SVG container.

This selection is then joined to an array of data, resulting in three new selections that represent the three possible states: enter, update, and exit. Since the selection was empty, the update and exit selections are empty, while the enter selection contains a placeholder for each new datum.

The update selection is returned by selection.data, while the enter and exit selections hang off the update selection; selection.enter thus returns the enter selection.

The missing elements are added to the SVG container by calling selection.append on the enter selection. This appends a new circle for each data point to the SVG container.

Thinking with joins means declaring a relationship between a selection (such as "circle") and data, and then implementing this relationship through the three enter, update and exit states.

Building Charts using SVGs and D3

Let's make a simple scatter plot that combines what we know about svg, data joining, CSS, and mouse events.

Take Home Example

I left the following data visualization partially completed. Uncomment sections in the correct order to see the final visualization of bus riders on the 38 Geary Street line in San Francisco. For perspective, a full bus can carry 80 passengers!