Protovis vs D3.js

Question

TLDR: Does anyone have experience of both protovis & D3.js to illuminate the differences between the two?

I've been playing with protovis for the last 2 weeks and it's been great so far. Except now I seem to have hit a bit of a brick wall with animation.

protovis: http://vis.stanford.edu/protovis/

I want to do some quite simple animation but with protovis it feels less than intuitive - I'm starting to think that protovis was never really meant for animation. So, I started looking at D3.js:

http://mbostock.github.com/d3/ex/stack.html

It looks very similar, but:

• Seems more lightweight
• Seems geared to interacting with other DOM elements as well as SVG
• Seems geared to adding animations

Can anyone illuminate any other differences?

I'd be very grateful for any and all input

Answer 1

I've done a fair amount of work with Protovis and a few things with D3. In addition to the points you mention, I think the following differences stand out for me:

• Where Protovis provides a simplified abstraction layer between the visual properties you're specifying, D3 uses the actual CSS and DOM specs - so instead of .width(10) or .fillStyle('#00C') you'd use .style('width', 10) or .attr('fill', '#00C'). In these examples, the difference is pretty trivial, but when you're doing something like drawing a line in an SVG image, there are big differences. The result is that using D3 can feel a little lower-level - you have more control, but you have to be pretty familiar with SVG syntax to do some of the things Protovis does much more easily.

• As you note, Protovis is all rendered in SVG, while D3 can use other parts of the DOM. This means that, for visualizations that don't require SVG-based visual elements, you can use D3 even with browsers that don't support SVG. It also means it's much easier to integrate HTML and SVG in the same visualization, which is really nice for things like dealing with text (text manipulation and layout is pretty weak in Protovis).

• D3 changes or drops some of the basic Protovis utilities like scales and data manipulation. I'm repeatedly annoyed that basic utilities like pv.sum() or pv.mean() don't have D3 equivalents, though some, like .nest(), are shared across the two libraries. Edit 10/1/12: D3 has filled out its data utilities, but there are still a few that Protovis includes and D3 doesn't, e.g. pv.dict, pv.numerate, and pv.repeat. Presumably they were left out because they were considered less generally useful.

• D3 provides utilities for asynchronous requests. When I want this in Protovis, I generally have to use an external library (i.e. jQuery).

• D3 API documentation is almost completely lacking incomplete, compared to quite detailed docs for Protovis. Edit (8/30/13): D3 now has complete and detailed API documentation on GitHub, so this point is no longer relevant.

• Finally, I haven't done much with animation, but I think you're entirely correct - D3 provides more animation support than Protovis, especially in terms of animated transitions. Protovis can re-render some or all of the visualization on demand, but doesn't have any support for stepping through a limited-duration animation - you'd have to code it all by hand with setInterval. D3 seems to make this a much more integral part of the library.

Edit (7/12/11): It looks like there's a new major difference - as of June 28, 2011, Protovis is no longer under active development, and the Protovis team is pushing D3.js instead. The last release is quite stable, so this shouldn't prevent you from using it, but it's definitely a point to consider.

Answer 2

There's a tutorial that covers the differences between D3 and Protovis in some detail. I agree with @nrabinowitz's description, though I will point out that we recently added extensive API documentation.

Answer 3

There is a recent paper from the Authors of Protovis/d3.js published 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf mainly about d3.js but containing some of the reasons why they changed certain things on the way from Protovis to d3.js.