1
I Use This!
Activity Not Available
Analyzed over 2 years ago. based on code collected over 2 years ago.

Project Summary

ProtovisProtovis 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 ExpressiveAlthough 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 PicturesWant more? See our example charts and visualizations.

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

Tags

canvas javascript svg visualization

In a Nutshell, protovis-js...

BSD 4-clause (University of California-Specific)
Permitted

Commercial Use

Modify

Distribute

Place Warranty

Forbidden

Hold Liable

Use Trademarks

Required

Include Copyright

Include License

These details are provided for information only. No information here is legal advice and should not be used as such.

All Licenses

This Project has No vulnerabilities Reported Against it

Did You Know...

  • ...
    Black Duck offers a free trial so you can discover if there are open source vulnerabilities in your code
  • ...
    data presented on the Open Hub is available through our API
  • ...
    55% of companies leverage OSS for production infrastructure
  • ...
    learn about Open Hub updates and features on the Open Hub blog

Languages

Languages?height=75&width=75
JavaScript
58%
HTML
35%
CSS
7%
2 Other
<1%

30 Day Summary

Apr 25 2015 — May 25 2015

12 Month Summary

May 25 2014 — May 25 2015