top of page


BioCodeKb - Bioinformatics Knowledgebase

Phylotree.js is a application module that allows interactive data visualization within the browser and on the web. Its design allows customization by providing several abstractions most commonly associated with phylogenetic tree construction and manipulation. The software can be useful for JavaScript applications that involve user selecting portion phylogenetic trees for downstream consumption.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, gives a great degree of customizability and comes with a lot of built-in convenience features.

While several JavaScript packages for visualizing phylogenetic trees exist, most are best characterized as frameworks that are designed with a specific set of tasks in mind.

Phylotree.js implements many abstractions in addition to features, and comes with a documented application programming interface, thus promoting interoperability and extensibility. Example applications include a tool to visualize and annotate phylogenetic trees, a web application for comparative sequence analysis, a structural viewer that interacts with a large phylogenetic tree, and an interactive tanglegram.

By having a variety of built-in features and several core abstractions, phylotree.js has a demonstrable ability to allow to users to select portions of a tree in a wide variety of ways and interface these selections with downstream components of an application. Phylotree.js is capable of serving as a “glue” component between parts of an application. Crossings can represent interesting evolutionary events, or highlight the disparity between a single verses multi-tissue tree.

With phylotree.js, it is possible to interface phylogenetic trees with a variety of other software to produce custom, interactive visualizations of phylogenetic data.

Phylotree.js is licensed permissively under the MIT license, is well documented, and contains a gallery of examples. The code at time of writing is available as Additional file. All the minor ttols related to branches, nodes and clades that collapse are available in “Options” method.

Some features are enlisted here;

  • 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

  • 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

  • Redefine the way a tree is displayed by writing custom CSS

  • Available on npm to facilitate modern JavaScript development.

It supports Newick format and XML for trees. A new update of PhyloTree, Build 17, is introduced, having nearly 5.5 thousands halogroups.


Need to learn more about PHYLOTREE and much more?

To learn Bioinformatics, analysis, tools, biological databases, Computational Biology, Bioinformatics Programming in Python & R through interactive video courses and tutorials, Join BioCode.

bottom of page