Interactive Tree

You will notice that the code is exactly the same as the previous Ajax Loading example. The one addition is the library 'unitip'. Because all nodes are able to be hijacked by javascript, unitip can be used to hijack the mouse onRollover, and display a more elaborate tooltip. Of course this is an optional component.

	<link type="text/css" rel="stylesheet" href="/js/yui/build/cssfonts/fonts-min.css" /> 
	<script type="text/javascript" src="/js/raphael/raphael-min.js" ></script> 
	<script type="text/javascript" src="/js/yui/build/yui/yui.js"></script> 
	<script type="text/javascript" src="/js/jsphylosvg-min.js"></script> 
	<!-- unitip -->
	<link rel="stylesheet" type="text/css" href="/js/unitip/css/unitip.css" > 
	<script type="text/javascript" src="/js/unitip/js/unitip.js"></script> 	
	<script type="text/javascript">
	window.onload = function(){
		YUI().use('oop', 'json-stringify', 'io-base', 'event', 'event-delegate', function(Y){
			var uri = "/trees/3-coffee.xml";
			function complete(id, o, args) {
				var data = o.responseXML; // Response data.
				var dataObject = {
							xml: data,
							fileSource: true
				phylocanvas = new Smits.PhyloCanvas(
					800, 800,
				init(); //unitip
			Y.on('io:complete', complete, Y);
			var request =;
	<div id="svgCanvas"> </div>

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.