Working with data in protovis

For the past year or so I have been dabbling with protovis. I don’t have a heavy CS background but protovis is supposedly easy to pick up for people like me, who are vaguely aware that computers can make calculations but who need to check the manual for the most mundane programming instructions.

I found was while it’s reasonnably easy to modify the most basic examples to make stuff happen, it is much harder to understand or adapt the more complex ones, let alone to create a fairly complex visualization.

The stumbling block for me was the use of the method data. Data is used to feed all the other protovis methods with, well, data. In the simplest examples, the data which is passed is very plain and simple and so easy to understand. But, for slightly more advanced uses, the shape of data is increasingly complex and the very powerful methods that protovis uses to process and reshape data are just out of reach for a noob.

So I started documenting my struggle with data, first for my own use, and eventually realized I could share what I learned. This is it.

I split this tutorial in 5 parts.

  1. First, we’ll look at the humble arrays and how protovis works with them.
  2. Then, we’ll talk about multi-dimensional arrays, associative arrays, hierarchy and inheritance.
  3. Third, we’ll take a break from protovis and look at the javascript methods to work with arrays, such as sorting.
  4. [update] Since I first published the array part I wrote a supplement
  5. We’ll then check out the powerful protovis data processing methods, such as those who reshape complex arrays.
  6. Finally, we’ll see how data must be prepared to work with the built-in layouts, such as treemaps, force-directed layouts etc.

And as a bonus, I have also deconstructed several interesting (but not immediately accessible) examples from the gallery:

To make the best use of this material, it would be helpful to know a bit about protovis. The best ways to get started are:

Now that’s said, en route for the 1st part!


10 thoughts on “Working with data in protovis

Leave a Reply