D3.js – Data Driven Documents

I've recently started playing with a very powerful Javascript library called D3.js. D3 is for visualizing data either in charts, force layout graphs, data plots or whatever you can imagine. I'm not really sure what the point of this post is as I really can't show you yet what we're using it for. But I can show some of the things that it's capable of.  

Let's first look at a Force Directed Layout. These are usually used to show hierarchical data and the way D3 handles them is very cool looking. You can also include labels, pop ups, etc for the nodes on the plot. If you're really interested in this you can find all kinds of examples.

Next up is charts. D3 makes some beautiful charts that are interactive and zoomable. 

D3 is also capable of Geo Spatial type visualizations, showing data based on a location and some of these are very cool, with spinning globes and such. I saw one in a video that was generating random plots on the spinning globe but can't seem to find it. One of the best I've seen is the NY Times depiction of the Election Results down to the county level of the entire U.S.

Here are a few other cool visuals

D3 excels at animating data in a visually pleasing way. If you have static data, it can represent that, but that's not where it excels. Also, the learning curve is quite steep, well more like a brick wall. The main concept in D3 is you tell it what to do with data as it's made available. One of the speakers I listened to said

If you're looping over data in D3, then you're doing it wrong. 

D3 visualizations are placed on an SVG area and then you place circles, rectangles, images, icons, etc. on that SVG area and define what to do with them when a new one arrives. You don't have to figure out the x,y coordinates yourself, let the platform handle that for you.

If you need to represent data visually then I highly recommend you take a look at D3.js. To get started take a look at their tutorials section. There are many good resources there to get you up and running quickly. While I am certainly no expert on D3 I have recognized that it's very powerful, stable and quick to use. Most of the visualizations I've done only took a day or less and they came out looking quite nice. I will admit  that my first ones looked horrible, but with practice they get nicer and nicer. There also seems to be a fairly active community on StackOverflow if you get stuck.

Share This: