ALL Metrics
-
Views
-
Downloads
Get PDF
Get XML
Cite
Export
Track
Web Tool

treeWidget: a BioJS component to visualise phylogenetic trees

[version 1; peer review: 1 approved, 1 approved with reservations]
PUBLISHED 13 Feb 2014
Author details Author details
OPEN PEER REVIEW
REVIEWER STATUS

This article is included in the Phylogenetics collection.

This article is included in the EMBL-EBI collection.

This article is included in the BioJS collection.

Abstract

Summary: Phylogenetic trees are widely used to represent the evolution of gene families. As the history of gene families can be complex (including lots of gene duplications), its visualisation can become a difficult task. A good/accurate visualisation of phylogenetic trees - especially on the web - allows easier understanding and interpretation of trees to help to reveal the mechanisms that shape the evolution of a specific set of gene/species. Here, I present treeWidget, a modular BioJS component to visualise phylogenetic trees on the web. Through its modularity, treeWidget can be easily customized to allow the display of sequence information, e.g. protein domains and alignment conservation patterns.
Availability: http://github.com/biojs/biojs; http://dx.doi.org/10.5281/zenodo.7707

Introduction

A phylogenetic tree is a branching diagram showing the inferred relationships of genes or species. Reconstructing a phylogenetic tree is a routine task in most evolutionary-related analyses and a number of databases exist containing precomputed phylogenetic trees (e.g. TreeFam1, Ensembl Gene Trees2, Panther3). These reconstructed trees can vary considerably in the number of gene/species shown and in their complexity. While there are many offline tools available to visualise phylogenetic trees (e.g. ETE4), the number of online tools for this purpose is rather limited. Some of them are written in Java and tend to become slow when the number of nodes/edges increases (e.g. Archaeopteryx5). Others written in JavaScript, are therefore faster and more scalable, but do not allow the additional display of useful sequence annotation, e.g. protein domains and alignments. (e.g. phyloWidget6, jsPhyloSVG7). Yet other tools offer that functionality but are not available for download, customization or to be embedded into the users’ own websites (e.g. iTol8). Despite its widespread use in Bioinformatics, biological web applications for viewing phylogenetic trees are usually implemented with no standard reutilisation guidelines in mind.

Here I present treeWidget, a BioJS9 component written in JavaScript to visualise phylogenetic trees on the web. treeWidget can be easily integrated into websites and customized. To my knowledge, this is the first modular tree visualisation component.

The treeWidget component

The treeWidget component has been developed as part of the TreeFam project and follows the standards set by the BioJS registry (1, see Figure 2 for an example).

The BioJS registry is a centralised repository of BioJS components hosted at the European Bioinformatics Institute. treeWidget uses the JavaScript library D3 for building trees10. It reads trees in JSON format (http://www.json.org/) and plots them as scalable vector graphics (SVG, see the treeWidget component documentation for a working example of a JSON-formatted tree). Additionally, treeWidget can plot annotation in a separate SVG. This way the tree diagram stays fixed whenever the annotation changes (e.g. switching from a domain to a sequence alignment view). treeWidget automatically scales the SVG according to the tree’s height and so will work with small trees containing only 3 leaves up to trees with several hundreds of leaves by plotting the tree size according to the tree height (number of internal nodes).

To make the leaf names of gene trees more meaningful, users can add additional information (e.g. gene name, source species, common name, gene function, etc) to the JSON file. treeWidget will then plot this information next to the tree leaves (see Figure 2). treeWidget can either draw an ultrametric tree (all leaves have the same branch length) or a tree with estimated branch lengths and inner nodes can be labelled with taxon names and bootstrap values.

In cases where the gene trees contain too many leaves, it is useful to start looking at the gene tree by focussing on a specific part of the tree. This could be, for example, a pig gene that the user is particularly interested in. treeWidget allows highlighting of a specific gene and collapsing of sister clades to hide less relevant parts of the tree display (see Figure 1). These collapsed clades can be expanded/collapsed by a mouse click. To make the identification of related species in a gene tree easier, treeWidget colours pre-selected taxonomic clades (see Figure 2).

95b23eb8-002c-4fa5-a112-e5ff19e79604_figure1.gif

Figure 1. Gene tree with focus on the CCNC gene in pig.

The surrounding sister clades (Carnivora, Cetartiodactyla, Laurasiatheria) are collapsed. They can be expanded by clicking on the node.

Application

treeWidget can be used to visualise the evolution of species but also that of genes as it is done on the TreeFam website (http://www.treefam.org). TreeFam’s main goal is to present phylogenetic trees of gene families across the animal tree of life. TreeFam also predicts orthology/parology relationships: we speak of orthologs when two genes in different species are the result of a speciation event, whereas paralogs are genes stemming from a duplication event. The treeWidget component allows the display of this information by labelling the internal nodes of each gene tree as either speciation or duplication events. Additionally, the treeWidget component displays patterns of alignment conservation as well as matches of Pfam11 protein domains on each sequence in the database. In Figure 2 the conserved alignment pattern from the underlying protein sequence alignment is shown. The white alignment parts represent gaps and green parts are aligned parts. Visualising alignment conservation in conjunction with Pfam domains along a gene tree gives useful insights about the evolution of domain architectures12. Furthermore, this view can be used to spot problems with assembled genes (split genes or falsely assembled genes).

95b23eb8-002c-4fa5-a112-e5ff19e79604_figure2.gif

Figure 2. The treeWidget view showing a part of the BRCA2 gene tree with clades coloured according to taxonomy.

Conclusions

The treeWidget component provides a platform for the exploration of complex phylogenetic trees depicting the evolution of large gene families with many duplication/speciation events as well as displaying sequence annotation features. Visualising such complex data allows researchers to see interesting features for further study. I expect this component to be particularly useful to developers and users alike, requiring little technical knowledge for its full functioning.

Software availability

Zenodo: BioJS TreeWidget component, doi: 10.5281/zenodo.775113

GitHub: BioJS, http://github.com/biojs/biojs

Comments on this article Comments (0)

Version 1
VERSION 1 PUBLISHED 13 Feb 2014
Comment
Author details Author details
Competing interests
Grant information
Copyright
Download
 
Export To
metrics
Views Downloads
F1000Research - -
PubMed Central
Data from PMC are received and updated monthly.
- -
Citations
CITE
how to cite this article
Schreiber F. treeWidget: a BioJS component to visualise phylogenetic trees [version 1; peer review: 1 approved, 1 approved with reservations]. F1000Research 2014, 3:49 (https://doi.org/10.12688/f1000research.3-49.v1)
NOTE: If applicable, it is important to ensure the information in square brackets after the title is included in all citations of this article.
track
receive updates on this article
Track an article to receive email alerts on any updates to this article.

Open Peer Review

Current Reviewer Status: ?
Key to Reviewer Statuses VIEW
ApprovedThe paper is scientifically sound in its current form and only minor, if any, improvements are suggested
Approved with reservations A number of small changes, sometimes more significant revisions are required to address specific details and improve the papers academic merit.
Not approvedFundamental flaws in the paper seriously undermine the findings and conclusions
Version 1
VERSION 1
PUBLISHED 13 Feb 2014
Views
29
Cite
Reviewer Report 24 Mar 2014
Stephen A. Smith, Ecology and Evolutionary Biology, University of Michigan, Ann Arbor, MI, USA 
Approved
VIEWS 29
treeWidget is a nice feature full JavaScript tree viewer. This is a relatively straightforward announcement of the tool and I see no major problems. Below are some comments for the author's consideration.

Major
The discussion of the license is not in the ... Continue reading
CITE
CITE
HOW TO CITE THIS REPORT
Smith SA. Reviewer Report For: treeWidget: a BioJS component to visualise phylogenetic trees [version 1; peer review: 1 approved, 1 approved with reservations]. F1000Research 2014, 3:49 (https://doi.org/10.5256/f1000research.3676.r4248)
NOTE: it is important to ensure the information in square brackets after the title is included in all citations of this article.
Views
53
Cite
Reviewer Report 25 Feb 2014
Jaime Huerta-Cepas, Structural and Computational Biology Unit, EMBL European Bioinformatics Institute, Heidelberg, Germany 
Approved with Reservations
VIEWS 53
TreeWidget is a handy JavaScript component for the visualization of phylogenetic data. It is currently used to display trees in the TreeFam database and allows for inline representation of rectangular trees, alignments and sequence domains. After testing the application with trees of ... Continue reading
CITE
CITE
HOW TO CITE THIS REPORT
Huerta-Cepas J. Reviewer Report For: treeWidget: a BioJS component to visualise phylogenetic trees [version 1; peer review: 1 approved, 1 approved with reservations]. F1000Research 2014, 3:49 (https://doi.org/10.5256/f1000research.3676.r3713)
NOTE: it is important to ensure the information in square brackets after the title is included in all citations of this article.

Comments on this article Comments (0)

Version 1
VERSION 1 PUBLISHED 13 Feb 2014
Comment
Alongside their report, reviewers assign a status to the article:
Approved - the paper is scientifically sound in its current form and only minor, if any, improvements are suggested
Approved with reservations - A number of small changes, sometimes more significant revisions are required to address specific details and improve the papers academic merit.
Not approved - fundamental flaws in the paper seriously undermine the findings and conclusions
Sign In
If you've forgotten your password, please enter your email address below and we'll send you instructions on how to reset your password.

The email address should be the one you originally registered with F1000.

Email address not valid, please try again

You registered with F1000 via Google, so we cannot reset your password.

To sign in, please click here.

If you still need help with your Google account password, please click here.

You registered with F1000 via Facebook, so we cannot reset your password.

To sign in, please click here.

If you still need help with your Facebook account password, please click here.

Code not correct, please try again
Email us for further assistance.
Server error, please try again.