Interactive Features
Complex Charting
SVG Graphics

How can jsPhyloSVG help me?

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
);										

What about interactive features?

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>			

Cool. Tell me more!

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.


download version 1.55 here
If you use jsPhyloSVG, please be sure to cite us:
Smits SA, Ouverney CC, 2010 jsPhyloSVG: A Javascript Library for Visualizing Interactive and Vector-Based Phylogenetic Trees on the Web.
PLoS ONE 5(8): e12267. doi:10.1371/journal.pone.0012267

You might also be interested in Phylometrics.