Skip to main content
NCBI home page
Nucleic Acids Research logoLink to Nucleic Acids Research
. 2023 May 5;51(W1):W587–W592. doi: 10.1093/nar/gkad359

Tree Visualization By One Table (tvBOT): a web application for visualizing, modifying and annotating phylogenetic trees

Jianmin Xie 1,2, Yuerong Chen 3,4, Guanjing Cai 5,6, Runlin Cai 7,8, Zhong Hu 9,10, Hui Wang 11,12,✉
PMCID: PMC10320113  PMID: 37144476

Abstract

tvBOT is a user-friendly and efficient web application for visualizing, modifying, and annotating phylogenetic trees. It is highly efficient in data preparation without requiring redundant style and syntax data. Tree annotations are powered by a data-driven engine that only requires practical data organized in uniform formats and saved as one table file. A layer manager is developed to manage annotation dataset layers, allowing the addition of a specific layer by selecting the columns of a corresponding annotation data file. Furthermore, tvBOT renders style adjustments in real-time and diversified ways. All style adjustments can be made on a highly interactive user interface and are available for mobile devices. The display engine allows the changes to be updated and rendered in real-time. In addition, tvBOT supports the combination display of 26 annotation dataset types to achieve multiple formats for tree annotations with reusable phylogenetic data. Besides several publication-ready graphics formats, JSON format can be exported to save the final drawing state and all related data, which can be shared with other users, uploaded to restore the final drawing state for re-editing or used as a style template for quickly retouching a new tree file. tvBOT is freely available at: https://www.chiplot.online/tvbot.html.

Graphical Abstract

Graphical Abstract.

Graphical Abstract

Open in a new tab

A brief workflow for the web application, Tree Visualization By One Table (tvBOT).

INTRODUCTION

Phylogenetic trees, in combination with other annotation information, play an essential role in various biological and other scientific studies. Over the past few years, there have been many software packages, libraries and web tools that were developed for displaying phylogenetic trees, for example, ggtree (1), iTOL (2), EvolView (3), PhyloCloud (4), Dendroscope (5), PhyD3 (6) and TreeDyn (7). ggtree, iTOL and EvolView also offer additional tree annotation features. However, most of them cannot provide a user-friendly and efficient way for annotation data preparation and style adjustments which are primary operations during tree visualization. Most online tools, such as iTOL and EvolView, use template files embedded with style data and syntax data for tree annotation. Users of these tools need to learn different formats of template files when adding different annotation datasets. Embedding such style or syntax data and batch modification also takes time because most of them are duplicated. Admittedly, programming language packages, such as ggtree, possess high degree of customization for tree annotation. Still, they are unfriendly to non-programmers and cost more time on style adjustments than the interactive user interface. To fill these gaps, we developed tvBOT, an online web application for visualizing, modifying and annotating phylogenetic trees conveniently and efficiently. In addition to the essential ability to change the tree structure and customize basic tree styles, we developed a new way of organizing annotation data to enhance the efficiency tree annotation. tvBOT uses only practical data to achieve consistent formatting requirements for annotation data across all supported annotation datasets, allowing users to organize all annotation data in a single table. Combined with a highly interactive user interface, it is easy to customize the style associated with each annotation dataset. Compared to currently available web applications, tvBOT is more comprehensive with valuable new features (Supplementary Table S1).

FEATURES

tvBOT is an online web application accessible with any standard web browser. Based on the D3.js (https://d3js.org/) JavaScript library, the tree display engine is implemented to display interactive and complex phylogenetic trees in a web-based environment. Tree file parsing and tree annotation engine are autonomously developed in JavaScript without external plugins. Vue.js (https://v2.vuejs.org/) JavaScript framework is used to build a highly interactive user interface allowing instant response to user interactions and practical mouse action to adjust display parameters.

A highly interactive user interface for tree visualization and customization

The user interface in tvBOT consists of five parts (Figure 1), including an interactive canvas, an attributes control panel, an annotation data file manager, a dataset layer manager and a project manager. tvBOT supports several phylogenetic tree formats as input, including Newick, Nexus (8) and phyloXML (9), which can be displayed as phylograms (Figure 2) and cladograms (Supplementary Figure S1), each in rectangular, circular or unrooted layout with a different link to types of tree branches. Divergence time trees in Nexus format generated by MCMCTree (10) or BEAST (11) are automatically detected, and the 95% confidence interval bar is displayed by default. The tvBOT can support displaying trees with up to 60 000 leaves by applying SVG canvas.

Figure 1.

Figure 1.

Open in a new tab

The user interface of tvBOT. The main user interface consists of five parts. (A) The interactive canvas, which displays the visualization results and provides some interactive operations for zooming in and out, scaling the tree or canvas, changing the tree structure and dragging some visualization elements. (B) Attributes control panel, allowing the user to upload tree file, export visualization results and adjust the basic display style of the tree or specific style parameters of each annotation dataset. (C) Annotation data file manager for uploading, viewing, updating and deleting annotation data files. (D) Dataset layer manager for adding annotation datasets by selecting the appropriate columns of a selected annotation data file. (E) Project manager panel for backing up visual result to our server.

Figure 2.

Figure 2.

Open in a new tab

Phylograms layouts with different link types. Rectangular layout: (A) rectangular link, (B) rounded rectangular link, (C) linear link, (D) elliptical link, (E) bezierX link and (F) bezierY link. Circular layout: (G) rectangular link, (H) linear link, (I) elliptical link, (J) bezierX link and (K) bezierY link. Inward circular layout: (L) rectangular link. Unrooted layout: (M) linear link, (N) bezierX link and (O) bezierY link.

The interactive canvas supports several mouse operations to zoom in and out, scale the tree or canvas, change the tree structure, and drag some visualization elements. Hovering the mouse over any branch is useful for viewing node information. The tree structure can be modified using the drop-down menu (Figure 1A) displayed when the user clicks on any branch or leaf name text. Any node can be selected as the root node to re-order the tree topology. All child nodes of one clade can be folded and displayed as triangles with two side lengths proportional to the distances to the node's closest and furthest leaves. The display order of child nodes is reversible. The branches of the tree can be sorted in various ways, either ascending or descending order.

Using the attributes control panel (Figure 1B), users can easily adjust the basic display style of the tree or specific style parameters of each annotation dataset, such as leaf font size and branch line width, either by dragging the mouse over the attribute name to change the value or by filling in a specific value. Several elements can be moved individually to a suitable position, including bootstrap value text, divergence time text, branch pie chart, branch text label and all legends. The display engine updates and renders changes in real-time while dragging the mouse, which is helpful for users to determine which value is most appropriate.

A user-friendly and efficient way to annotate tree

tvBOT currently supports up to 26 different annotation dataset types, which can be used to modify the tree style and add different types of labels and external graphics according to the given metadata. These annotation datasets can be combined to build a complex phylogenetic tree (Supplementary Figure S2). Tree annotation includes the following steps (Figure 3). First, for preparation of annotation data files, consistent formatting requirements allows practical data being saved in one single Microsoft Excel sheet or other file formats such as TSV and CSV, without redundant style and syntax data. These annotation data can also be separated into multiple files for better management. This way of data organization significantly reduces users’ learning costs and the data files can be easily updated and replaced. Detailed information about the data preparation of each annotation dataset type is available on the help documentation page (https://1996xjm.github.io/tvbot/tree_annotation/). Subsequently, these data files can be added to the annotation data file manager panel (Figure 1C), which supports the uploading of multiple annotation data files and other functions such as viewing, updating, and deleting files. Annotation data files and tree files can be downloaded by clicking on the view button. The update function is convenient for refreshing the display style of the corresponding annotation dataset according to the modification to the file. A specific annotation dataset layer could be added by selecting corresponding data columns. Finally, style parameters are adjusted in relation to each dataset layer. The dataset layer manager (Figure 1D) is developed to add and manage annotation dataset layers. When adding an annotation dataset layer, users must also select the appropriate data columns of the selected annotation data file in the data file manager panel. Each annotation dataset layer can be added multiple times using different data columns. At the end of each layer, there are three buttons for renaming, deleting, and hiding the layer, respectively. The style parameters associated with each dataset layer are displayed in the attributes control panel when the layer is clicked.

Figure 3.

Figure 3.

Open in a new tab

Tree visualization workflow in tvBOT: import a tree file in various formats (step 1); adjust the tree structure and basic styles (step 2); organize annotation data in one or multiple tables and upload (step 3); add annotation dataset layers using corresponding data columns (step 4); execute style adjustments for each dataset layer (step 5); export figure and save drawing state (step 6).

Useful annotation datasets

Italicizing certain words in the text of a species name and adding superscripts are often used in many scenarios, especially microbiology. At the time, no published tree visualization tool could efficiently change the italics of specific words in batches and add the right superscript in batches. This function in iTOL is inefficient for those who do not have coding skills because it requires different HTML tags (<i></i>, <sup></sup>, etc.) to pack words you want to change the style, which is not as efficient as modifying these font styles directly in Adobe Illustrator.

We, therefore, developed a pragmatic approach for each annotation dataset. It is highly efficient in tvBOT to achieve italicization of specified words in a leaf name text by adding an annotation dataset layer called ‘word italic’ (Figure 4). This dataset layer only requires a column of string specifier data, which can be easily prepared in Microsoft Excel using the Fill command. The general form of a specifier is the index (starting from 0) of the word that the user wants to set in italics, being separated by a comma. If users leave a cell blank, the font style of the corresponding leaf name will not be changed. Similarly, with one column of data of superscript string, an annotation dataset layer called ‘append superscript to leaves name’ can be added to append each superscript string to the corresponding leaf name (Figure 4). Example trees of some other useful annotation datasets, such as geologic time scale, lollipop plot, bubble plot and heatmap, are shown in the supplementary file (Supplementary Figure S3).

Figure 4.

Figure 4.

Open in a new tab

The process to add ‘word italic’ and ‘append superscript to leaves name’ annotation datasets. The former requires a column of string specifier data, and the latter requires a column of superscript string.

Export of figure and reusable phylogenetic data

tvBOT allows users to export images displayed on the canvas into various publication-ready graphic formats, such as vector graphics or bitmaps, including svg, pdf, eps, png and transparent png (transparent background). In addition, a file in JSON format can be exported to save both the final drawing state of the canvas and all associated data, including the tree file, annotation and style data. This JSON file can be shared with other users or uploaded via the data menu (Figure 1B) to restore the final drawing state for re-editing or used as a style template to retouch a new tree file quickly. A simple project manager is also developed to back up visual results for users temporarily. Once a new tree file is uploaded, the user can choose to save the current visual result to our server by clicking the Save button in the Project Manager panel (Figure 1E). All tree visualization projects are accessible from My Trees page and can be re-opened for re-editing. Further development of persistent storage of the visual result using the user account is forthcoming.

HELP RESOURCES AND TREE GALLERY

Help documentation (https://1996xjm.github.io/tvbot/) is created to explain usages in detail based on gitbook (https://www.gitbook.com/), including new features, user interface operation, annotation data preparation and style parameters description. Several tutorial videos have been uploaded to our YouTube channel: https://www.youtube.com/playlist?list=PLfYQHjd1xleTFMggXlc1mzUPKF8RpAly4 to facilitate the use of tvBOT and help users get started quickly. Example trees were constructed and displayed to illustrate and explore the various annotation possibilities. For each annotation dataset layer, an example tree, for which a link is accessible in the corresponding dataset section of the help documentation, has been designed with a set of predefined data files. Published tree visualization cases are collected and rebuilt in tvBOT to construct the tree gallery, which is available on the page (https://www.chiplot.online/treeGallery.html).

CONCLUSION

An interactive, user-friendly and efficient tool, tvBOT, is being built in this study to visualize, modify and annotate phylogenetic trees. In addition to being able to customize the basic styles of the trees, tvBOT has some new features to improve tree annotation. It supports up to 26 types of annotation dataset and manages datasets by layers like Adobe Photoshop. Tree annotation is powered by a data-driven engine that requires only practical data, not redundant data such as style data or syntax data. Practical data for all types of dataset layers to can be organized in a single table file. In addition, all adjustments to the style are carried out in the attributes control panel. A specific dataset layer can be added by selecting the appropriate column. tvBOT supports the export of various publication-ready graphical formats and the reuse of phylogenetic data. The features mentioned above not only reduce the cost of learning but also improve the efficiency of data preparation. The tool has been used in dozens of studies in 14 months after its release in October 2021 (12–30).

DATA AVAILABILITY

tvBOT is freely accessible at https://www.chiplot.online/tvbot.html. The corresponding open-source code is available in the GitHub repository (https://github.com/1996xjm/TVBOT) and in Figshare (https://doi.org/10.6084/m9.figshare.22682701.v1).

Supplementary Material

gkad359_Supplemental_File
Click here for additional data file. (704.8KB, pdf)

ACKNOWLEDGEMENTS

We would like to thank all users for their bug reports and suggestions and other developers for their wonderful open-source libraries used in this project.

Contributor Information

Jianmin Xie, Guangdong Provincial Key Laboratory of Marine Biotechnology, Shantou University, Shantou 515063, China; Biology Department and Institute of Marine Sciences, College of Science, Shantou University, Shantou 515063, China.

Yuerong Chen, Guangdong Provincial Key Laboratory of Marine Biotechnology, Shantou University, Shantou 515063, China; Biology Department and Institute of Marine Sciences, College of Science, Shantou University, Shantou 515063, China.

Guanjing Cai, Guangdong Provincial Key Laboratory of Marine Biotechnology, Shantou University, Shantou 515063, China; Biology Department and Institute of Marine Sciences, College of Science, Shantou University, Shantou 515063, China.

Runlin Cai, Guangdong Provincial Key Laboratory of Marine Biotechnology, Shantou University, Shantou 515063, China; Biology Department and Institute of Marine Sciences, College of Science, Shantou University, Shantou 515063, China.

Zhong Hu, Guangdong Provincial Key Laboratory of Marine Biotechnology, Shantou University, Shantou 515063, China; Biology Department and Institute of Marine Sciences, College of Science, Shantou University, Shantou 515063, China.

Hui Wang, Guangdong Provincial Key Laboratory of Marine Biotechnology, Shantou University, Shantou 515063, China; Biology Department and Institute of Marine Sciences, College of Science, Shantou University, Shantou 515063, China.

SUPPLEMENTARY DATA

Supplementary Data are available at NAR Online.

FUNDING

National Natural Science Foundation of China [92051118, 32070113]; Guangdong Science and Technology Department [2022B1515020017]. Funding for open access charge: Guangdong Science and Technology Department [2022B1515020017].

Conflict of interest statement. None declared.

REFERENCES

  • 1. Yu G., Smith D.K., Zhu H., Guan Y., Lam T.T.Y., McInerny G.. ggtree: an R package for visualization and annotation of phylogenetic trees with their covariates and other associated data. Methods Ecol. Evol. 2016; 8:28–36. [Google Scholar]
  • 2. Letunic I., Bork P.. Interactive Tree Of Life (iTOL) v5: an online tool for phylogenetic tree display and annotation. Nucleic Acids Res. 2021; 49:W293–W296. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 3. Subramanian B., Gao S., Lercher M.J., Hu S., Chen W.-H.. Evolview v3: a webserver for visualization, annotation, and management of phylogenetic trees. Nucleic Acids Res. 2019; 47:W270–W275. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 4. Deng Z., Botas J., Cantalapiedra C.P., Hernandez-Plaza A., Burguet-Castell J., Huerta-Cepas J.. PhyloCloud: an online platform for making sense of phylogenomic data. Nucleic Acids Res. 2022; 50:W577–W582. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 5. Huson D.H., Scornavacca C.. Dendroscope 3: an interactive tool for rooted phylogenetic trees and networks. Syst. Biol. 2012; 61:1061–1067. [DOI] [PubMed] [Google Scholar]
  • 6. Kreft L., Botzki A., Coppens F., Vandepoele K., Van Bel M.. PhyD3: a phylogenetic tree viewer with extended phyloXML support for functional genomics data visualization. Bioinformatics. 2017; 33:2946–2947. [DOI] [PubMed] [Google Scholar]
  • 7. Chevenet F., Brun C., Banuls A.L., Jacq B., Christen R.. TreeDyn: towards dynamic graphics and annotations for analyses of trees. BMC Bioinformatics. 2006; 7:439. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 8. Maddison D.R., Swofford D.L., Maddison W.P.. NEXUS: an extensible file format for systematic information. Syst. Biol. 1997; 46:590–621. [DOI] [PubMed] [Google Scholar]
  • 9. Han M.V., Zmasek C.M.. phyloXML: XML for evolutionary biology and comparative genomics. BMC Bioinformatics. 2009; 10:356. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 10. Yang Z. PAML 4: phylogenetic analysis by maximum likelihood. Mol. Biol. Evol. 2007; 24:1586–1591. [DOI] [PubMed] [Google Scholar]
  • 11. Bouckaert R., Heled J., Kuhnert D., Vaughan T., Wu C.H., Xie D., Suchard M.A., Rambaut A., Drummond A.J.. BEAST 2: a software platform for Bayesian evolutionary analysis. PLoS Comput Biol. 2014; 10:e1003537. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 12. Wu D., Zhou L., Xue J., Xia Q., Meng L.. Characterization of two new apodemus mitogenomes (Rodentia:muridae) and mitochondrial phylogeny of muridae. Diversity. 2022; 14:1089. [Google Scholar]
  • 13. Bai X., Ylinen E., Zhang J., Salmenlinna S., Halkilahti J., Saxen H., Narayanan A., Jahnukainen T., Matussek A.. Comparative genomics of Shiga toxin-producing Escherichia coli strains isolated from pediatric patients with and without hemolytic uremic syndrome from 2000 to 2016 in Finland. Microbiol. Spectr. 2022; 10:e0066022. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 14. Yuan J., Liu Y., Wang Z., Lei T., Hu Y., Zhang L., Yuan M., Wang J., Li Y.. Genome-wide analysis of the nac family associated with two paleohexaploidization events in the tomato. Life. 2022; 12:1236. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 15. Huang D., Ma F., Wu B., Lv W., Xu Y., Xing W., Chen D., Xu B., Song S.. Genome-wide association and expression analysis of the lipoxygenase gene family in Passiflora edulis revealing pelox4 might be involved in fruit ripeness and ester formation. Int. J. Mol. Sci. 2022; 23:12496. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 16. Hou Q., Li S., Shang C., Wen Z., Cai X., Hong Y., Qiao G.. Genome-wide characterization of chalcone synthase genes in sweet cherry and functional characterization of CpCHS1 under drought stress. Front. Plant Sci. 2022; 13:989959. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 17. Zhang J.Z., He P.W., Xu X.M., Lu Z.F., Cui P., George M.S., Lu G.Q.. Genome-wide identification and expression analysis of the xyloglucan endotransglucosylase/hydrolase gene family in sweet potato [Ipomoea batatas (L.) Lam]. Int. J. Mol. Sci. 2023; 24:775. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 18. Xu Y., Li X., Yang X., Wassie M., Shi H.. Genome-wide identification and molecular characterization of the AP2/ERF superfamily members in sand pear (Pyrus pyrifolia). BMC Genomics. 2023; 24:32. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 19. Xu M., Wang Y., Zhang M., Chen M., Ni Y., Xu X., Xu S., Li Y., Zhang X.. Genome-wide identification of BES1 gene family in six Cucurbitaceae species and its expression analysis in Cucurbita moschata. Int. J. Mol. Sci. 2023; 24:2287. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 20. Lv J., Feng Y., Jiang L., Zhang G., Wu T., Zhang X., Xu X., Wang Y., Han Z.. Genome-wide identification of WOX family members in nine Rosaceae species and a functional analysis of MdWOX13-1 in drought resistance. Plant Sci. 2022; 328:111564. [DOI] [PubMed] [Google Scholar]
  • 21. Yin T., Han P., Xi D., Yu W., Zhu L., Du C., Yang N., Liu X., Zhang H.. Genome-wide identification, characterization, and expression profile of NBS-LRR gene family in sweet orange (Citrussinensis). Gene. 2023; 854:147117. [DOI] [PubMed] [Google Scholar]
  • 22. Sun L., Meng N., Wang Z., Hong J., Dai Y., Wang Z., Wang J., Jiao X.. Genomic characterization of ESBL/AmpC-producing Escherichia coli in stray dogs sheltered in Yangzhou, China. Infect. Drug Resist. 2022; 15:7741–7750. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 23. Yang X., Liu Q., Sun H., Xiong Y., Matussek A., Bai X.. Genomic characterization of Escherichia coli O8 strains producing Shiga toxin 2l subtype. Microorganisms. 2022; 10:1245. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 24. Shafiq M., Ke B., Li X., Zeng M., Yuan Y., He D., Deng X., Jiao X.. Genomic diversity of resistant and virulent factors of Burkholderia pseudomallei clinical strains recovered from Guangdong using whole genome sequencing. Front. Microbiol. 2022; 13:980525. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 25. Yang X., Liu Q., Bai X., Hu B., Jiang D., Jiao H., Lu L., Fan R., Hou P., Matussek A.et al.. High prevalence and persistence of Escherichia coli strains producing Shiga toxin subtype 2k in goat herds. Microbiol. Spectr. 2022; 10:e0157122. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 26. Liu Q., Bai X., Yang X., Fan G., Wu K., Song W., Sun H., Chen S., Chen H., Xiong Y.. Identification and genomic characterization of Escherichia albertii in migratory birds from Poyang Lake, China. Pathogens. 2022; 12:9. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 27. Cui H., Pan S., Xu X., Ji J., Ma K., Yao L., Kan Y., Bi Y., Xie Q.. Molecular characteristics of novel chaphamaparvovirus identified in chickens. Poult. Sci. 2022; 102:102449. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 28. Zhang J., Dong B., Yang L.. Molecular characterization and expression analysis of putative class C (glutamate family) G protein-coupled receptors in Ascidian styela clava. Biology (Basel). 2022; 11:782. [DOI] [PMC free article] [PubMed] [Google Scholar]
  • 29. Deng Z., Zhao J., Wang Z., Li R., Guo Y., Luo T., Zhang L.. Stochastic processes drive plant community assembly in alpine grassland during the restoration period. Diversity. 2022; 14:832. [Google Scholar]
  • 30. Chen X., Luo M., Wu W., Dong Z., Zou H.. Virulence-associated genes of Calonectria ilicola, responsible for Cylindrocladium black rot. J. Fungi. 2022; 8:869. [DOI] [PMC free article] [PubMed] [Google Scholar]

Associated Data

This section collects any data citations, data availability statements, or supplementary materials included in this article.

Supplementary Materials

gkad359_Supplemental_File
Click here for additional data file. (704.8KB, pdf)

Data Availability Statement

tvBOT is freely accessible at https://www.chiplot.online/tvbot.html. The corresponding open-source code is available in the GitHub repository (https://github.com/1996xjm/TVBOT) and in Figshare (https://doi.org/10.6084/m9.figshare.22682701.v1).

Articles from Nucleic Acids Research are provided here courtesy of Oxford University Press

RESOURCES