Saturday, August 18, 2007

Visualising very big trees, Part V

Inspired partly by the image viewers mentioned earlier, and tools like Google Finance's plot of stock prices, I've built yet another demo of one way to view large trees.

You can view the demo here. On the left is a thumbnail of the tree, on the right is the tree displayed "full scale", that is, you can read the labels of every leaf. In the middle appears a subset of any internal node labels. Top right is a text box in which you can search for a taxon in the tree.

You can navigate by dragging the scroll bar on the left, dragging the big tree, or using the mouse wheel (and you can jump to a taxon by name). It has been "tested" in Safari and Firefox on a Mac, I doubt it works on Internet Explorer. Getting that to happen is a whole other project.

The viewer is written entirely in HTML and Javascript, the underlying tree images (and some of the HTML and Javascript) are generated using a C++program that reads and draws trees, and I use ImageMagick to generate actaual images.


blackrim said...

hi rod,
i particularly like this approach. at least the direction. before you posted this i was about to mock up a multiple (dynamic) "frame" (not html frame) example where you could add or remove frames to the left or right for navigation. that may not make sense, however in short, i like this idea as a starting point to the visualization.
take care

blJOg said...

Hi Rod,
Great stuff, I like the little arrow and the search box which highlights the taxon is really nifty. It is great that so much info can be visualized in such a small window and with the added functionality of being able to find a taxa.

keesey said...

Very nice! Now I can actually see Myrmecobius.

One suggestion: You might also show the named clade areas on the right. Right now it's a bit hard to see exactly where the boundaries are; e.g., if I didn't know better, it'd be very hard to tell whether Myrmecobius was a dasyurid or not. (Of course, I realize that's not the primary point of this viewer, but....)

Andrew Hill said...

I like this technique a lot. Just a thought for the next version, add the AccordionDrawer function from TJP. Have scrolling on the right pane accordion out a slightly larger locality on the left pane. I think this may increase the feasible tree size a bit more.
Voicing a desire, how about big trees in TreeMap?

sexy said...