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. You can edit the code's elements, styles, and scripts live!
Now, try to pair the circles with the three outlines by changing each circles attributes.
I like to think of the browser (e.g., viewer), JavaScript (e.g., language), and d3.js (e.g., a library within JavaScript) as a flipbook. The Document Object Model is an interface (e.g., the page) that will allow programs and scripts to dynamically access and update the content, structure, and style of the documents (e.g, the flipping of pages). With the object model, JavaScript gets all the power it needs to create dynamic HTML:
Okay, let's revist the same svg image, using D3 this sime.
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, 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
svg.selectAll("circle") returns a new empty selection, since the SVG container was empty. The parent node of this selection is the SVG container.
"circle") and data, and then implementing this relationship through the three enter, update and exit states.
Let's make a simple scatter plot that combines what we know about svg, data joining, CSS, and mouse events. If you want to see how I structured the data in CSV format, you can download the file here.
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!
Copyright © Mike Taptich 2015... JK. Take what you want from here.