|Home | About | Journals | Submit | Contact Us | Français|
Conceived and designed the experiments: SAS CCO. Performed the experiments: SAS. Analyzed the data: SAS CCO. Contributed reagents/materials/analysis tools: CCO. Wrote the paper: SAS.
Many software packages have been developed to address the need for generating phylogenetic trees intended for print. With an increased use of the web to disseminate scientific literature, there is a need for phylogenetic trees to be viewable across many types of devices and feature some of the interactive elements that are integral to the browsing experience. We propose a novel approach for publishing interactive phylogenetic trees.
jsPhyloSVG is an open-source solution for rendering dynamic phylogenetic trees. It is capable of generating complex and interactive phylogenetic trees across all major browsers without the need for plugins. It is novel in supporting the ability to interpret the tree inference formats directly, exposing the underlying markup to data-mining services. The library source code, extensive documentation and live examples are freely accessible at www.jsphylosvg.com.
Constructing phylogenetic trees is a fundamental task in multiple fields of biology, including evolutionary, genetic, molecular and conservational biology. Many software packages – have been created to address the need for constructing trees as static images for use in printed literature. Online access to scientific literature has recently opened up new possibilities yet presents additional challenges, however. For instance, phylogenetic trees need to be presented at varying resolutions in order to be optimized for both large monitors and small mobile devices. Furthermore, the dynamic nature of the web demands interactive elements and rich analytics integrated within a tree.
The library renders both rectangular and circular phylograms from Newick and phyloXML  formats. Newick files (outputted by many popular phylogenetic packages, such as PHYLIP ) include at most only labels, edge lengths and bootstrap values; the tree renderings are therefore limited to these elements. Implementing the recently devised XML format specialized for phylogentic trees, phyloXML, offers the ability to include features such as text nodes that link to other websites or reveal descriptions on rollovers (see Figure 1). These core characteristics are present in both tree formats.
All of the stylistic qualities of the tree may be specified either programmatically as parameters or within the tree's XML file. Characteristics such as the font size or type, branch stroke width, mouse rollover events and scale can be easily customized. This offers the ability for each tree to be uniquely rendered using its predefined style in the XML file, or conversely allows for sites to override styles to maintain trees that are visually similar. Detailed explanations and documentation of available parameters and file formatting are available on our website.
The library integrates charting analytics within the tree visualization. Two charting formats are currently supported: binary and bar charts (see Figure 2). These reporting features are based on provided data within the tree XML file. The software normalizes the data and renders the charts according to user-defined styles in the XML file or parameters set at tree instantiation. jsPhyloSVG is flexible enough to an unlimited number of chart tracks to be added to the tree, with any number of stylistic characteristics.
The limitations of the library are primarily related to the authors' choice of using SVG to render the visualizations. Firstly, the format is not natively supported by current versions of Internet Explorer. This restriction has been overcome by automatically rendering the tree in the analogous format VML for these browsers. Secondly, SVG exposes its elements to the browser's Document Object Model (DOM) in order to allow for interactivity at an added slight computational cost. These computational tasks begin to significantly affect the performance of the browser, however, when rendering large trees that contain more than 2000 nodes (see Table S1). The choice to use SVG was deliberate in order to fulfill the primary objective of providing interactive capabilities despite the cost in performance for large trees.
jsPhyloSVG is a comprehensive open-source solution for rendering dynamic phylogenetic trees. It leverages modern approaches by supporting HTML5 for the widest possible audience. It consumes phylogenetic inferences in Newick or XML formats and generates sophisticated trees that incorporate charting analytics in scalable vector images. The trees are also dynamic and provide instantaneous user feedback as they are navigated. Finally, the library is simple to extend and may be easily integrated into existing web applications.
Project home page: http://www.jsphylosvg.com
Operating System: Platform independent
License: Open Source, GPL.
Rendering performance across different browsers and devices. Number of seconds required to render SVG visualizations of phylogenetic trees with varying amounts of nodes across different browsers. Both Chrome and Firefox browsers were tested on a Lenovo Thinkpad X200 laptop (2.4 GHz, 4 Gb RAM) running Microsoft Windows 7. Safari was tested on a first generation Apple iPad.
(0.03 MB DOC)
Thanks to Jorge Dinas for the many fruitful discussions and critiques of tree-building.
Competing Interests: The authors have declared that no competing interests exist.
Funding: This work has been funded in part by National Institutes of Health (NIH) Grant #1SC3GM0822 and NIH MARC Grant #5T34 GM008253. The funders had no role in study design, data collection and analysis, decision to publish, or preparation of the manuscript.