Phylogenetic Tree Library For Browser And Node.js – figtree.js

The figtree.js JavaScript library makes uses of d3.js to render a phylogenetic tree using SVG.

Works both with browser and node.js.

How to use it:

Install the figtree.js package.

# NPM
$ npm install figtree --save

Create an empty SVG for the Phylogenetic tree.

<svg id="example"></svg>

Import the necessary modules.

import { Tree } from "./src/tree.js";
import { drawTree, addLabels, rotateAtNode } from "./src/figtree.js";

Prepare the tree nodes in the JavaScript.

const newickString =
        '((((((virus1:0.1,virus2:0.12)0.95:0.08,(virus3:0.011,virus4:0.0087)1.0:0.15)0.65:0.03,virus5:0.21)1.0:0.2,(virus6:0.45,virus7:0.4)0.51:0.02)1.0:0.1,virus8:0.4)1.0:0.1,(virus9:0.04,virus10:0.03)1.0:0.6);'

Initialize the figtree.js library.

const tree = Tree.parseNewick(newickString);

Draw the Phylogenetic tree.

drawTree(document.getElementById('phylogram_1a'), tree, { top: 10, bottom: 60, left: 10, right: 150}, rotateAtNode);

Add labels to the Phylogenetic tree.

addLabels(document.getElementById('example'), '.internal-node .node-shape', "This is an internal node - it is a putitive<br>common ancestor of the viruses to the right" );
addLabels(document.getElementById('example'), '.internal-node .node-label', "This is a support value - it gives the degree<br>of statistical support that the viruses to the<br>right cluster together");
addLabels(document.getElementById('example'), '.external-node .node-shape', "This is an external or leaf node - it represents<br>a sampled, sequenced virus");
addLabels(document.getElementById('example'), '.external-node .node-label', "This is an external or leaf node - it represents<br>a sampled, sequenced virus");
addLabels(document.getElementById('example'), '.branch', "This is a branch - it represents an<br>evolutionary lineage joining two nodes");
addLabels(document.getElementById('example'), '.internal-node #node_0', "The root node - represents the most recent<br>common ancestor of the whole tree");

Changelog:

03/21/2020

• adds hilightLayout

11/01/2019

• adds getClade and getClades to node and tree classes

10/29/2019

• updating to use data join in roughBauble and nodeupdate in rough

06/20/2019

• Added ability to order children by a custom function.