Thursday, October 11, 2007

Visualising very big trees Part VI

I've tidied up the big phylogeny viewer mentioned earlier, and added a simple web form for anybody interested to upload a NEXUS or Newick tree and have a play.


To create your own tree viewer, simply go to and upload a tree. After some debugging code and images scroll past, a link to the widget appears at the bottom of the page. I'll tidy this all up when I get the chance, but for now it's good enough to play with.


Rutger Vos said...

It looks great, very nice. I may have missed this in your posting series but is the server side code available somewhere? Thanks!

Roderic Page said...

I'll try and package it up by next week. The core module is a commandline program in C++ that parses NEXUS files and spits out files that are converted into images by ImageMagick. The web server code is a simple PHP script. The only slightly sticky point is the font, which is not free. I use Clarity, and this is hard coded into the program. It's a nice font, and is very cheap ($US 12). I'm not aware (i.e., haven't looked for) for any Open Source equivalents, if that's an issue.

Rutger Vos said...

Is the C++ part using NCL? What's the intermediate format that ImageMagick works with? I'd be very interested in figuring out if this could be done in SVG, with EcmaScript moving a bounding box around and a cloned version of the tree being shown more zoomed in. It'd be nice to be able to attach other xml (links, metadata) to the nodes as well, but the overhead is probably considerable on large trees.

Roderic Page said...

Yes, I use an early version of NCL (with some modifications), plus code from TreeView X.

I originally started using SVG, but ran in to issues of browser support (especially for scrolling, some browsers eat the SVG when it scrolls out of view), and concerns about the size of the SVG document. I also think bitmap fonts are more legible at small sizes (SVG fonts are usually rendered antialised). As a result I moved to bitmaps. I generate a MVG file, from which ImageMagick's convert program generates bitmaps. In order to avoid a massive bitmap (I think there are problems if the bitmap's height is greater than 32767 pixels) I generate tiles 256 pixels height by clipping the tree drawing.

However, my code can generate SVG, so both approaches can be explored. I agree that SVG is very appealing in terms of image quality and ease of interaction.

Rutger Vos said...

In an ideal world I suppose the svg outside of the bounding box could be evaluated lazily by pulling it in over ajax as - well, just before - it comes into view. I've recently revisited my svg tree drawing code for a paper that needed likelihood pies (and after one of Mike Steel's students contributed mightily to the code during GSoC) and I now believe it could be taken in that direction. Given copious amounts of spare time, obviously - having client and server negotiate the coordinates dynamically would be a challenge.