Monday, April 6th, 2009
Great visualizations with Protovis
Category: Canvas, JavaScript
I have been very impressed with Andrew Sutherland of the Mozilla Messaging team (which is one reason that I have faith that I will dump Gmail for something he and the Messaging team come up with one day ;) and the visualizations that he is playing with are quite cool indeed. Seeing your email in different ways (not just in a table) can open the eyes.
Andrew is using Protovis "a visualization toolkit for JavaScript using the canvas element. 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."
There are some cool examples such as:
-
-
new pv.Panel().width(150).height(150)
-
.add(pv.Panel)
-
.data([[Math.sin(x / y)
-
for (x in pv.range(50))]
-
for (y in pv.range(3, 9))])
-
.add(pv.Area)
-
.data(function(d) d)
-
.fillStyle(pv.Colors.category19.unique)
-
.bottom(function() let (c = this.cousin())
-
c ? (c.bottom + c.height) : 0)
-
.height(function(d) (d + 1) * 13)
-
.left(function() this.index * 3)
-
.root.render();
-
which produces 
.
Very cool indeed!
Related Content:
Hah! what a not-so-subtle teaser, “for something he and the Messaging team come up with one day ;).”
Protovis looks very interesting.
Protovis looks very nice, runs slick. the PolarClock demo is something I want in my house. haha.
very cool… but can we try to not make the code snippet a single line of code which is far too complicated to understand what is going on… why do people constantly feel that writing code in fewer lines is better?
There may be some slight (and I nanosecond) gains from doing this, but if you are trying to illustrate a point in terms of how easy it is to use this framework, wouldn’t you want the code to be understandable?
@PuckPuck – There is nothing wrong, and many things right, with a simple, declarative style. This looks to me like the design pattern where the methods of an object return the object itself, which lets the user chain the calls together. In this example the calls are nested to reflect the structure of the object itself. It looks like you could build a Panel object in the traditional way, assigning it to a named variable and calling the methods in order.
@JonathanLeech – I understand there is nothing wrong with the coding style, in fact i do it myself all the time…. BUT when you are trying to illustrate examples, for people to understand the code, does it really hurt to write code that explains itself? Does your right pinky hurt that much from hitting semi-colon?
It’s obvious the developers who wrote this code are quite advanced, and they want to target other advanced developers, yet because they wrote the code as complicated as possible, they just shunned the junior developers away… simplification isn’t always fewer characters.