4 ms·

Protovis - a graphical data visualization framework using JavaScript and SVG

82 points by hanszeir 15y ago

TeMPOraL 15y ago
This library just pushed JavaScript to the top of the "to learn for real" list for me. It looks like a great tool.
- socratees 15y ago
  You might also want to checkout another supercool JS visualization framework - http://thejit.org http://thejit.org
  - TeMPOraL 15y ago
    Thanks, it looks amazing! :).
allertonm 15y ago
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-internet-explorer/ 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.)
- dtran 15y ago
  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 https://groups.google.com/forum/#!topic/protovis/GoD5ihZzZlg
Fooman 15y ago
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)
baconner 15y ago
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/ http://mbostock.github.com/d3/
- euroclydon 15y ago
  Thanks! But I can't find which browsers it supports, or which features it supports per browser.
  - jasondavies 15y ago
    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.
- Fooman 15y ago
  Awesome, thanks for posting. I didn't know about this lib.
- haberman 15y ago
  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.
  - baconner 15y ago
    I get the technical distinction, but the general purpose is still primarily to visualize no?
  - another 15y ago
euroclydon 15y ago
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.
- nfriedly 15y ago
  "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.
  - euroclydon 15y ago
    Are these the definitive docs: http://code.google.com/closure/compiler/docs/js-for-compiler.html http://code.google.com/closure/compiler/docs/js-for-compiler... Because I don't see square brackets for optional in there.
    - nfriedly 15y ago
      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 http://code.google.com/p/jsdoc-toolkit/wiki/TagParam
Sudarshan 15y ago
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...
- piranha 15y ago
  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 http://vis.stanford.edu/protovis/docs/scale.html
  - Sudarshan 15y ago
    Awesome thanks a lot :)!!!
jefffoster 15y ago
See also the SIMILE Widgets (http://simile-widgets.org/ 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.
desireco42 15y ago
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.

82 points by hanszeir 15y ago

TeMPOraL 15y ago

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

socratees 15y ago
You might also want to checkout another supercool JS visualization framework - http://thejit.org http://thejit.org
- TeMPOraL 15y ago
  Thanks, it looks amazing! :).

allertonm 15y ago

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-internet-explorer/ 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.)

dtran 15y ago
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 https://groups.google.com/forum/#!topic/protovis/GoD5ihZzZlg

Fooman 15y ago

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)

baconner 15y ago

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/ http://mbostock.github.com/d3/

euroclydon 15y ago
Thanks! But I can't find which browsers it supports, or which features it supports per browser.
- jasondavies 15y ago
  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.
Fooman 15y ago
Awesome, thanks for posting. I didn't know about this lib.
haberman 15y ago
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.
- baconner 15y ago
  I get the technical distinction, but the general purpose is still primarily to visualize no?
- another 15y ago

euroclydon 15y ago

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.

nfriedly 15y ago
"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.
- euroclydon 15y ago
  Are these the definitive docs: http://code.google.com/closure/compiler/docs/js-for-compiler.html http://code.google.com/closure/compiler/docs/js-for-compiler... Because I don't see square brackets for optional in there.
  - nfriedly 15y ago
    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 http://code.google.com/p/jsdoc-toolkit/wiki/TagParam

Sudarshan 15y ago

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...

piranha 15y ago
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 http://vis.stanford.edu/protovis/docs/scale.html
- Sudarshan 15y ago
  Awesome thanks a lot :)!!!

jefffoster 15y ago

See also the SIMILE Widgets (http://simile-widgets.org/ 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.

desireco42 15y ago

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.