5 ms·

Protovis - A visualization toolkit for JavaScript using SVG.

92 points by omarish 16y ago

bhiggins 16y ago
Here's a better site for checking out some demos: http://vis.stanford.edu/protovis/ 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...
- endtime 16y ago
  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.
  - bhiggins 16y ago
    Looks like I just haven't been paying attention. Thanks for pointing that out.
- daniel_levine 16y ago
  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.
  - tomd 16y ago
    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/b31401f1b68a913b http://groups.google.com/group/protovis/browse_thread/thread...
- haberman 16y ago
  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. :(
  - schuylerd 16y ago
    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()
    - equark 16y ago
      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 http://vis.stanford.edu/protovis/ex/tipsy.html
- Construct 16y ago
  Whenever I deal with SVG these days I use Google's svgweb project for near-universal compatibility: http://code.google.com/p/svgweb/ 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.
- IanOzsvald 16y ago
  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-connectivity-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.
alexyim 16y ago
Anyone know what other similar libraries there are?
- revorad 16y ago
  Highcharts has better cross-browser compatibiltiy - http://highcharts.com http://highcharts.com.
  - SkyMarshal 16y ago
    Though it's not F/free, if you care about that: http://highcharts.com/license http://highcharts.com/license
- hassy 16y ago
  JIT is great http://thejit.org/ http://thejit.org/
- llimllib 16y ago
  The Javascript InfoVis Toolkit: http://thejit.org/ http://thejit.org/ and gRaphaël: http://g.raphaeljs.com/ http://g.raphaeljs.com/ spring to mind.
- strebler 16y ago
  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/ 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.deensoft.com/lab/protochart/ http://www.liquidx.net/plotkit/ http://www.liquidx.net/plotkit/ http://code.google.com/p/flotr/ http://code.google.com/p/flotr/
  - bfung 16y ago
    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 http://en.wikipedia.org/wiki/Vector_Markup_Language
rbancroft 16y ago
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.
mattj 16y ago
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.
olegkikin 16y ago
Doesn't work in IE6/IE7. Raphaël does.
deleted 16y ago
[deleted]
kidsorrow 16y ago
you guys might also dig the author's next opensource JS project, polymaps: http://polymaps.org http://polymaps.org
samratjp 16y ago
I am not even surprised this is cool - Jeff Heer is behind it http://hci.stanford.edu/jheer/ 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 :-)

92 points by omarish 16y ago

Here's a better site for checking out some demos: http://vis.stanford.edu/protovis/ 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...

endtime 16y ago
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.
- bhiggins 16y ago
  Looks like I just haven't been paying attention. Thanks for pointing that out.
daniel_levine 16y ago
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.
- tomd 16y ago
  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/b31401f1b68a913b http://groups.google.com/group/protovis/browse_thread/thread...
haberman 16y ago
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. :(
- schuylerd 16y ago
  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()
  - equark 16y ago
    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 http://vis.stanford.edu/protovis/ex/tipsy.html
Construct 16y ago
Whenever I deal with SVG these days I use Google's svgweb project for near-universal compatibility: http://code.google.com/p/svgweb/ 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.
IanOzsvald 16y ago
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-connectivity-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.

alexyim 16y ago

Anyone know what other similar libraries there are?

revorad 16y ago
Highcharts has better cross-browser compatibiltiy - http://highcharts.com http://highcharts.com.
- SkyMarshal 16y ago
  Though it's not F/free, if you care about that: http://highcharts.com/license http://highcharts.com/license
hassy 16y ago
JIT is great http://thejit.org/ http://thejit.org/
llimllib 16y ago
The Javascript InfoVis Toolkit: http://thejit.org/ http://thejit.org/ and gRaphaël: http://g.raphaeljs.com/ http://g.raphaeljs.com/ spring to mind.
strebler 16y ago
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/ 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.deensoft.com/lab/protochart/ http://www.liquidx.net/plotkit/ http://www.liquidx.net/plotkit/ http://code.google.com/p/flotr/ http://code.google.com/p/flotr/
- bfung 16y ago
  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 http://en.wikipedia.org/wiki/Vector_Markup_Language

rbancroft 16y ago

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.

mattj 16y ago

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.

olegkikin 16y ago

Doesn't work in IE6/IE7. Raphaël does.

deleted 16y ago

[deleted]

kidsorrow 16y ago

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

samratjp 16y ago

I am not even surprised this is cool - Jeff Heer is behind it http://hci.stanford.edu/jheer/ 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 :-)