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.
If you publish results that utilize phylotree.js, please cite the associated publication:
Stephen D. Shank, Steven Weaver, Sergei L. Kosakovsky Pond. phylotree.js - a JavaScript library for application development and interactive data visualization in phylogenetics. BMC Bioinformatics, 2018, Volume 19, Number 1, Page 1
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.