Working with data in protovis

7 February, 2011 (19:31) | Uncategorized | By: jerome

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!


Pingback from Tweets that mention Jerome Cukier » Working with data in protovis —
Time February 11, 2011 at 5:59 am

[...] This post was mentioned on Twitter by Joe Mako, Kaizer Billimoria. Kaizer Billimoria said: RT @joemako: Great 5-part tutorial series on #protovis by @jcukier : [...]

Pingback from Working with Data in Protovis on
Time February 17, 2011 at 5:34 pm

[...] 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 [...]

Pingback from Jerome Cukier » La france qui exporte
Time February 18, 2011 at 8:10 pm

[...] explanation follows for those interested in the code proper) Now following last week’s tutorial, of course it had to be done in protovis. Actually it illustrates some interesting principles of [...]

Comment from Dan Brickley
Time March 6, 2011 at 12:23 pm

You have a bad link here under ’5′ to … I think you might mean

Comment from jerome
Time March 6, 2011 at 5:01 pm

thanks for pointing that out!

Pingback from Jerome Cukier » More fun with arrays in protovis
Time March 15, 2011 at 6:21 pm

[...] March, 2011 (18:21) | protovis | By: jerome In my short tutorial on working with data and protovis I briefly covered some standard javascript and protovis methods to work with arrays. The more I [...]

Pingback from Wizualizacja danych | Pearltrees
Time April 6, 2012 at 1:56 pm

[...] So I started documenting my struggle with data, first for my own use, and eventually realized I could share what I learned. Jerome Cukier » Working with data in protovis [...]

Pingback from Part 2: The essential collection of visualisation resources可视化编程语言和环境 @ dodo糯
Time May 16, 2013 at 4:08 am

[...] Good examples and references: Protovis Gallery | EagerEyes | Jerome Cukier [...]

Pingback from Powerful and Essential Programming languages : Data Visualization Geeks | Gautam Anand
Time September 27, 2013 at 12:18 pm

[…] Examples/references: Examples, EagerEyes, Jerome Cukier […]

Pingback from 第二部分:可视化编程语言和环境 –
Time November 5, 2013 at 11:52 am

[…] 精彩案例和站点:Protovis Gallery | EagerEyes | Jerome Cukier […]

Write a comment