Protovis

Protovis is a visualization toolkit for JavaScript using SVG. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. For example, this bar chart visually encodes an array of numbers with height:

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

Marks are generated once per associated datum, mapping the datum to visual properties using little anonymous functions (e.g., d * 80) or constants (e.g., 20). Thus, a mark represents a set of visual elements that share data and visual encodings. In the above example, the data are numbers, but data can be any array of objects.

Simple, yet Expressive

Although marks are simple by themselves, you can combine them in interesting ways to make rich, interactive visualizations. To facilitate this, Protovis supports panels and inheritance. A panel is a container for marks; the contained marks are replicated for each datum on the panel. You can vary the panel position to create small multiple displays, or you can overlay panels, as in this stacked area chart of sine waves:

new pv.Panel()
      .width(150)
      .height(150)
    .add(pv.Panel)
      .data(pv.range(3, 9).map(function(y)
          pv.range(50).map(function(x)
              Math.sin(x / y) + 1)))
    .add(pv.Area)
      .data(function(d) d)
      .height(function(d) d * 13)
      .bottom(pv.Layout.stack())
      .left(function() this.index * 3)
    .root.render();

This example generates waves dynamically; more commonly, data is stored externally (perhaps fetched from a remote server using JSON). Without dynamic data, the specification for a stacked area chart is even simpler. The stack layout—a dash of magic for convenience—is just shorthand for the top edge of the previous area; we try to minimize behind-the-scenes magic and keep the specification transparent.

Inheritance lets you derive new marks from existing ones, while sharing some or all of the same properties. This is the same principle as cascading in CSS, or prototypal inheritance in JavaScript. For example, here we derive labels for a rule and a 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. The anchor—another convenience—is an invisible mark that inherits from the bar, while the label inherits from the anchor.

Pretty Pictures

Want more? See our example charts and visualizations.

Getting Started

Read our tutorial on getting started.

Please note: Protovis currently supports Firefox 3+, Chrome, Opera 9+, Safari 4+ and iPhone. We are investigating support for Internet Explorer via SVG Web.