How to use


Clone from GitHub

Use below command to clone PhyloCanvas repository from GitHub to your local machine

$ git clone https://github.com/ImpericalCollegeLondon/PhyloCanvas.git

Add to HTML

Use <script> tag to add PhyloCanvas to your HTML page. See example below.

<script type="application/javascript" src="/PhyloCanvas/src/scripts/PhyloCanvas.js"></script>

Remember to adjust the URL to suit the location of the PhyloCanvas code within your project


Initialize and Load your Tree

You only need 2 lines of code to get your phylocanvas instance up and running.

  • One to initialize the viewer and
  • Second to load the file.

var phylocanvas = new PhyloCanvas.Tree(div, [config object]); // initialize your tree viewer
phylocanvas.load(Newick / Nexus); // load your tree file

Where

div
ID of the <div> or the element itself used to draw the tree
config object
Optional parameters used to configure the tree See more config options
Newick
A string or a file that contains a Newick or Nexus formatted tree Sample Newick

Your final HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="application/javascript" src="PhyloCanvas.js"></script>
    <script type="application/javascript">
      window.onload = function() {
        // Initializing tree object
        var phylocanvas = new PhyloCanvas.Tree('phylocanvasDiv');
        var newick_str = "((B:0.2,(C:0.3,D:0.4)E:0.5)F:0.1)A;";
        phylocanvas.load(newick_str);
      }
    </script>
  </head>
  <body>
    <div id="phylocanvasDiv"></div>
  </body>
</html>
View live