Protovis is an open-source Javascript visualization library by the Stanford Visualization Group and has become one of the preferred tools in our arsenal. If you want to get started with the popular toolkit too, Jerome Cukier has a comprehensive tutorial about how to work with data in Protovis. The tutorial is split in five parts covering using (1, 2), sorting (3) and reshaping (4) arrays as well as how to structure data to work with complex structures like treemaps or force-directed layouts (5).

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.

What I found was, while it’s reasonably 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. So I started documenting my struggle with data, first for my own use, and eventually realized I could share what I learned.

—Jerome Cukier

Be aware that the content is laser focused on how to deal with data instead of shiny visualization goodness. That said, if you plan to create custom visualizations with Protovis, I highly recommend to have a look at Jerome’s notes.