Evolview v2: an online visualization and management tool for customized and annotated phylogenetic trees

Abstract

Evolview is an online visualization and management tool for customized and annotated phylogenetic trees. It allows users to visualize phylogenetic trees in various formats, customize the trees through built-in functions and user-supplied datasets and export the customization results to publication-ready figures. Its ‘dataset system’ contains not only the data to be visualized on the tree, but also ‘modifiers’ that control various aspects of the graphical annotation. Evolview is a single-page application (like Gmail); its carefully designed interface allows users to upload, visualize, manipulate and manage trees and datasets all in a single webpage. Developments since the last public release include a modern dataset editor with keyword highlighting functionality, seven newly added types of annotation datasets, collaboration support that allows users to share their trees and datasets and various improvements of the web interface and performance. In addition, we included eleven new ‘Demo’ trees to demonstrate the basic functionalities of Evolview, and five new ‘Showcase’ trees inspired by publications to showcase the power of Evolview in producing publication-ready figures. Evolview is freely available at: http://www.evolgenius.info/evolview/.

INTRODUCTION

Phylogenetic trees are an essential tool for displaying inferred evolutionary relationships among different biological species or other entities. Researchers can use phylogenetic trees to analyze species and gene family evolution (1,2) and identify horizontal gene transfers (3,4). In recent years, trees are increasingly used to visualize comparative information in an evolutionary context, e.g. when comparing the copy number of a gene in selected species or the number of genes involved in certain biological processes in each species. A wide variety of tree visualization software and online tools have thus been developed, such as the ETE toolkit (5), TreeView (6), TreeVector (7), Dendroscope (8), iTol (9), jsPhyloSVG (10), PhyloWidget (11), T-REX (12), Treelink (13), TreeGraph 2 (14) and many others (see https://en.wikipedia.org/wiki/List_of_phylogenetic_tree_visualization_software for a comprehensive list); each tool has its own advantages and disadvantages (15).

In 2012, we introduced Evolview, an online visualization and management tool for customized and annotated phylogenetic trees (16). Evolview takes phylogenetic trees of various formats such as Newick/Phylip, Nexus, Nhx and PhyloXML, and visualizes them as phylograms and cladograms, each in either rectangular or circular layout. It allows users to customize and annotate the trees with built-in functions as well as user-supplied datasets. In total, seven types of annotation datasets were supported in the first version; users can use datasets to change the display styles of leafs and internal branches or add additional information as pie and bar charts and as color strips to the tree. Its ‘dataset system’ contains not only the data to be visualized on the tree, but also ‘modifiers’ that control various aspects of the graphical annotation. The customized results can be exported into a wide range of graphical formats, including SVG, PDF, PNG, TIFF and JPEG. Exporting phylogenetic trees to textual formats such as Newick, Nexus, Nhx and PhyloXML is also supported. With a carefully designed user interface, users can view, manage and manipulate uploaded trees and datasets easily and efficiently (16).

Evolview is capable of handling large trees. For example, based on our tests on a 4-year old laptop with 2.2 GHz Intel Core i7 CPU and 8GB of memory, Evolview could parse and visualize two NCBI species trees of 2000 and 4000 leaf nodes in ∼7 and ∼17 s, respectively (for more information on the performance of Evolview, please consult https://evolview.codeplex.com/wikipage?title=evolviewperformance).

About 2456 users have uploaded 12 131 trees and 8605 datasets since 2012. More importantly, monthly usage has been increasing steadily over the years; on average, users upload more than 400 trees and 400 datasets per month in 2016.

In the past several years, we kept adding new functionalities to Evolview on a regular basis (see the ‘What's new’ page of our online documentation at https://evolview.codeplex.com). Major updates since the 2012 version include (i) a modern text editor that highlights ‘modifiers’ and predefined keywords in different colors and font styles, allowing users to easily compose and validate their datasets before submitting to Evolview; (ii) seven newly added types of annotation datasets that were often requested by our users; (iii) tree sharing functionality to allow users to share their trees and datasets for collaborative purposes and (iv) various improvements of the web interface and performance. In addition, we added eleven new ‘Demo’ trees to demonstrate the basic functionalities of Evolview, and five new ‘Showcase’ trees to showcase the power of Evolview in producing complex and publication-ready figures. All ‘Showcase’ trees replicate figures from published papers, some of which were initially created using Evolview.

USER INTERFACE: MAIN FEATURES AND LATEST IMPROVEMENTS

Evolview is equipped with an intuitive user interface that provides access to most of its functionalities through clickable icons, such as uploading and managing trees and datasets, changing tree representation modes and tweaking visualization details (Figure 1). Evolview is designed as a single-page web application, where viewing, editing and manipulating of trees and datasets can be performed on the same web page (Figure 1).

Figure 1.

The user interface of Evolview. It consists of five parts. (1) A header bar. (2) A multi-tab toolbar consisting of sets of icons for tree and dataset manipulation, data upload and exporting to various text and graphical formats. (3) A logo. Clicking on the logo shows statistics on Evolview usage in a popup panel. (4) A user data panel that lists user-uploaded trees and datasets. Trees can be organized into projects. Datasets of a tree are organized into sub-categories. Trees and datasets can be easily manipulated using the icons. Users can choose to hide the user data panel to give more space to the canvas by clicking the widget to the right of this panel. (5) A canvas that shows the visualization results. Mouse-over on different elements of the tree and datasets opens up additional information. The size of the canvas can be changed by using the corresponding icons of the toolbar and by dragging the right bottom corner of the canvas.

Evolview supports 14 types of annotation datasets that allow users to apply complex customizations of the tree, twice as many as in the previous version. Datasets can be uploaded from text files or entered by hand using a built-in text editor. We updated the text editor so that it now supports syntax highlighting. As shown in Figure 2, this new editor highlights different elements of a dataset with different colors and font styles. This modern text editor allows users to validate a dataset before submitting to Evolview.

Figure 2.

A modern text editor with syntax highlighting. This editor highlights different elements of a dataset with colors and font styles. In this new editor, the annotation lines are shown in green, supported ‘modifiers’ are shown in purple with bold font, predefined keywords are shown in dark blue with bold font, numbers are highlighted in light green and supported HTML color names are shown in light green with italic font. In addition, line numbers are shown to the left of the text and the current line is highlighted with a light blue background. The new editor is powered by the JavaScript library CodeMirror (https://codemirror.net/). Shown here is an example of a ‘Heatmap’ annotation; for more information on and examples of this annotation type please consult our online documentation at : https://evolview.codeplex.com/wikipage?title=DatasetHeatmap.

Due to limited space of the webpage, the icons for uploading datasets are often quite small. We thus added graphical tooltips to these icons. Mouse-over on these icons triggers the graphical tooltips, on which a much larger and detailed illustration of the visualization is shown, with a link to the online documentation of the corresponding dataset type.

NEWLY ADDED ANNOTATION DATASET TYPES

Group labels

Group labels can be used to group genes or species in a tree into subgroups and annotate them, as shown in Figure 3A. Group labels can be applied to individual as well as multiple left nodes. Evolview provides five visualization styles for Group labels (Figure 3A, styles 1–5). For more examples, please consult the corresponding example trees of the ‘Demos’ project and ‘Showcases’ trees #1–3.

Figure 3.

Seven newly supported types of annotation datasets. (A) Group labels of styles 1–5, (B) Dot plot, (C) Heatmap, (D) Collapsing at internal nodes, (E) Leaf label decoration, (F) Bootstrap value style and (G) Column plot.

Dot plot

Dot plot displays user-supplied numerical data as dots (circles) of different sizes, with the diameters or the areas of the dots corresponding to the numerical values (Figure 3B). It is a variant of bar chart and can be used to show the variation of a particular attribute across leaf nodes. For example, Warinner et al. used dot plots to represent targeted 16S rRNA hypervariable regions in different species in the context of a phylogenetic tree (17) (see the ‘Showcases’ tree #2). The legend system has been updated so that in addition to the regular legend items, four dots of different sizes will be plotted to show the scaling of the user-supplied data (Figure 3B). See also the tree ‘dotplots’ of the ‘Demos’ project for examples.

Heatmap

Heatmap can be used to show gene and protein expression abundances in different experiments/samples or correlations among the samples (Figure 3C); it uses a multi-color gradient to show the relative strengths of the user-supplied numerical values. For example, Hornsby et al. used Heatmap to show the signal strengths of ELISA experiments using Evolview (18). Evolview provides multiple ‘modifiers’ for controlling various aspects of Heatmap, including the number and choices of the colors in the gradient and the names of experiments/samples and their display styles (Figure 3C). The color key, i.e. a legend item containing the color gradient and corresponding numeric values, is supported by the legend system and can be customized through multiple ‘modifiers’. See the tree ‘heatmaps’ in the ‘Demos’ project and our online documentation for details and examples.

Collapsing at internal nodes

Evolview supports collapsing a tree at internal nodes with user-supplied datasets. Users can collapse a tree at specified internal nodes, resulting in a small triangle at the collapsed nodes that is proportional in size to the number of contained leaf descendants. As shown in Figure 3D, customization of collapsed nodes is also supported.

Leaf label decorations

Leaf label decorations are color shapes shown in front of leaf labels (Figure 3E); we provide five different shapes (‘star’, ‘rect’ (for rectangle), ‘triangle’, ‘circle’ and ‘check’) and two display styles (filled and outlined). Multiple shapes can be added to a single leaf label, as shown in Figure 3E. See the trees ‘leaf decoration and stroke’ of the ‘Demos’ project and ‘showcase 04’ of the ‘Showcases’ project for examples.

Bootstrap value styles

Bootstrap value style allows users to tweak the displaying styles of bootstrap values (Figure 3F).

Column plots

Column plot provides a flexible way of visualizing summary information of species such as traits, lifestyles and habitats in the context of a phylogenetic tree (Figure 3G); it was inspired by a figure in a recent publication by Laumer et al. (19).

TREE SHARING

Users can share their trees with others, allowing them to view and manipulate the trees. Shared trees are available to all people (even non-registered users) that possess the generated web links (also known as URLs, Uniform Resource Locators). Evolview supports three modes of sharing; each provides the owners and others with different privileges with respect to the shared trees and associated datasets. The first of these is the ‘Share’ mode. This is the default mode for tree sharing. Other users, including non-registered users, can view and interact with the shared trees and datasets, but they cannot make any changes (or the changes will not be saved to the server). The owner of the trees will be able to change the shared trees and datasets; any changes will be available to others. The second mode is the ‘Collaborate’ mode. Shared trees under this mode can be manipulated by anyone with the URLs; all changes will be saved to the server. The third mode is the ‘Publish’ mode. Under this mode, a copy of selected trees and associated datasets will be shared. No one, including the owner, can make any changes to the shared trees and datasets.

NEW ‘DEMOS’ AND ‘SHOWCASES’ TREES

‘Demos’ and ‘Showcases’ are two projects that are available to all users. Trees and datasets in the ‘Demos’ project are used to show the basic functionality of Evolview. There are 14 trees in ‘Demos’ in the current version.

Trees in the ‘Showcases’ project are used to demonstrate the power of Evolview in producing complex and publication-ready figures; these trees all reproduce figures from published papers (17,20–22), many of which were created using Evolview (20–22). Currently, there are five trees in the ‘Showcases’ project.

OTHER UPDATES

Many annotation datasets, such as ‘Pie’, ‘Bar’, ‘Dotplot’ and ‘Heatmap’ take numerical values as input. Now Evolview allows users to show these values at the corresponding positions of the visualization (Figure 3B and C; Figure 4). In ‘Dotplot’ and ‘Heatmap’, users can also choose to hide a single value or a range of values, as shown in Figure 4B.

Figure 4.

Displaying data values is supported for Bar plot (A), Pie charts (not shown), Dot plot (B) and Heatmap (see Figure 3C). Excluding certain values from the display is also supported (B).

Datasets for ‘Dotplot’, ‘Heatmap’ and ‘Column’ plots often contain column labels (Figure 3B and C). Evolview allows users to tweak the visualization styles of the column labels by changing their color, style, size and rotation (see also Figure 3B and C).

CONCLUSION

In this article, we introduced Evolview v2, a comprehensive web application for visualizing, annotating and managing phylogenetic trees. Updates since the last version include support for new visualization styles, an improved user interface and better performance. In the future, we aim to keep Evolview up-to-date and state-of-the-art by supporting new annotation types that meet the developing needs of our broad range of users.

AVAILABILITY

Evolview is accessible using modern browsers such as Firefox, Chrome, Opera and Safari. However, due to some compatibility issues, Internet Explorer (IE) is currently not supported. The Evolview website is free and open to all users and there is no login requirement. However, if users want to save their data on our server, an account is required. Registration and the account are free.

Evolview is freely available at: http://www.evolgenius.info/evolview/. Its source codes are available upon request. Users who wish to install Evolview locally can find the compiled codes and instructions at: https://github.com/evolgeniusteam/evolivew-local-deploy. The documentation is hosted at: https://evolview.codeplex.com/documentation.

FUNDING

Funding for open access charge: Strategic Priority Research Program of the Chinese Academy of Sciences [XDA08020102 to S.H.].

Conflict of interest statement. None declared.