Protovis is a visualization toolkit for JavaScript that takes a graphical approach to data visualization by allowing the user to specify how the data should be encoded in the marks representing it on the screen. The project is led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with help from Vadim Ogievetsky. Protovis uses SVG image for rendering, allowing visualizations to be seamlessly inserted into pages.
Use
Protovis is a single JavaScript file, containing all its declarations and functions. It can be included within a web page using the following mark-up:
The Protovis code to build the visualization is added to the body of the page using a script tag.
Due to its declarative style, Protovis code typically makes very extensive use of small anonymous functions; to allow for more concise code and increase readability Protovis provides the javascript+protovis script tag type which adds the shorthand function declaration:
function(x) 5*x
which is equivalent to writing:
function(x) { return 5*x; }
Network diagrams
The following example demonstrates the ability to create three different network visualizations using the same dataset. The visualizations show content co-creation trends in a fictitious organization.
Force-directed layout
var w = document.body.clientWidth,
h = document.body.clientHeight,
colors = pv.Colors.category20;
var vis = new pv.Panel
.width(w)
.height(h)
.fillStyle("white")
.event("mousedown", pv.Behavior.pan)
.event("mousewheel", pv.Behavior.zoom(3));
var force = vis.add(pv.Layout.Force)
.nodes(departments.nodes)
.links(departments.links);
Here is an example of code needed to draw a bar chart
Bar chart
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally....
in Protovis:
// Create the root panel and set the visualization's size to 150x150
var vis = new pv.Panel
.width(150)
.height(150);
// Add the horizontal rules (grid lines), we add them first so they go in the back.
vis.add(pv.Rule)
.data(pv.range(0, 2, .5))
.bottom(function(d) d * 80 + 1)
.add(pv.Label);
// Add the bars with the height corresponding to the values in the data property
vis.add(pv.Bar)
.data([1, 1.2, 1.7, 1.5, .7])
.width(20)
.height(function(d) 80 * d)
.bottom(0)
.left(function this.index * 25 + 25) // this.index is the position of the datum in the array
.anchor("bottom").add(pv.Label); // Add a label to the bottom of each bar
// Render everything.
vis.render;
Protovis makes extensive use of property chaining allowing the example above to be written in four statements.
