jsPhyloSVG is an open-source javascript library specifically built for rendering highly-extensible, customizable phylogenetic trees. jsPhyloSVG can render complex trees, yet offers a simple method to do so. It leverages the recent XML schema definition specified for phylogenetic trees, phyloXML.
Here is a quick example of how to render a rectangular phylogenetic tree:
phylocanvas = new Smits.PhyloCanvas( dataObject, // Newick or XML string 'svgCanvas', // Div Id where to render 1000, 1000 // Height, Width in pixels );
The same tree, except this time a circular tree:
phylocanvas = new Smits.PhyloCanvas( dataObject, // Newick or XML string 'svgCanvas', // Div Id where to render 1000, 1000, // Height, Width in pixels 'circular' // Type of tree );
The XML definition already includes the option of adding a hyperlink reference and description. jsPhyloSVG taps into this, and formats the text nodes with this information.
Here's an example of what the XML format looks like:
<clade> <name>Subterranean Termite</name> <branch_length>0.17793</branch_length> <annotation> <desc>GQ502663.1 Gut clone Cf8-01 </desc> <uri>http://www.jsphylosvg.com/GQ502663 </uri> </annotation> </clade>
To get started, take a look at our documentation. You will find plenty of code and examples.
We are always looking for ways to make our library better. So please, let us know what you like, and how we can make this better for you! If you create extensions, let us know so that the rest of the community can benefit.