Protovis - a graphical data visualization framework using JavaScript and SVG | Hacker News Reader

Protovis - a graphical data visualization framework using JavaScript and SVG

vis.stanford.edu

82 pointshanszeir22 comments

See also d3, a newer visualization framework from the same primary author. Similar to protovis but with a greater focus on updating and animation.

http://mbostock.github.com/d3/

Thanks! But I can't find which browsers it supports, or which features it supports per browser.

It supports any browser in theory, as it just operates on the DOM. You may want to load Sizzle.js beforehand to give you more powerful CSS selectors for older versions of IE.

In reality you will want to use SVG to create anything impressive, so this means WebKit (Chrome, Safari), Firefox, Opera, IE9. And potentially IE6-8 if the SVGWeb Flash fallback supports all the SVG features you need.

Awesome, thanks for posting. I didn't know about this lib.

Thanks for the reference! But actually it doesn't appear to be a visualization framework, it's a transformation framework: "D3 does not provide a new graphical representation—unlike Processing, Raphaël, or Protovis, there is no new vocabulary of marks to learn. Instead, you build directly on standards such as CSS3, HTML5 and SVG."

For example, you could use this framework to build an HTML table or an SVG document directly.

I get the technical distinction, but the general purpose is still primarily to visualize no?

That's literally true, but in practice D3 makes for (and is intended as) an effective Protovis replacement. The set of primitive marks in Protovis is close to that of SVG, in any case.

These libraries' primary author (Mike Bostok) views D3 as the successor to protovis:

https://groups.google.com/d/msg/d3-js/UAEmdL4XArw/CfB4S-60u9...

In particular:

"I would recommend switching to D3. I have no current plans to release a new Protovis version."

See also the SIMILE Widgets (http://simile-widgets.org/) project which is spun out from research at MIT. I've been using the Timeline control and found it very easy to use.

I've been working with Protovis for about 9 months now and it is a pleasure. It took a while to get my head around its data model, but once you do it is incredibly powerful. (IE is not an issue in my environments)

This library just pushed JavaScript to the top of the "to learn for real" list for me. It looks like a great tool.

You might also want to checkout another supercool JS visualization framework - http://thejit.org

Thanks, it looks amazing! :).

I would love to be able to use Protovis but as an SVG-only toolkit it is not very practical if you have to provide a good experience to MSIE 7 & 8 users - see http://multimedia.journalism.berkeley.edu/tutorials/protovis...

(Yeah, I know, if they wanted a good experience why would they use IE7? But I think we have to live with IE8 for a good while.)

While not ideal, you can fallback to SVGWeb (using Flash 10) for older browsers. Some members of the Protovis community have released some updates to make this work: https://groups.google.com/forum/#!topic/protovis/GoD5ihZzZlg

Can anyone suggest a JS library that allows u to plot semilog graphs and log log graphs please... Do any of the above support it? At least it is not shown in the galleries...

If I get it correctly, semi-log graph is just about scales, not about different representation, right? So then yeah, it's not hard with protovis:

http://vis.stanford.edu/protovis/docs/scale.html

Awesome thanks a lot :)!!!

I used this library for internal tool at Groupon. It does a lot for you, it is very versatile, however it is not without it's problems, some special effects we had hard time doing. We really pushed it to the limit there, with interaction and some things were harder to pull off. Never had to worry about IE7 because it was internal tool and we could ask for which browser to use. I would recommend it to build solutions that are more complex graphing.

I'm looking through the source, specifically the jsDoc comments. Does anybody know what "[v]" means in this context:

     * @param {function} f function to execute on each value in the array.
     * @param [v] object to use as the first argument to the first call of

As I understand it, the parameter type is specified with curly brackets, like, "{function}" in the line above.

"v" is the variable name, and the square brackets around it mean it's optional. There is no type specified for this parameter, so nothing in curly brackets.

Are these the definitive docs: http://code.google.com/closure/compiler/docs/js-for-compiler...

Because I don't see square brackets for optional in there.

It might not be part of the official spec, but it's a convention that we use in my office and I've seen a number of other places as well.

[edit] Here we go. This is the JSDoc we use, and presumably Protovis does too. Take a look at the Optional Parameters section: http://code.google.com/p/jsdoc-toolkit/wiki/TagParam

Reply on news.ycombinator.com