University of Glasgow

Roderic Page

One visualisation method [I keep coming back
too](http://iphylo.blogspot.co.uk/search?q=treemap) is the treemap. Each
time I experiment with them I learn a little bit more, but I usually end
up abandoning them (with the exception of using [quantum treemaps to
display bibliographic
data](http://iphylo.blogspot.co.uk/2011/01/quantum-treemaps-meet-bhl-and.html)).
But they keep calling me back.  
  
My latest experiment builds on some [earlier thoughts on quantum
treemaps](http://iphylo.blogspot.co.uk/2010/06/mashing-up-ncbi-and-wikipedia-using.html),
but tackles two issues that have kept bugging me. The first is that
quantum treemaps are limited to hierarchies that are only two levels
deep (e.g., family → genus → species). This is because, unlike regular
treemaps where you are slicing and dicing a rectangle of predetermined
size, when you construct a quantum treemap you don\'t know how big it
will be until you\'ve made it (this is because you want to ensure that
every item in the hierarchy can be displayed at the same size, and
fitting them in may require you to tweak the size of the treemap). Given
that taxonomic classifications have \> 2 levels this is a problem. One
approach is to construct quantum treemaps for the lower parts of the
classification, then pack those into a larger rectangle. This is an
instance of the [packing
problem](http://en.wikipedia.org/wiki/Packing_problem). After Googling
for a bit I came up across [this
code](http://pollinimini.net/blog/rectangle-packing-2d-packing/) for
packing rectangles, which was easy to follow and gave reasonable
results.  
  
The second problem is that I want the treemap to be interactive. I want
to be able to zoom in and out and navigate around the treemap. After
more Googling, I came across the
[Zoomooz.js](http://janne.aukia.com/zoomooz/) library which makes web
page elements zoom (for a pretty mind-blowing example of what can be
done see [impress.js](http://bartaz.github.com/impress.js/)), but I
decided I want to work with SVG. After playing with examples from Keith
Wood\'s [jQuery SVG](http://keith-wood.name/svg.html) plugin I started
to get the hang of creating zoomable visualisations in SVG.  
  
Here\'s a video of what I\'ve come up with so far (you can see this live
at <http://iphylo.org/~rpage/zoomrect/primates.html>). This is an
interactive display of the Catalogue of Life 2010 classification of
primates, with images from EOL. It\'s crude, there are some obvious
issues with redrawing images, labels, etc., but it gives a sense of what
can be done. With care this could probably be scaled up to handle the
entire Catalogue of Life classification. With a bit more care, it could
probably be optimised for the iPad, which would be a fun way to navigate
through the diversity of life.  
  

::: {style="text-align:center"}
::: {.iframe src="http://player.vimeo.com/video/43909541"}
:::

[Visualising primate classification](http://vimeo.com/43909541) from
[Roderic Page](http://vimeo.com/rdmpage) on [Vimeo](http://vimeo.com).
:::


One visualisation method I keep coming back too is the treemap. Each time I experiment with them I learn a little bit more, but I usually end up abandoning them (with the exception of using quantum treemaps to display bibliographic data). But they keep calling me back.

Using a zoomable treemap to visualise a taxonomic classification

I\'m taking a virtual part in Mendeley\'s
[Hack4Knowledge](http://hack4knowledge.eventbrite.com/) event. I\'m
using this a chance to explore some ideas about building novel
interfaces to bibliographic data in Mendeley. One idea is to display a
user\'s entire library in one screen. I think the user interfaces
employed by most bibliographic software are too conservative and there
some cool things that could be done. For example, see **A fluid treemap
interface for personal digital libraries**
([doi:10.1145/1065385.1065512](http://dx.doi.org/10.1145/1065385.1065512),
PDF available [from
CiteSeer](http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.105.1365)).  
  
One idea I\'m playing with is to display all a Mendeley user\'s papers
as a quantum treemap, with thumbnails of the papers and \"badges\"
indicating, for example, how many readers each paper has. The idea is
that at a glance you can see all your publications, and which ones are
being read the most. You can think of it as an \"ego wall\" --- a quick
way to see what others think about your work. Below is part of my
library. You can see the full treemap [here as an SVG
file](http://iphylo.org/~rpage/hack4knowledge/wall/wall.svg). Imagine
this as an iPad interface to a user\'s Mendeley library.  
  
![Wall](http://lh6.ggpht.com/-XRvRid4urqg/TfOxCbNx8PI/AAAAAAAAA58/MdTTibKBNpg/wall.png?imgmax=800){style="display:block; margin-left:auto; margin-right:auto;"
border="0" width="500" height="414"}  
  
Eventually I\'ll make this live. I\'m doing this yet as the script to
create the visualisation is slow due to the multiple requests I need to
make to get the necessary information. I have to get the list of a
user\'s papers from Mendeley, then I call the API for each paper to get
basic bibliographic details. I have to screen scrape the corresponding
paper\'s web page to get the thumbnail and the paper\'s UUID, which I
can then use to get the readership stats via Mendeley\'s API via yet
another API call. Sigh.  
  
Anyway, this is enough hacking for one day. Hope to spend some more time
on this project tomorrow.  
  
  
  


I'm taking a virtual part in Mendeley's Hack4Knowledge event. I'm using this a chance to explore some ideas about building novel interfaces to bibliographic data in Mendeley. One idea is to display a user's entire library in one screen. I think the user interfaces employed by most bibliographic software are too conservative and there some cool things that could be done.

Messaggi di Rogue Scholar

Using a zoomable treemap to visualise a taxonomic classification

Mendeley Hack4Knowledge: towards an "ego wall"