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.

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/

Answer 2

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

Answer 3

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

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.