Phylo.io Manual

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Phylo.io Manual</title> <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <style> body { background-color: gray; } .imageContainer { font-weight: bold; } .container { background-color: #eee; padding: 50px; } </style> <body id="manual"> <nav class="navbar navbar-default navbar-fixed-top"> <div class=""> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="row" style="width: 300px"> <a class="navbar-brand" href="index.html" style="padding-left: 20px;margin-right: 5px; padding-top: 2px">  <span class="navbar-brand" style="font-size:x-large; font-weight: bold; margin-top: -3px"><img src="img/logo.svg" width="130" /></span> </a> </div> </div>  <div id="navbar" class="navbar-collapse collapse list-inline"> <ul class="nav navbar-nav navbar-right list-inline" style="margin-right: 5px"> <li><a href="manual.html" class="homelinks">Help</a></li> <li><a href="about.html" class="homelinks">About</a></li> </ul> </div>  </div> </nav> <div class="container"> <div class="row"> <h1>Phylo.io Manual</h1> <a href="./index.html"> < Back to Phylo.io</a> </div> <div class="row"> <h2>Introduction</h2> <p>Phylo.io is a state of the art tool for visualising and comparing phylogenetic trees on the web. It can be used to view a single tree, or compare the internal structure of two differently inferred trees for the same group of taxons. Phylo.io includes a number of useful features to make the viewing and comparing of even very large trees extremely easy.</p> </div> <div class="row"> <h2>Viewing a Single Tree</h2> <p>To view a single tree, put Phylo.io in 'View' mode by clicking the view button in the view/compare tab at the top of the sidebar as shown in Fig. 1. Then paste in the Newick code for your tree as shown in Fig. 2 and click 'Render'.</p> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3 imageContainer"> <img class="img-responsive" height="400px" src="img/fig1.png"> <p>Fig. 1</p> </div> <div class="col-sm-6 col-md-4 col-lg-3 imageContainer"> <img class="img-responsive" height="400px" src="img/fig2.png"> <p>Fig. 2</p> </div> </div> <div class="row"> <p>Your tree will now appear in the viewing area as shown in Fig 3.</p> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 imageContainer"> <img class="img-responsive" height="400px" src="img/fig3.png"> <p>Fig. 3</p> </div> </div> </div> <div class="row"> <h2>Using the visualisation</h2> <p>By default, the tree is collapsed beyond a depth of 3. A collapsed node is denoted by a triangle as seen in Fig. 3. The collapse depth can be changed using the option in the settings panel as shown in Fig. 4. Also, clicking a node gives an array of options as seen in Fig. 5. 'Uncollapse' uncollapses the single node and 'Uncollapse All' uncollapses all nodes in that node's subtree.</p> </div> <div class="row"> <div class="col-sm-12 col-md-5 col-lg-4 imageContainer"> <img class="img-responsive" height="400px" src="img/fig4.png"> <p>Fig. 4</p> </div> <div class="col-sm-12 col-md-7 col-lg-7 imageContainer"> <img class="img-responsive" height="400px" src="img/fig5.png"> <p>Fig. 5</p> </div> </div> <div class="row"> <p>There are a number of controls overlayed on the visualisation that allow the visualisation to be manipulated. Fig. 6A is the zoom control. Zooming of the tree can either be done using this slider or using the scroll wheel on your mouse. Fig. 6B shows the tree size controls. These can be used to manipulate the vertical and horizontal spacing of the tree to improve legibility of nodes if they are bunched together in very large trees. Fig. 6C is the search box which is discussed in the next section. Clicking the 'Download as SVG' button shown in Fig. 6D allows you to download the parts of the tree currently visible in the visualisation container in SVG format.</p> </div> <div class="row"> <div class="col-sm-12 imageContainer"> <img class="img-responsive" height="400px" src="img/fig6.png"> <p>Fig. 6</p> </div> </div> <div class="row"> <h2>Search</h2> <p>Clicking the button in Fig. 6C brings up the search box. If you start typing in here, suggested results will appear instantly. Click on the taxon you are looking for and its position in the tree will be highlighted in red along with the path to that leaf from the root of the tree as shown in Fig. 7. If the leaf is in a subtree that is currently collapsed, that subtree will be uncollapsed. Clicking the highlighted leaf node will clear the highlighting.</p> </div> <div class="row"> <div class="col-sm-12 imageContainer"> <img class="img-responsive" height="400px" src="img/fig7.png"> <p>Fig. 7</p> </div> </div> <div class="row"> <h2>Scale</h2> <p>Underneath each tree visualised, a dyanmic scale is drawn showing the length metric for that tree (Fig. 8). This updates in real time as you zoom in and explore the tree. Alternatively, if you want to view the tree without the branch lengths taken into account, you can turn this off in settings (Fig. 9). If lengths are turned off, the visualisation will update in real time to reflect this.</p> <div class="row"> <div class="col-sm-12 col-md-10 col-lg-10 imageContainer"> <img class="img-responsive" height="400px" src="img/fig8.png"> <p>Fig. 8</p> </div> <div class="col-sm-12 col-md-2 col-lg-2 imageContainer"> <img class="img-responsive" height="400px" src="img/fig9.png"> <p>Fig. 9</p> </div> </div> </div> <div class="row"> <h2>Settings</h2> <p>There are a number of options available to change the styling of the visualisation (Fig. 10) as well as the text displayed on internal nodes (Fig.11). Changing these settings will cause the visualisation to update in real time.</p> </div> <div class="row"> <div class="col-sm-12 col-md-4 col-lg-3 imageContainer"> <img class="img-responsive" height="400px" src="img/fig10.png"> <p>Fig. 10</p> </div> <div class="col-sm-12 col-md-4 col-lg-3 imageContainer"> <img class="img-responsive" height="400px" src="img/fig11.png"> <p>Fig. 11</p> </div> </div> <div class="row"> <h2>Comparing Trees</h2> <p>To compare two trees, put Phylo.io in comparison mode by clicking 'Compare' at the top of the sidebar (Fig. 12). Then, enter the Newick for your two trees in the boxes provided. The trees will appear in the viewing area coloured according to each node's simialrity to it's best corresponding node in the opposing tree (Fig. 13). The metric of comparison is a variant of the <a href="https://en.wikipedia.org/wiki/Jaccard_index">Jaccard Index</a>. A colour scale for the comparison metric will appear in the sidebar. A score of 1 denotes the subtree structure of the node is identical to the subtree structure of its best corresponding node, shown in (A). (B) Two new functions in the center of the tree visualisation allow to quickly find the best corresponding rooting and leaf-order between the two trees, explained in detail below. </p> </div> <div class="row"> <div class="col-sm-12 col-md-2 col-lg-2 imageContainer"> <img class="img-responsive" height="400px" src="img/fig12.png"> <p>Fig. 12</p> </div> <div class="col-sm-12 col-md-10 col-lg-10 imageContainer"> <img class="img-responsive" height="400px" src="img/fig13.png"> <p>Fig. 13</p> </div> </div> <div class="row"> <p>When comparing two trees, the aforementioned visualisation controls can all be used independently on each tree visualisation. Furthermore, an extra option, 'highlight', becomes available when a node is clicked (Fig. 14). This will highlight the best corresponding node for that node in the opposing tree (Fig. 15). Also, the leaves that feature in the highlighted subtree in the clicked tree will be coloured green in the opposing tree. The opposing tree visualisation will be moved to bring the corresponding node to the center, you can disable this behaviour by deselecting 'Move To BCN on Highlight Click' in the Settings Panel.</p> </div> <div class="row"> <div class="col-sm-12 col-md-4 col-lg-4 imageContainer"> <img class="img-responsive" height="400px" src="img/fig14.png"> <p>Fig. 14</p> </div> <div class="col-sm-12 col-md-8 col-lg-8 imageContainer"> <img class="img-responsive" height="400px" src="img/fig15.png"> <p>Fig. 15</p> </div> </div> <div class="row"> <p>If all leaves in a collapsed node in the opposing tree are children of the highlighted node in the clicked tree, the label for that collapsed node will be coloured dark green as seen in the right tree in Fig. 16. If the leaves of a collapsed node contain just some subset of the highlighted nodes leaves, the label will be coloured light green as seen in the right tree in Fig. 17.</p> </div> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 imageContainer"> <img class="img-responsive" height="400px" src="img/fig16.png"> <p>Fig. 16</p> </div> </div> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 imageContainer"> <img class="img-responsive" height="400px" src="img/fig17.png"> <p>Fig. 17</p> </div> </div> <div class="row"> <p>In order to quickly find the best corresponding visualisation of two trees, the functions reroot and reorder can be employed. Both ensure that the same rooting and same leaf order is found based on a fixed tree, as shown in Fig. 18 - Fig. 22. There a highlighted node is first used as root point and then the opposite tree is rerooted automatically with the same root and the leaf order is adjusted. Using finally the collapse functionality makes it possible to quickly find a representation that is very similar.</p> </div> <div class="row"> <div class="col-sm-12 col-md-4 col-lg-4 imageContainer"> <img class="img-responsive" height="200px" src="img/fig18.png"> <p>Fig. 18</p> </div> <div class="col-sm-12 col-md-4 col-lg-4 imageContainer"> <img class="img-responsive" height="200px" src="img/fig19.png"> <p>Fig. 19</p> </div> <div class="col-sm-12 col-md-4 col-lg-4 imageContainer"> <img class="img-responsive" height="200px" src="img/fig20.png"> <p>Fig. 20</p> </div> </div> <div class="row"> <div class="col-sm-12 col-md-4 col-lg-4 imageContainer"> <img class="img-responsive" height="200px" src="img/fig21.png"> <p>Fig. 21</p> </div> <div class="col-sm-12 col-md-4 col-lg-4 imageContainer"> <img class="img-responsive" height="200px" src="img/fig22.png"> <p>Fig. 22</p> </div> </div> </div> </body> </html>

CINXE.COM

Phylo.io Manual