Elastic lists using Protovis

I've been seeing more and more list-based visualizations used for data selection showing up in BI software. These types of selection interfaces are especially prominent in Qlikview and SAP BusinessObjects Explorer (which you can try on theweb).

Ever since seeing Moritz Stefaner's implementation of Elastic Lists, I've been a bit dissatisfied with the implementations in enterprise BI tools, including the ones listed above. "Elastic" lists leverage the list format to visualize characteristics of the data by tying the size of the bar representing a column value in the selection list to a metadata metric - in this case the probability that a given column value will occur in a dataset.

In order to help myself understand the strengths and weaknesses of this type of visualization more thoroughly, I started to experiment with list-based visualizations in Protovis (a Javascript-based visualization library using SVG for rendering). Eventually, I added in elasticity and gave the list selection the power to drive a second visualization. It uses the cars dataset and visualization from the Protovis examples to demonstrate driving a second visualization with the list selection. (Note: the coordinates on the second visualization are reversed for reasons that I haven't looked into at the moment.)

That experiment is now working well enough that I thought I'd publish it so that others can comment, use the code (but really, it's a bit of a mess, so be wary), and experiment with the concept. If you want to add some capability, go right ahead and fork the project on Github.

For my part, I will likely do a more thorough analysis of list-based visualization in BI tools eventually, but for now I think I can safely say that anywhere a list appears, there is little excuse for lack of "elasticity" in the visualization.

Note: This visualization will only work in browsers that support the SVG standard. It does not work in IE6, 7, or 8. Pretty much any other browser (Firefox, Chrome, Safari, etc.) should work fine.

You can view a static image of the visualization below.