A graphical approach to visualization Protovis

Protovis composes custom views of data with simple marks such as bars and dots . Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance scales and layouts to simplify construction.

Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example.

Protovis is no longer under active development.



D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis; for more details, please read the The final release of Protovis was v3.3.1 (4.7 MB) . The Protovis team is now developing a new visualization library,, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis; for more details, please read the introduction and browse the examples

This project was led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky. We welcome your comments and suggestions.



Updates

September 17, 2010 - Release 3.3 is available on GitHub.

Getting Started

How does Protovis work? Consider this bar chart, which visually encodes an array of numbers with height:

var vis = new pv . Panel () . width ( 150 ) . height ( 150 ); vis . add ( pv . Bar ) . data ([ 1 , 1.2 , 1.7 , 1.5 , . 7 , . 3 ]) . width ( 20 ) . height ( function ( d ) d * 80 ) . bottom ( 0 ) . left ( function () this . index * 25 ); vis . render ();

This blue bar is rendered once per number, mapping the data to height using a little function ( d * 80 ). Thus, a mark represents a set of graphical elements that share data and visual encodings. Although marks are simple by themselves, you can combine them in interesting ways to make rich, interactive visualizations.

To simplify construction, Protovis supports panels and inheritance. A panel is a container for replicating marks. Inheritance lets you derive new marks from existing ones, sharing some or all of the properties. For example, here we derive labels for a rule and bar:

var vis = new pv . Panel () . width ( 150 ) . height ( 150 ); vis . add ( pv . Rule ) . data ( pv . range ( 0 , 2 , . 5 )) . bottom ( function ( d ) d * 80 + . 5 ) . add ( pv . Label ); vis . add ( pv . Bar ) . data ([ 1 , 1.2 , 1.7 , 1.5 , . 7 ]) . width ( 20 ) . height ( function ( d ) d * 80 ) . bottom ( 0 ) . left ( function () this . index * 25 + 25 ) . anchor ( "bottom" ). add ( pv . Label ); vis . render ();

The rule’s label inherits the data and bottom property, causing it to appear on the rule and render the value (datum) as text. The bar’s label uses the bottom anchor to tweak positioning, so that the label is centered at the bottom of the bar.

Want to learn more? Peruse our examples and documentation.