Visualizing data with Protovis

In this month's Communications of the ACM, Heer, Bostock and Ogievetsky provide an eye-opening overview of the latest visualization techniques in A Tour Through the Visualization Zoo. The graphs and figures in the article were all produced with Protovis, an open-source library developed at Stanford for producing visualizations using JavaScript and SVG.

I've reproduced a few of my favorite visualizations from the article below.

The first is an index chart which shows the relative change in stock prices of several tech companies over time. The gain/loss factor is based on a fixed point in time (the red line). You can see some correlation between the stock prices, and clearly Apple is the overall winner. The online version allows you to change the location of the red line.




This is a choropleth map showing obesity rates in the US in 2008. The online version allows you to slide the date back to 1995. As you move the dates forward, you can see how the US population gets fatter, with the highest proportion of obesity rates focused in the South. There's a saying here in Arkansas: At least we're not Mississippi!




When you view the obesity rates with a Dorling cartogram, you see that Arkansas actually has fewer obese people than Colorado!




The next couple of graphs show how to visualize networks. Both visualize character co-occurrence in chapters from Victor Hugo's novel Les Misérables. The first is a force-directed layout. The node in the middle is, of course, Valjean. The online version allows you to pull nodes around and watch them re-arrange themselves.




The nodes can also be rearranged in an arc diagram as shown below.