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]
Go to the Wolfram Demonstrations Project Page
and you can see these ideas fully implemented already.
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’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.