Mon

Apr 25
2005

Nat Torkington

Nat Torkington

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


tags:   | comments: 6   | Sphere It
submit:

 
Previous  |  Next

0 TrackBacks

TrackBack URL for this entry: http://blogs.oreilly.com/cgi-bin/mt/mt-t.cgi/3980

Comments: 6

  Another Nat [04.25.05 05:27 PM]

I'm always interested in people's attempts to pummel SVG into useful applications. However, spiral.svg is currently returning a 404.

  gnat [04.25.05 05:33 PM]

My bad, I left out "/~gnat" in the URL. I've edited the post and added it back in. Please try again or click here for SVG pain. Sorry!

  goon [04.25.05 11:40 PM]

To SVG or not?


I hate the fact there is no native support for SVG with a stock standard Firefox download (its being added in Fox 1.1). Is there any support for .png output in your examples? I can sort of see the advantages of SVG but at the moment but I have to jump through hoops to see anything.



    ... SVG is still waiting
    for standard browser
    support ... when it happens
    in Firefox 1.1 this kind of stuff is
    going to boom! [0]


For the moment this is why I like Graphviz. [1], [2] It has an independent language, dot. And while it may not have the immediate expressive power of SVG it works in graphical browsers now. Graphviz also allows you to use web based version Webdot [3].


Reference

  Ronan [04.26.05 04:46 AM]

You could do this with a client side image map. Generate the image using SVG on the server. The bits of the image that you want pop-ups for are anchor tags with no href attribute and the title/alt attributes set to the text you want displayed. I agree that SVG should make doing pop-ups easier however it's not too hard when you know how!

  Matt Jones [04.26.05 09:02 AM]

Hey Nat, great to see you're playing with info visualisations.

Not a comment on the tech, but I'm really hoping more people get into working through the problems of understanding the floods of info we're subjected to using novel info viz techniques, and we can have some more diverse interfaces than just text to filter and prioritise info in web2.0...

Ben Schniederman makes some good arguements in his book "Leonardo's Laptop" about this, and I wonder how long tools and techniques from vertical apps like bioinformatics and GIS become mainstream?

have you seen some of the stuff that the digital art community Rhizome used to commission for instance? Like 'starry night' from 1999 for instance: http://rhizome.org/starrynight/ (more at http://rhizome.org/interface/)

Of course Martin Wattenberg who collaborated on these pieces is now famous for his HistoryFlow visualisations of the Wikipedia, also, which I was trying to get hacked into a 'sparkline' version for giving a quick 'eyebite' of a trust metric for wikipedia articles.

Sparklines and infoviz techniques are getting *some* traction, as Anil Dash commented recently -

"I'm just struck by how useful this kind of information presentation is, and I'm wondering why we don't see this kind of information density more often."

http://www.dashes.com/anil/2005/04/24/sparklines_alm

but perhaps some more of the O'Reilly hackjuice and focus could go their way, and start a grassroots 'infoviz hacks' movement...

  Michal Migurski [04.27.05 10:35 AM]

Beautiful. I remember reading someplace that autistic math savants are uniquely adept at problems that can be visualized radially, like these spirals. SVG is unfortunate, though - Flash definitely has wider support for the kinds of interactivity that such a visual browser would want.

Post A Comment:

 (please be patient, comments may take awhile to post)






Type the characters you see in the picture above.