Topo-phylogeny is an alternative approach to displaying phylogenetic relationships. It visualizes each node of a tree as a point on a two-dimensional map, with the placement, surrounding color and distance from other nodes determined by its attraction to parent and sister nodes, branch length, and hierarchical level. Topographic contour shapes indicate which level related nodes are connected at. Gaps between clusters indicate clades from a different lineage.
Begin by pasting the contents of a Newick file into the input box, or load a file from your hard drive by clicking the 'Select File' button. The Newick file gets parsed with Newick.js by Jason Davies and converted into a JSON object. This object is passed into d3.phylogram.js by Ken-ichi Ueda to build the phylogenetic tree and radial dendogram visible on the left side of the page.
On the right side of the page, the Topo-phylogeny is created as an SVG image. Each node consists of a stack of circles, with the top circle in the stack containing the label and each circle below it sized and coloured according to its distance from the root and the cumulative branch length. The nodes determine their positions according to three basic principles:
Circles are drawn to the screen according to their hierarchical level (see diagram below), so when nodes come together their stack of circles interleave with one another. This ensures that higher level circles don't get covered by lower level circles. A combination of SVG blur and sharpen filters (collectively known as the "goo" effect) blends circles from the same level together, creating the perception of a single combined shape. This helps create the topographic map effect.
This tool was written by Jamie Waese with support from David Guttman and Nicholas J. Provart at the University of Toronto. It uses a combination of D3.js, jQuery and Materialize.css
This visualization paradigm is similar to Max Fürbringer's "Phylogenetic Tree of Birds" diagram, which shows groups of related items on slices of a hierarchical tree. This was published in 1888 in Untersuchungen zur Morphologie und Systematik der Vögel.
This image was published in Isabel Meirelles' Design for Information: An Introduction to the Histories, Theories, and Best Practices Behind Effective Information Visualizations. The digital scan was accessed from The Genealogical World of Phylogenetic Networks blog.
