Visualization Subgroup

From Evolutionary Informatics Working Group
Jump to: navigation, search

Welcome to the home page for the Visualization subgroup of the NESCent Hackathon on Database Interoperability. The group consisted of Greg, Sheldon, Katja, and Arlin, and met daily from Monday, March 9 through Friday, March 13.

Note: This page summarizes the goals, results, and further plans of the subgroup. For the mess of unorganized notes taken during the course of the event, please see Visualization Subgroup (work in progress).

Goals and motivation

A motivating force behind interoperability is the desire to present developers (i.e. programmers like the Hackathon participants) and end users (evolutionary scientists who will be using, rather than creating the software) with a unified interface to a certain type of data. Because most scientific analysis begins with visualization of some sort, the visualization of evolutionary data stands to gain much from NESCent's emerging standards for interoperability.

In order to explore the potential of NeXML and PhyloWS to facilitate communication between databases, remote services, and end users, our subgroup decided to create a generic, customizable web-based interface for interacting with and visualizing the trees contained in a web database.

During the first day of brainstorming, we identified a few specific use cases that we wished to cover:

Use cases

  1. Database overview -- where a "naive" user just wants to get an idea of what the trees in the database look like.
  2. Publication prep -- a scientist wants to mark up a tree in various ways and output the marked-up tree as a publication quality image.
  3. Image retrieval -- a user (scientist OR layperson) wants to find appropriate images to aid in the summary overview of a phylogenetic tree
  4. Specific visualization tasks:
    1. Bootstrap support -- map the statistical support for a certain branch or clade to a visual character on the tree
    2. Ancestral states -- map the probability of certain ancestral states to a visual character on the tree

We planned to evaluate our efforts according to how well they served the above use cases. As can be seen from the results below, we surpassed our expectations in some areas but lagged behind in others. Hopefully, continued work on the generic tool (and adoption of the tool by data providers and/or individual labs) will allow us to fully cover the desired set of covered use cases.



The major outcome of the hackathon was the addition of new functionality to PhyloWidget and the development of a web-based application to facilitate database queries and user interaction.

PhylowidgetWeb.png Screenshot of the new web interface

This new interface implements some notable new ideas:

  • Intuitive editing of visual parameters, such as branch width, color, and node shape
  • Simple searching of an evolutionary database, with taxonomic auto-completion
    • Showcases: PhyloWS for generic communication between phylogenetic data clients and servers
  • "Tree transformations," or one-click remote services that perform some analysis or transformation of a tree
    • Showcases: NeXML as a standards-based format for transmitting phylogenetic data and associated metadata

Live Demo

We are planning to release an online demo of the new web interface soon. For those without much patience, you can always check out the latest code from the Google Code repository (in SVN, under the subdirectory visualization).

Detailed Documentation / Notes

Changes to PhyloWidget

Throughout the course of the hackathon, Greg worked on adding several key improvements to the PhyloWidget applet:

  • Basic NeXML-based input/output capabilities
  • Improved compatibility with browser-based Javascript
  • New visual display capabilities
  • HTTP communication for performing remote "tree transformations"

Web-based application / front end

The new front end was built by Sheldon using the Yahoo! User Interface Library. It communicates with the PhyloWidget applet via Javascript, and provides simple UI widgets for quick inspection and editing of the tree's visual parameters.

The standards-based UI framework also provides tree database searching with autocompletion, loading and saving of trees, and a simple (and customizable) system of panels and windows for organizing and laying out the available functions.

Creation and documentation of example files for visualization

Katja and Arlin worked on identifying, creating and documenting example files for the visualization use cases:

  • Morphbank image queries: how to use Morphbank to search for morphological images of a given taxon (notes available on Katja's page)
  • NeXML test files: example files for storing various metadata (bootstrap values, taxon IDs, ancestral character states) on the tree (Arlin's notes available on the NeXML Test Files page)

Server-side "tree transforms"

We implement a few simple server-side scripts designed to take in a tree (in NeXML format), apply some type of mapping of the tree's evolutionary data into visually interpretable values, and return the transformed tree in NeXML format.

These scripts represent a basic implementation of a data processing web service, and we have tentatively dubbed them tree transforms.

The basic communication path for a tree transform is this:

  1. The user creates (or finds) a phylogenetic tree and loads it into the applet.
  2. The user clicks on a button that causes an HTTP request to be sent to the remote "transform" service, with the NeXML-formatted tree sent as a PUT parameter.
  3. The server performs the transformation and returns the tree in NeXML format.
  4. The tree is loaded back into the applet, displaying the changes made to the tree.

Throughout the course of the week, we provided a few simple tree transforms, coded in Perl CGI using Rutger Vos' Bio::Phylo library.

Boilerplate Script

The boilerplate script actually doesn't transform the tree, but rather provides a simple code structure for creating useful tree transforms. This script handles the tree saving and loading, and gives an example of how to loop through all the nodes in an input tree.

Source code:

Morphbank Integration

The Morphbank integration tree transform performs a Morphbank search for the species label of each node in the given tree, and fills in the tree with any images found to match the species label.

This script represents the simplest way to find images for a tree by using a structured query. This could later be extended to automatically search by genus or species name, or to search by a taxonomic identifier if present in the node's annotation.

This example would be an ideal starting point for implementing other image-based tree transforms, such as finding appropriate images from Google images ( , Tree of Life (, or Encyclopedia of Life (

Source code:

Bootstrap visualization

This simple example takes the bootstrap annotation from a tree and maps it to the grayscale color of the tree's branches.

Source code:

Further plans

Briefly, Greg and Sheldon were very excited by the result of the week's efforts, and they plan to continue to debug, improve, and eventually package the web-based interface into a simple and configurable UI for interacting with evolutionary databases. If you wish to influence the direction of this project, please contact either Greg or Sheldon directly!