Cladogram, tree of life, cladistics, taxonomy in JS or canvas?

Question

Good people - I need some help to find a way to create an interactive cladogram or phylogenetic tree (yes, I have read all related posts, and do not find what I am looking for). The thing is, I need the nodes to be name-able. An example would be something like this

Most scripts I find are either applets, flash, or simply do not show the node classification, ie it would skip "feliformia" in this example. This is useless to me, as I would then end up with carnivore - anonymous node - anonymous node - anonymous node - tiger, and that is not good.

This tree will in theory cover all life, so it could get rather large, and get links and names in english and latin from database.

So: no flash, no applets. It must be horizontal, no supertrees (circular). I have gone through this http://bioinfo.unice.fr/biodiv/Tree_editors.html but most of them seems to be either old, not displaying sub-node levels, applets, or way too complex.

I imagine this would be a delightful job for canvas/jQuery..? And chances are, someone got there before me?

Any pointers much appreciated.

Note: if anyone out there would like to do something like this as a project, I will be happy to help, even though it would not benefit me for this project.This type of taxonomy is not as simple as it may seem, and I would be happy see this happen.

Edit: a year has passed; I still think this is a very interesting question. I have been out of the tech-world for a spell; so if anyone has found something that looks promising for a large-scale project... I am all ears.

Relive

It would be even more delightful job for HTML5's inline SVG. – Engadine

i have done some research on this, and i think that if someone actually made something really solid on this, there would be great interest in a lot of scientific circles. – Relive

herby - yep. I wish I had the time right now to really dig into it, but alas.. – Relive

A year has passed since I asked this, and maybe there are chances of the world moving forward? anyone come across something good? – Relive

Answer 1

I've been researching this same question myself for nearly a year now. The best library that I've found to date is d3.js, the successor to protovis.js. The good news is that the d3.js dendrogram and node-link tree should be sufficiently flexible for any/all of your needs; but the bad news is that you're probably going to have to write your own taxonomy logic and interactivity logic.

http://mbostock.github.com/d3/ex/cluster.html

http://mbostock.github.com/d3/ex/tree.html

To address herby, the d3.js libraries do, in fact, use HTML5's inline SVG.
Abigail

ps: Found a tutorial on using the dendrogram interactive and how to build the taxonomy logic. http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/

Liv

Abigail - you are a star. This might be the best direction yet! Thank you very very much. I have moved on from the abovementioned project, but actually; I am now working on even more complex projects, and this might just be - if not the ticket - at least the place to start! MUCH appreciated! – Relive

Thanks! Glad it helps. :) This has become my go-to toolkit for doing complex bioinformatics related visualizations. Can't recommend it enough. – Liv

I suspect this d3.js pedigree tree is even closer to what the OP was after. – Precarious

Answer 2

Have you looked at Wakanda? I think the datasource model may provide a structure that is suitable... http://www.wakanda.org/

Heldentenor

Answer 3

I actually put together a d3 script that does just this, find it here: https://github.com/ConstantinoSchillebeeckx/phylogram_d3

Complot

Answer 4

Phylotree.js is a good library for doing this in SVG using d3. It can read Newick strings and draw them with internal labels and collapsible nodes.

Brockington