PhyloJIVE has two user interfaces that differ primarily in the arrangement of the graphical user elements such as controls, tabs and styling. This iDigBio instance uses the interface where a button placed above the central view pane can be used to reveal and hide tabs which display information as well as a various controls (Figure 1). The ALA instance uses the alternate form in which information tabs and controls are always visible (Figure 2). Controls and information tabs are otherwise the same.

Center button controls

Figure 1: PhyloJIVE with tabs and controls accessible through a central top button.

Side bar controls

Figure 2: PhyloJIVE with tabs and controls on the side.

Phylogentic Visualization

The tree visuzalization shows:

  1. The phylogeny to a chosen depth
  2. Pinkish triangles to indicate unexpanded clades, which contain members beyond the selected view depth
  3. Branch lengths in proportion
  4. Character states for taxa at tips and nodes
  5. Nodes where selected character sets may be disjoint in daughter taxa

Users can navigate the tree screen with the arrow buttons or click and drag with a mouse. The tree can be expanded with the +/- and home key or using mouse scrolling. (Figure 3)

Character visualization

Figure 3: Move the tree around screen with the arrows or click and drag with the mouse. Expand or contract the tree with +/- buttons or use the mouse scroll.

Character Visualization

Up to ten characters can be visualized (Figure 4). Their states are indicated by a matrix of coloured icons appearing to the left of taxon names. Tree branches (and nodes for common ancestors) are coloured according to the predicted value for the first (chosen) character, as calculated using reverse parsimony. Taxa are blue where the first character is scored. Same for collapsed clades where all have a value all the first character. Where quantitative characters are chosen and the taxon names subsequently aligned, the characters are presented as a heat map. Mousing-over a node or name shows the names of the selected characters and their values (Figure 5).

Character visualization

Figure 4: A portion of the visualization with names aligned. The first column is a quantitative trait colored in a blue heat map with '-' indicating missing data. The second column is a qualitative trait with each character state given a different color. The tree branches are colored according to the character state of the first column character.

Character value view

Figure 5: When hovering over a terminal node, the character states appear.

PhyloJIVE Videos

How to use videos from Joe Miller:

PhyloJIVE links the tree to several external services: specimens and maps from Integrated Digitized Biocollections (iDigBio), taxonomic information and maps from Atlas of Living Australia (ALA), information from Encyclopedia of Life (EOL), and taxonomic information and occurrences on a map from Discover Life.

Clicking on a node or name of the tree brings up a menu that shows a map with specimens registered in iDigBio, and a number of blue icons to allow the user to access external services. When clicking on a node with multiple taxa, a map and a set of icons is shown for each taxon. The map shows specimens as red dots, which when clicked shows additional specimen information. The specimen can also be clicked, leading the user to a page with full specimen information.

Links to external services

Figure 6: Clicking on a tree terminal node, a map with specimens on iDigBio represented by red dots is presented. At the bottom of the popup menu, a set of icons lead the users to external services on iDigBio, ALA, EOL and Discover Life.

Multi-taxa linking to external services

Figure 7: When cliking on a node with multiple terminals.

Clicking on the icon, a popup window appears leading to the following external services (from left to right):

  1. iDigBio Specimens and Images: in addition to the map with georeferenced specimens, it offers visualization of the data in the form of a table, labels with an optional image, or all images related with the taxon. The user may also download the data by providing an e-mail address.
  2. Australian Plant Name Index: presents taxonomic name information from ALA
  3. EOL: taxonomic name and images present on EOL
  4. Discover Life: taxonomic name information and map with occurrences
  5. ALA map: Australian map with occurrences
  6. ALA Biodiversity Information Explorer (BIE): density map, occurrences, images, literature, and sequences from ALA

At the bottom of the popup window there are icons to switch between the external services without having to close the window.

iDigBio

Figure 8: iDigBio external service.

ALA taxonomy

Figure 9: ALA external name service.

EOL

Figure 10: EOL external service.

Dicover Life

Figure 11: Discover Life service.

ALA map

Figure 12: ALA map service.

ALA occurrence

Figure 13: ALA occurrence service.

PhyloJIVE controls are available through five tabs, which becomes available when clicking the central top button.

Action Control Tab

The action control tab (Figure 14) allows the user to switch the behavior of mouse clicks on nodes between:

  • Select: the default behavior detailed above leading to external services
  • Expand/collapse: allows specific nodes to be collapsed (instead of setting a single depth)
  • Rotate: inverts the order of the nodes in the clicked branch
  • Set root: reroots the tree with the selected node as the root of the tree

It also allows the user to configure the display of the tree:

  • Align names: all character symbols and names are aligned (to facilitate charater comparison)
  • Ladderize: sort the whole tree by branch length
  • Animate: all visualization changes are animated
  • Branch length: allows branch lengths to be elongated or shortened with the selected multiplication factor

Character Control Tab

The character control tab (Figure 15) allows the user to select up to 3 characters to be displayed on the tree from left to right. Quantitative and qualitative values as well as tree branch colors follows:

  • Putative differences in the ancestral states qualitative characters are inferred from (Fitch) parsimony.
  • Putative changes in the ancestral states of quantitative characters are inferred from a phylogenetically weighted comparison of means and standard deviations.
  • The reconstructed ancestral state of the first character is used to determine branch color. Transitions in any of the three characters is indicated by a red box.
Action control

Figure 14: Action control tab: allows the user to control the presentation of the tree and the behavior of the mouse.

Character control

Figure 15: Character control tab: allows the user to select characters to be displayed on the tree.

Legend Tab

The Legend tab provides a legend of the character states for all chosen characters. Quantitative character states are divided into 10 section of equal size and blue heat map is used to color the 10 character states. Qualitative characters are coded with symbols and colors to differentiate character states. Phylojive does allow the input of multiple character states however multiple characters states do not reconstruct on the tree. If a terminal has two character states a new colored symbol is produced which is called multiple. The individual character states are identified on the tree by terminal taxon. Putative differences in the ancestral states qualitative characters are inferred from (Fitch) parsimony. Putative changes in the ancestral states of quantitative characters are inferred from a phylogenetically weighted comparison of means and standard deviations. The reconstructed ancestral state of the first character is used to determine branch colour. Transitions in any of the three selected characters is indicated by a red box.

The Search tab allows the use to search for a terminal taxon. The taxon will be highlighted if found but the use will have to navigate to the terminal branch. The input tab allows the user to provide their own (newick formatted) phylogentic tree for linkage to predetermined external services.

Legend tab

Figure 16: Legend tab: displays the symbol and color of morphological characters mapped on the phylogeny.

Search tab

Figure 17: Search tab: allows the user to search and highlight specific nodes in the tree.

Features added to PhyloJIVE by iDigBio in this instance include linkages to OpenTree and visualization of sample trees (Figure 18).

Additional iDigBio services

Figure 18: Top bar on iDigBio's PhyloJIVE instance providing additional services to view OpenTree studies and sample trees.

OpenTree studies

A number of plant studies were selected from OpenTree to allow users to visualize them. The user simply needs to select a study tree from the dropdown list, and the study reference will be displayed on the left bar, while the tree will be visualized on the right with PhyloJIVE (Figure 19).

OpenTree studies

Figure 19: OpenTree studies are selectable through a dropdown, with reference information displayed above it on the left side and the tree on the right side.

Sample Trees

A number of sample trees have been made available for users to experiment with PhyloJIVE features, as listed on our home page. These trees are accessible via a dropdownlist (figure 20), and users can also create their own (making it publicly available for others).

Sample trees

Figure 20: Sample trees to experiment PhyloJIVE features.

Create Trees

To create a new tree clicking the 'Create Tree' button in the sample trees interface, the user is required to provide:

  • A name for the tree to reference it later via the dropdown list.
  • The tree in Newick format.

And optionally the user can provide:

  • A description for the tree to be displayed on the left side of the visualization.
  • The qualitative or quantitative tree traits/characters in charJSON format (you can find charJSON examples here and the formal format documentation here). To make it easy, you can also provide the characters in Comma-Separated Value (CSV) format, and click the 'Convert character CSV to charJSON' button. The CSV option requires the first column to contain the names of the tree terminals used in the newick-formated tree, a header line with the name of the traits/characters on all other columns, and multiple values for a trait to be separated by '||' (two vertical pipes without the quotes).

An very simple example of a tree in Newick format, its character in CSV format, and the converted version of characters in charJSON are shown below. Note how the first column of the CSV matches the names in the tree, and how "Helianthus annuus" has two values (red and pink) for the color trait.

Example of tree in Newick format:

(((Helianthus_atrorubens,Helianthus_maximiliani),Helianthus_porteri),(((Helianthus_niveus,(Helianthus_neglectus,(Helianthus_petiolaris,Helianthus_paradoxus))),(Helianthus_praecox,Helianthus_debilis)),((Helianthus_annuus,Helianthus_argophyllus,Helianthus_anomalus,Helianthus_deserticola),Helianthus_bolanderi,Helianthus_exilis)));

Example of characters in CSV:

species,plant height,number of ray flowers,size,color
Helianthus annuus,78,77,large,red||pink
Helianthus anomalus,23,34,small,yellow
Helianthus argophyllus,87,6,large,green
Helianthus atrorubens,76,99,large,red
Helianthus bolanderi,45,88,large,green
Helianthus debilis,23,33,large,red
Helianthus deserticola,23,12,small,green
Helianthus exilis,23,99,small,red
Helianthus maximiliani,23,88,small,green
Helianthus neglectus,78,33,small,red
Helianthus niveus,87,23,large,yellow
Helianthus paradoxus,23,88,large,green
Helianthus petiolaris ,56,33,small,red
Helianthus porteri,23,34,small,red
Helianthus praecox,56,12,large,yellow

Character from the CSV above to charJSON:

{"Helianthus annuus":{"plant height":[78],"number of ray flowers":[77],"size":["large"],"color":["red","pink"]},"Helianthus anomalus":{"plant height":[23],"number of ray flowers":[34],"size":["small"],"color":["yellow"]},"Helianthus argophyllus":{"plant height":[87],"number of ray flowers":[6],"size":["large"],"color":["green"]},"Helianthus atrorubens":{"plant height":[76],"number of ray flowers":[99],"size":["large"],"color":["red"]},"Helianthus bolanderi":{"plant height":[45],"number of ray flowers":[88],"size":["large"],"color":["green"]},"Helianthus debilis":{"plant height":[23],"number of ray flowers":[33],"size":["large"],"color":["red"]},"Helianthus deserticola":{"plant height":[23],"number of ray flowers":[12],"size":["small"],"color":["green"]},"Helianthus exilis":{"plant height":[23],"number of ray flowers":[99],"size":["small"],"color":["red"]},"Helianthus maximiliani":{"plant height":[23],"number of ray flowers":[88],"size":["small"],"color":["green"]},"Helianthus neglectus":{"plant height":[78],"number of ray flowers":[33],"size":["small"],"color":["red"]},"Helianthus niveus":{"plant height":[87],"number of ray flowers":[23],"size":["large"],"color":["yellow"]},"Helianthus paradoxus":{"plant height":[23],"number of ray flowers":[88],"size":["large"],"color":["green"]},"Helianthus petiolaris ":{"plant height":[56],"number of ray flowers":[33],"size":["small"],"color":["red"]},"Helianthus porteri":{"plant height":[23],"number of ray flowers":[34],"size":["small"],"color":["red"]},"Helianthus praecox":{"plant height":[56],"number of ray flowers":[12],"size":["large"],"color":["yellow"]}}

PhyloJIVE is a web-based application that places biodiversity information aggregated from many sources onto compact phylogenetic trees, and:

  • runs entirely on the client-side
  • renders in the web browser on a HTML 5 canvas.
  • requires no browser plugins
  • is open source
  • works in current versions of all major browsers
  • is built on the TheJit (javascript infovis library)
  • this instance on iDigBio also makes use of server-side JSP

PhyloJIVE developers will also be adding details to the project wiki. There are of course, known and unknown problems. You are definitely encouraged to report any bugs in the project wiki, notify us, or to fix them.

You can download files to build your own instance of PhyloJIVE. It includes template web application, instructions and other samples. The template web application can be incorporated into a webserver (as is) or can run by itself on a PC (windows users: extract the folder on your desktop).

Further documentation, notes on common problems, and how to tailor the configuration to your needs (and data sources) is available on the phyloJIVE wiki or on the getting started page (if you are impatient). Notes on charJSON along with scripts are available here. Details on phyloJIVE web application parameters are here.

Further details at development site where contributions and comments are encouraged.

Of course you are welcome to roll your own webapp around the visualization as done by the Atlas of Living Australia or by iDigBio.

Integration

PhyloJIVE can be configured easily to asynchronously access information from many online biodiversity data sources. Examples providers include iDigBio, the Atlas of Living Australia, the OpenTree, the Catalogue of Life, the National Species List and the World Register of Marine Species. This information is accessed and displayed as the tree is explored by end users dynamically and immediately on hover, in summary tables, and in detail.

Performance

Performance is determined by the viewer’s computer and browser. Trees can have at least 4000 taxa with matrices of at least 100 characters. External services are dependent on the availability of each providers's service.