Data-Driven Documents for visualization in the browser

Posted to Software  |  Tags: , , ,  |  Nathan Yau

As we know, browsers keep getting better, and it grows easier every day to visualize data native in the browser, when you used to have to use Flash. In the early goings, the JavaScript visualization libraries felt clunky to their Flash counterparts, but the roles are changing. There’s Protovis, Polymaps, and Processing.js that help you make full use of modern browsers’ functionality.

Mike Bostock, who had a big hand in those first two, recently made Data-Driven Documents, or D3 for short, available to play with.

To be clear, D3 isn’t Protovis 2.0. D3 is a completely different library (although they do share a similar approach, code-wise).

Where D3 and Protovis differ is the type of visualizations they enable (the what), and the method of implementation (the how). While Protovis excels at concise, declarative representations of static scenes, D3 focuses on efficient transformations: scene changes. This makes animation, interaction, complex and dynamic visualizations much easier to implement in D3. Also, by adopting the browser’s native representation (HTML & SVG), D3 better integrates with other web technologies, such as CSS3 and developer tools. Our hope is that this makes D3 not only more powerful, but easier to use.

Another way to put it is D3 sits closer to the browser, and you’re directly manipulating SVG documents. Protovis on the other hand also manipulates SVG documents, but a lot of that is done behind the scenes when you call functions. The advantage of the latter is that, well, you don’t have to deal directly with the SVG, but you lose some flexibility. D3 lets you kinda do what you want.

For a taste of what you can do, there is a nice examples gallery. Above is a Voronoi diagram. Below is a scatterplot matrix, chord diagram, and streamgraph, respectively. They’re all interactive.

While D3 is still in its infancy, it’s obvious that it’s a visualization library to keep an eye on. If there are any Protovis users out there who have gotten their hands dirty with D3, I’d love to hear your first impressions.

[Data-Driven Documents | Thanks, Mike]


  • Richard Palmer March 10, 2011 at 4:29 am

    Go to the Wolfram Demonstrations Project Page

    and you can see these ideas fully implemented already.

    • Cool, but sort of off point. D3 is interesting because you can do all of these things native in the browser, in JavaScript, and it can all be done custom. The Wolfram CDF player on the other hand is a desktop tool.

  • I just ported a simple time series area graph from Protovis to D3. Wasn’t too difficult. The D3 version is a bit more verbose; there are no helper methods for things like “draw a line from x1,y1 to x2,y2”, so it’s 50 characters of code instead of 20. But it’s not too bad and the benefit is you have very direct understanding and control over the layout. And you can do anything SVG can do, easily, which is a lot of power.

    The straight port of the graph looked identical; no surprise. The benefit is with the D3 version I could then easily add interaction, various exploratory features like a cursor that showed textual data on mouseover. It’s awkward doing that in Protovis and seems to require re-rendering the scene graph; with D3 it’s easy to update and modify the document as opposed to redraw it.

  • I’ve been using d3 for an ecological monitoring data project. I really like the fact that it looks like normal javascript compared to protovis, and animation is indeed a lot easier. Being able to integrate better with CSS is also a major plus.

    I’m about to embark on a new visualization using d3 where I expect I’ll actually just use normal html and css rather than SVG for bar graphs. This is another cool possibility opened up by the way d3 works.


Shifting Incomes for American Jobs

For various occupations, the difference between the person who makes the most and the one who makes the least can be significant.

10 Best Data Visualization Projects of 2015

These are my picks for the best of 2015. As usual, they could easily appear in a different order on a different day, and there are projects not on the list that were also excellent.

One Dataset, Visualized 25 Ways

“Let the data speak” they say. But what happens when the data rambles on and on?

Unemployment in America, Mapped Over Time

Watch the regional changes across the country from 1990 to 2016.