SVG and Circular Visualizations

I spent this afternoon playing with SVG in Perl to generate a spiral visualization of when we release our books. The result is here (you’ll need the SVG plugin, but there’s a story behind it …

But first, what are you looking at? The spiral is a timeline. Each blob represents a month when we released books, and the size of the blob is proportional to the number of books released (red spot = this month). The lines radiating out from the center, formed by the blobs, correspond to months–January is at 3 o’clock. You can watch the size of the blobs to get a feel for how we’ve increased and decreased production in that month over the years. For example, look at October, November, and December (12, 1, and 2 o’clock respectively). Look for last year’s massive push for Nov titles.

I did an initial cut at this visualization using GD, but realized that I wanted interactivity. I want to be able to hover the mouse over a spot and see details (“February 2002, 12 titles released”). I figured that’s the kind of thing that SVG should be good at, so off I went.

I then spent the rest of the afternoon banging my head against this problem. SVG doesn’t have a simple way to pop-up over the cursor, so I thought I’d put the SVG file into an iframe in an HTML document. Then when you hover the mouse over a blob, javascript would change the contents of a span and voila! You’d see the details. Unfortunately, I failed to take into account that SVG can’t talk outside its iframe on anything but IE. I asked #svg and got confirmation that I was doomed.

There are ways to do popups in SVG, but they’re hackier than I’d like. I’m thinking of turning to Flash, or using Javascript to catch mouse events over a static image. Unfortunately, I only had an afternoon to play with it, so I’m not likely to try either system soon.

–Nat