May 16, 2008
delicious URL History - Hyperbolic Tree Visualisation
Over the last few weeks and months, several javascript visualisation libraries have arrived on the scene that allow you to create quite complex visualisations within the browser.
For almost as long as I can remember, I've been completely taken by computer visualisations, but almost completely unable to create them.... Something to do with not being able work out how to do the drawing bit, I guess?
Which is why I like the javascript visualisation libraries... as long as you can get your data into the right data structure, the libraries will display it for you. And being javascript - a lite scripting language that's easily abused and runs client side in the browser (no server or additioanl libraries required) - there's no time consuming recompilation of overcomplicated, syntactically nightmarish code;-) (although it must be said the browser can sometimes slow to a near halt;-)
Anyway, this morning I had a little tinker with the outstanding JavaScript Information Visualization Toolkit (JIT), a javascript library that plots treemaps, hyperbolic trees, radial graphs and "space trees".
Here's an example of my first attempt - a hyperbolic tree showing the people who have bookmarked a particular URL on delicious, and how they hae tagged it.
If you want to try it out yourself, here it is: social life of a url (delicious, hyperbolic tree).
You can visualise any url using the scheme: http://ouseful.open.ac.uk/jit/examples/hypertree-demo.php?url=http://www.york.ac.uk/ (though you should probably escape the URL).
If the browser warns you the script it taking a long time to continue, just tell it to continue ;-)
The data for the tree is pulled on from a Yahoo pipe (where else?!;-) which looks up the URL on delicious and returns the people who have bookmarked it and the tags they used (view delicous comments for a bookmarked URL pipe). A tiny bit of client side handling puts the JSON output from the pipe into the data structure required by the JIT.
All in all, this took maybe 90 mins from scratch, 20 mins of which were spent wondering why this didn't work:
for (var j; j < tags.length; j++) { ... }
[Ans: j needed initialising - var j=0 ]
Tags: visualisation, delcious
Posted by ajh59 at May 16, 2008 03:23 PM