English 中文(简体)
Protovis vs D3.js
原标题:

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

最佳回答

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.

问题回答

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.

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.





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签