Protovis - A visualization toolkit for JavaScript using SVG. | Hacker News Reader

Protovis - A visualization toolkit for JavaScript using SVG.

github.com

92 pointsomarish25 comments

I've used protovis for an internal graphing framework. It's absolutely, positively, 100% the best visualization tool for the web.

The syntax is easy to work with (once you get over the initial learning curve, which is somewhat steep), and it flies on a modern browser. It's the only framework out there for visualization development that's flexible enough to do interesting things with.

I think the only other comparable tool is processing (not processingjs, which is too slow for non-trivial tasks), although processing is focused on pixel manipulation whereas protovis is focused on vector drawing.

Protovis is one of the most interesting pieces of code I have looked at recently. It really opened my eyes up to the power of javascript and I learned a lot from it. The code is clean, well documented, and imo brilliant.

I am not even surprised this is cool - Jeff Heer is behind it http://hci.stanford.edu/jheer/ and he's written some crazy cool frameworks - Prefuse (Java) and Flare (AS3). I'm setting my gitHub watch on this one :-)

you guys might also dig the author's next opensource JS project, polymaps: http://polymaps.org

Anyone know what other similar libraries there are?

JIT is great http://thejit.org/

The Javascript InfoVis Toolkit: http://thejit.org/

and gRaphaël: http://g.raphaeljs.com/

spring to mind.

It depends on what you want to want to do - this library has a wider scope than others I've seen. The closest I know would be Raphael, which is nice in that it also supports IE (Canvas): http://raphaeljs.com/

If you just want Graphs/Charts, here's a few off the top of my head:

http://www.deensoft.com/lab/protochart/

http://www.liquidx.net/plotkit/

http://code.google.com/p/flotr/

for clarification, raphael's IE support is not from HTML 5's canvas tag, but from SVG's precursor, VML: http://en.wikipedia.org/wiki/Vector_Markup_Language

Highcharts has better cross-browser compatibiltiy - http://highcharts.com.

Though it's not F/free, if you care about that:

http://highcharts.com/license

Bluff (a port of Ruby's Gruff) does less, but does it very well. http://bluff.jcoglan.com/

I'm the author of Grafico, A Raphaël (js based SVG/VML) charting library with a focus on proper charts (per Stephen Few/Tufte) Check it out here: http://grafico.kilianvalkhof.com/ and this page has a lot of examples: http://grafico.kilianvalkhof.com/documentation/index.html

I wrote a library that uses canvas: http://github.com/biilly/doodle-js

Doesn't work in IE6/IE7.

Raphaël does.

Here's a better site for checking out some demos: http://vis.stanford.edu/protovis/

This vis library looks really interesting to me because of its flexibility. My main concern is that it's based on SVG. I wonder how easily it could be modified to be canvas based instead. The only reason I say that is because canvas seems to be getting a lot of attention from browser vendors while SVG is languishing...

ProtoVis has a somewhat modular rendering backend, I believe. So you could probably rewrite it to run on canvas. That said, why do you think SVG is languishing? The IE9 demos made quite a big deal of their SVG support and the other major browsers already have pretty decent support for it.

Looks like I just haven't been paying attention. Thanks for pointing that out.

protovis actually moved away from canvas and into svg. There are some people working on a canvas port though as well. SVG suppost is pretty good actually in everything but IE though IE9 will support it. And that is a problem with canvas too.

There's been some recent progress with Protovis and SVGWeb (a JavaScript + Flash shim for SVG support in Internet Explorer):

http://groups.google.com/group/protovis/browse_thread/thread...

One thing I want that none of these demos seem to have is links. If part of my visualization is describing some system entity, I want to be able to click on that entry to drill-down. The drill-down page might be a completely different page that doesn't contain a visualization at all.

I've played around with SVG, which supports links if you use "object" or "embed" tags. But if you use either of those tags, the SVG image acts more like an iframe which has scroll-bars if the SVG is too big, and clicking the link loads the page in the the SVG's little box. If you use the "img" tag then the SVG flows with the page better, but links don't work. :(

You can set 'click' and 'hover' events for almost all of the objects created, which can obviously be to change document.location or window.open()

This is exactly right. And these popups can be pure HTML/CSS. See this easy integration with the jQuery tipsy library.

http://vis.stanford.edu/protovis/ex/tipsy.html

Whenever I deal with SVG these days I use Google's svgweb project for near-universal compatibility: http://code.google.com/p/svgweb/

It uses native rendering when available, but falls back to a flash plugin that emulates SVG support when it isn't (meaning pre-IE9 Internet Explorer). This ends up covering ~95% of the market.

Also, I'd disagree that SVG is languishing. True, canvas is getting a lot of attention, but SVG is more than sufficiently mature to support projects like this.

Here's a further demo showing a social graph (Twitter friend relations at a BarCamp) with an image hack on ProtoVis' directed force graph: http://ianozsvald.com/2010/10/05/visualising-lanyrds-social-... It works great in Chrome/Safari and ok in Firefox. It runs like a dog on the iphone 3G. Kyran (who hacked ProtoVis) is working on a Canvas reimplementation which runs faster on mobiles.

Reply on news.ycombinator.com