Skip to content

guignonv/phylotree.js

 
 

Repository files navigation

phylotree.js

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

Documentation for phylotree.js can be found here.

Examples

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:

Alt Text

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

Alt Text

Gallery

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

Standalone web application

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

Molecular evolution platforms

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

Features

  • 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.

Dependencies

See package.json for dependencies.

Development

Local development

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

Documentation was created using sphinx-js. Install with

pip install -r requirements.txt

and build with

npm run docs

Tests

Run tests using mocha.

About

Interactive viewer of phylogenetic trees

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 50.3%
  • HTML 49.1%
  • CSS 0.6%