PhyloCanvas
PhyloCanvas is a HTML5 phylogeneric tree viewer written entirely in browser-native JavaScript, using no external libraries, and uses the Canvas element. The intention of PhyloCanvas is to make a tree viewer that is as widely reusable, extensible and performant.
Our aim with PhyloCanvas is to provide a simple API for embedding trees within HTML pages. Newick or Nexus files can be visualised and parameters set to provide data overlays, tree shape, node labelling and size.
Archive Page
This page is maintained as a historical record and is no longer being updated.
About
PhyloCanvas is utilised within http://Microreact.org and http://wgsa.net
The PhyloCanvas code is Object-oriented and uses the prototype of a JavaScript “class” to describe the class functions.
As well as providing an organisational structure for the code, using the prototype means that the code for the functions isn’t copied into memory for each instance of PhyloCanvas.
The rendering engine for PhyloCanvas is designed to minimise the amount of load that is placed on the client browser. As such the rendering events only fire when the user performs an action such as zooming or panning through the tree.
The rendering itself is split into 2 phases, a pre-render to perform all the calculations related to determining the postion and layout of the tree, leaving only the actual drawing of the tree at the correct positon (offset) and zoom level.
When a subtree of the main tree is redrawn from a branch or a branch is rotated the tree reset and then pre-render must be re-run.