I spent some time today learning the basics of D3.js. D3.js, or “Data-Driven Documents”, is:

a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Basically, D3 makes data visualizations easy, enabling manipulation of numeric, geographic, or any other kind of data into good-looking graphics. For example, these Flatiron classmates of mine developed visualizations of Twitter data. Or, more simply, you could chart out blog page views per day (redisplaying what Google Analytics already does), as below. Pretty handy.

---

---

I just wanted to look into the basics, which I did by following this tutorial by Scott Murray. It’s a pretty quick walkthrough of a bar graph and scatterplot, from the fundamentals of HTML and CSS all the way to polishing off a graph with axes and scale. What follows is an overview of my own lessons learned from the walkthrough.

Visualizing, mapping, and binding data

A few verbs, all of which relate to data visualization. To quote Scott Murray,

What is binding, and why would I want to do it to my data?

Data visualization is a process of mapping data to visuals. Data in, visual properties out. Maybe bigger numbers make taller bars, or special categories trigger brighter colors. The mapping rules are up to you.

With D3, we bind our data input values to elements in the DOM. Binding is like “attaching” or associating data to specific elements, so that later you can reference those values to apply mapping rules. Without the binding step, we have a bunch of data-less, un-mappable DOM elements. No one wants that.”

Relatively straightforward, but hugely important for two reasons:

1. The whole point of data visualization is to “map” data input values so as to communicate effectively. Mike Bostock calls it the “critical component of effective visualization: effective communication. It doesn’t matter how good a chart looks if it doesn’t communicate anything!”
2. Data binding is huge. It’s central to front end frameworks like Angular JS, because it connects the front end user interface with the back end business logic, thus “binding”, or making the data accessible between the two.

Getting started

Import the D3 library into your project. Get familiar with D3 selectors and chain syntax. Basically, d3 references the D3 object so we can access D3 methods. From there, it’s easy to select, add, and bind data.

The enter method is essential. We bring a dataset, select which part of the DOM we want to work with, and bind data to create a visualization. But we also want to create new data-bound elements so as to visualize it fully. And we want to do it without creating every element manually. Enter the enter method, which creates new placeholder elements for us.

Making it more interactive

As I described, the tutorial is pretty straightforward and has us up and running with some graphs in no time. But a real visualization needs to be more dynamic, more interactive, right? There’s a million directions to go with this, but the easiest for me to get started were two things:

1. CSS: I’m embarassed that I didn’t even know the :hover selector. I mean, in retrospect, I’m sure I’ve used CSS selectors like :hover or :visited, but they didn’t come immediately to mind. In any case, something as simple as .bar:hover { fill: blue; } can make a big difference–now when I “hover” my mouse over a bar of class “bar” in the bar graph, that bar will change colors. A simple UI addition.
2. JQuery: being familiar with JQuery already, it was the easiest way to implement some more interactivity. For example, when hovering a point on the scatterplot, it’s nice to display the coordinates. JQuery enables that in typical event listener ([element].on("hover", function(){ [handler] })) and handler (modify the content with the .text() method) fashion.

You can see how the scatterplot looks below! The code is also accessible on Github.

Scatterplot of randomized data

Coordinates:

—