A JavaScript library for developing applications and interactive visualizations involving phylogenetic trees, written as an extension of the D3 hierarchy layout. It generates high quality SVG vector graphics, allows a great degree of customizability (CSS or JavaScript callbacks), and comes with a lot of built-in convenience features.

Documentation for phylotree.js can be found here.

With phylotree.js, it is possible to interface phylogenetic trees with a variety of other software to produce custom, interactive visualizations of phylogenetic data. A simple example entails a small tree that interacts with a D3.js bar chart:

while a complex example involves a large tree that interacts with a structural viewer:

A gallery of examples is a good place to learn different ways that phylotree.js can be used to display and annotate trees.

A full-featured web application based on phylotree.js, implemented in index.html.

phylotree.js is also used by the 2017 revision of the datamonkey.org server for molecular sequence analysis.

• Capable of handling multiple selection categories for comparative analysis.
• Several mechanisms for selecting branches, including by clade, path to root, individual branches, internal branches, leaves, and branches that are nearby after layout.
• Runs entirely in the browser, including Newick/PhyloXML/NexML parsing.
• Can handle trees with thousands of tips.
• Supports linear, radial, scaled branch, tip-aligned, and scaled tip size views.
• The viewer can be constrained to fit in a given SVG box, or scale based on the size of the tree.
• Numerous interactive features, including
  • Scaling
  • Animated rerooting
  • Ladderization
  • Clade collapse and hiding to explore large trees
  • Node, clade, and subtree selection
  • Tools to automatically select subsets of tree branches based on conditions.
• Style customizations based on CSS and JavaScript callbacks
  • Color branches and tips, including gradient shading for continuous traits.
  • Customize the way tip names are displayed
  • Transform branch lengths based on branch attributes (e.g. a non-linear scale).
  • Redefine the way a tree is displayed by writing custom CSS
• Available on npm to facilitate modern JavaScript development.

See package.json for dependencies.

Assuming that ./node_modules/.bin is on your $PATH, run

yarn run develop

This will run webpack in watch mode and start a local server (default port is 8080). Refresh upon editing to view changes.

Documentation was created using sphinx-js. Install with

pip install -r requirements.txt

and build with

npm run docs

Run tests using mocha.