Protovis vs D3.js

Question

TL; DR: Does anyone have the experience of both protovis and D3.js to highlight the differences between them?

I played with protovis for the last 2 weeks, and so far it has been great. Except now, I seem to have hit a little brick wall with animation.

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

I want to make a fairly simple animation, but with protovis it seems less intuitive - I'm starting to think that protoviz was never intended for animation. So, I started looking at D3.js:

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

It looks very similar, but:

• Seems lighter
• Designed to interact with other elements of the DOM, as well as with SVG
• Designed to add animations.

Can anyone highlight any other differences?

I would really appreciate any input

Answer 1

I have done quite a bit of work with Protovis and a few things with D3. In addition to the ones you are talking about, I believe that the following differences stand out for me:

• If Protovis provides a simplified level of abstraction between the visual properties you specify, D3 uses the actual CSS and DOM specifications - so instead of .width(10) or .fillStyle('#00C') you should use .style('width', 10) or .attr('fill', '#00C') . In these examples, the difference is pretty trivial, but when you do something like drawing a line in an SVG image, there are big differences. As a result, D3 may feel a little below level - you have more control, but you should be familiar with the SVG syntax to do some of the things that Protovis makes a lot easier.

• As you noticed, Protovis is all displayed in SVG, and D3 can use other parts of the DOM. This means that for visualization that does not require SVG-based visual elements, you can use D3 even with browsers that do not support SVG. It also means that it’s much easier to integrate HTML and SVG into the same visualization, which is very good for things like word processing (text manipulation and layout is pretty weak in Protovis).

• D3 modifies or reduces some basic Protovis utilities, such as scaling and data manipulation. I was repeatedly annoyed that basic utilities, such as pv.sum() or pv.mean() , do not have D3 equivalents, although some, such as .nest() , are shared in both libraries. Edit 10/1/12: D3 has populated its data utilities, but there are still some of them that Protovis includes, but D3 doesn't. pv.dict , pv.numerate and pv.repeat . Presumably, they were excluded due to the fact that they were considered less useful.

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

• The D3 API documentation is almost completely incomplete, compared to the fairly detailed documents for Protovis. Change (8/30/13) . Now D3 now has complete and detailed API documentation on GitHub , so this point is no longer relevant.

• Finally, I haven’t done much with the animation, but I think you are absolutely right. D3 provides more animation support than Protovis, especially in terms of animated transitions. Protovis can re-render some or all of the visualizations on demand, but it does not have any support for going through animations with a limited duration - you will need to manually copy all this using setInterval . D3 seems to make this a much more integral part of the library.

Edit (7/12/11) . It seems that there is a new fundamental difference - as of June 28, 2011 Protovis is no longer in active development, and the Protovis team presses D3.js. The latest version is quite stable, so this should not stop you from using it, but it is definitely a matter to consider.

Answer 2

There is a tutorial that details the differences between D3 and Protovis . I agree with the description of @nrabinowitz, although I will point out that recently we have added extensive API documentation .

Answer 3

There is a recent article from the authors of Protovis / d3.js published in 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf mainly about d3.js, but containing some of the reasons why they changed some things from Protovis to d3.js.