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

Question

Good people - I need help finding a way to create an interactive cladogram or phylogenetic tree (yes, I read all the related posts and did not find what I was looking for). The fact is that I need nodes that can be called names. An example might be something like this.

Most of the scenarios that I find are either applets, or flash, or simply do not show the node classification, that is, feliformia will be omitted in this example. This is useless to me, because in the end I get a carnivore - anonymous node - anonymous node - anonymous node - tiger, and this is bad.

This tree will theoretically span a lifetime, so it can grow quite large and get links and names in English and Latin from a database.

So: no flash, no applets. It should be horizontal, without add-ons (circular). I went through this http://bioinfo.unice.fr/biodiv/Tree_editors.html but most of them seem old, not displaying sub-node levels, applets or too complex.

I assume it will be a delightful job for canvas / jQuery ..? And most likely someone got to me?

Any pointers are greatly appreciated.

Note: if someone wants to do something like this as a project, I will be happy to help, although it will not bring me any benefit for this project. This type of taxonomy is not as simple as it might seem, and I would be happy if that happened.

Edit: a year has passed; I still think this is a very interesting question. I was outside the technological world for a spell; therefore, if someone found something promising for a large-scale project ... I’m all ears.

Answer 1

I myself have been dealing with this issue for almost a year now. The best library I've found to date is d3.js, the successor to protovis.js. The good news is that the d3.js dendrogram and the node-link tree should be flexible enough for any / all of your needs; but the bad news is that you probably have to write your taxonomy logic and interaction logic.

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

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

To refer to herby, the d3.js libraries really use the HTML5 embedded SVG.
Abigail

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

Answer 2

Have you looked at Wakanda? I think a data source model can provide a suitable structure ... http://www.wakanda.org/

Answer 3

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