Skip to content

Drawing a tree highlighting support values

Jump to bottom
Giorgio Bianchini edited this page Oct 25, 2023 · 7 revisions

This guide will provide instructions on how to draw a phylogenetic tree highlighting the support value at each node.

The tree file Cyanobacteria.tre contains an unrooted phylogeny of 60 strains of Cyanobacteria that was obtained using a maximum-likelihood approach. Some of the nodes in the tree have high support values and others have low support.

When you open this tree file in TreeViewer, since it is unrooted, it should appear similar to the following image:

Rooting the tree

The first step is to root the tree appropriately. There are three main ways in which this can be done in TreeViewer: mid-point rooting, manually specifying the outgroup or selecting the outgroup from the tree plot.

First of all, you should change the way the tree is displayed, by clicking on the Rooted button in the Actions tab. This will update the tree plot so that it looks similar to this:

Note that the tree is still unrooted, as can be seen from the fact that there are three branches that descend from the root node.

Mid-point rooting

Mid-point rooting determines the root of the tree by finding the two tips that are most distant from one another and placing the root in the middle of the path connecting them. This approach is only appropriate if the tree is balanced and the evolutionary rate is constant; however, there may not be much choice if an outgroup is not known.

To root the tree using mid-point rooting, first of all open the modules panel by clicking on the Further transformations button in the Modules tab. Then, you should add a Further transformation module by clicking on the Add module button in the panel. Then, select the Reroot tree module from the list. Finally, expand the options for the newly-added module, and change the Rooting mode to Mid-point.

This will change the root of the tree, so that the clade containing Candidatus Melainabacteria and Candidatus Gastranaerophilales strains is an outgroup to the rest of the tree.

Outgroup rooting (manually specifying the outgroup)

As an alternative to mid-point rooting, the tree can be rooted by specifying the outgroup. To do this, first of all change the Rooting mode back to Outgroup in the options for the Reroot tree module.

Then, click on the Edit button next to the Outgroup parameter to open a node selection window. In this tree, the outgroup corresponds to the last common ancestor (LCA) of Candidatus_Gastranaerophilales_bacterium_HUM_10_GCA_002102745.1 and Candidatus_Melainabacteria_bacterium_GCA_003242885.1; therefore, you should select these strains in the window (the names are sorted alphabetically).

Click OK to close this window, and the tree should now be rooted with the specified outgroup.

Outgroup rooting (selecting the outgroup on the tree)

Especially when the tree contains many taxa, manually selecting the outgroup can be a bit boring. As an alternative, it is possible to locate the outgroup on the tree and use a Selection action to root the tree using the specified outgroup.

To do this, first of all remove from the plot the Reroot tree module by clicking on the × button next to it (so that the tree goes back to being unrooted). Now, locate on the tree the branch corresponding to the outgroup (it is the branch with length 0.53 around the middle of the tree) and click on it.

Clicking on the branch will highlight it, open the Selection panel on the right, and enable the Selection actions ribbon tab. You can now use the Re-root tree button in the Selection actions tab to root the tree using the selected node as the outgroup.


Regardless of the rooting method used, the tree should look approximately the same:

Highlighting support values

Look at the modules in the Plot elements section of the modules panel (which you can access by either clicking on the Plot actions button in the Modules tab, or directly clicking on the rightmost button in the modules panel). You will notice that three modules have been loaded: one instance of the Branches module (which draws the branches of the tree), and two instances of the Labels module (one of which draws the tip labels, and the other one that draws the branch length labels).

In this tree, we do not want to show the branch lengths, and we instead want to show the support values. To do this, expand the options for the second Labels module and, in the Attribute section at the bottom, change the Attribute to Support. The tree plot will update, showing the support values instead of the branch lengths. As you can see, most of the nodes have a 100% support; however, there are quite a few nodes that have low support values.

Unfortunately, it can be hard to see all these small numbers on the tree; instead, we can highlight the support values for the nodes in a more "visual" way, so that one can see at a glance where are the problematic parts of the tree.

To do this, first of all remove the second Labels module (the one that is currently showing the support values) to clean up the plot a bit. Then, add a new Plot action module by clicking on the Add module button in the Plot elements section, and select the Node shapes module.

This module draws shapes at the nodes in the tree; we are going to use these shapes to highglight the support value of the nodes. If you expand the options for the Node shapes module, you will see that by default the module shows the node shapes only at the leaves of the tree; since we wish to show the support values at internal nodes, you should change the value of the Show on parameter to Internal nodes. You should then change the Shape to Circle and increase the size a bit (e.g. to 10) to make the shapes more visible:

The plot now shows a randomly-coloured circle at each internal node of the tree. We now need to change the colours of the shapes so that they reflect the support values of the nodes. To do this, first of all disable the Auto fill colour by node option. This will cause all the node shapes to become light blue. Now, click on the little wrench button next to the button used to select the Fill colour, in order to open a Colour formatter window. In this window, enter Support in the Attribute name text box and change the Attribute type to Number.

The interface will update to show some options on the left. In particular, the support values that we want to show range from 0 to 100, therefore you should update the Maximum to 100. In this way, support values from 0 to 100 will be mapped onto the colour gradient that is shown in the window (so that, e.g. 100 becomes fully black, 0 becomes fully transparent and 50 becomes a half-transparent black). Click OK to close the window.

The colours of the node shapes will now change, with most nodes appearing black; there will be one node shape that is still blue (this is on the branch that we used to root the tree), but we will deal with that later.

This display is still not ideal, as the colours are too similar to each other; instead, we could:

  • Hide the shapes for nodes that have 100% support (which are the majority), to make the lower-support nodes stand out more.
  • "Discretise" the colour, e.g. so that nodes with a support value lower than 95% appear black and nodes with a support value between 95% and 99% appear grey.

We can achieve this by changing the gradient in the Colour formatter window. Click again on the wrench button next to the Fill colour button. In the new window, first of all change the default colour: this is the colour that is used to draw the shape for nodes that do not have a Support value (i.e. the node that was blue in the plot). We want to hide this node shape; therefore, you should set the colour's A value (in the Transparency section of the colour picker window) to 0.

You can then click on the gradient to change it from the default value. The gradient is specified by a series of "gradient stops", which associate a certain colour to a value between 0 and 100 (i.e., the minimum and maximum value that we specified in the formatter window). The colour for values between two gradient stops is determined by interpolating the colours of the two stops. The support values are then mapped on the gradient, and the corresponding colour is used to fill the node shape.

As we said, we wish support values lower than 95% to appear black, support values between 95% and 99% to appear grey, and support values greater than 100% to be invisible (i.e. transparent). Therefore, we want to use the following gradient stops:

  • At 0, black
  • At 94.9, black (again)
  • At 95, grey
  • At 99, grey (again)
  • At 99.1, transparent
  • At 100, transparent (again)

In this way, values on the gradient between 0 and 94.9 will be black, values between 95 and 99 will be grey and values between 99.1 and 100 will be transparent. By using two gradient stops very close to each other, we are able to achieve a "sudden" change in colour. You should now use the gradient editor window to specify these gradient stops (use the Add gradient stop button to add new gradient stops as needed; you can also double-click on the gradient preview). The final gradient should look like this:

Click OK to close the Colour formatter window. In the tree plot, now most nodes should not have a shape, some nodes should have a grey shape (support values between 95% and 99%) and some nodes a black shape (support values lower than 95%). To verify this, you can click on a node; this will open the selection panel on the right. Here, click on the "tag" button to open the tab with all the attributes of the node, and check that its Support value corresponds to the colour of the shape.

Collapsing nodes with low support

Now, some nodes in this tree have a very low support value (e.g. lower than 70%); it might be misleading to show these nodes in the tree, as there is very few evidence for their existence in the data. Instead, we can transform these nodes into "polytomies", highlighting the uncertainty surrounding them. This can be achieved using the Polytomise node module.

An individual node can be transformed into a polytomy by using the corresponding button in the Selection actions tab; however, we wish to transform into polytomies all nodes with a support value lower than 70%, without having to select them one at a time. To do this, first add a new Further transformation module and select the Polytomise node module. Then, expand the options for the new module and change the Mode to Attribute match. This will allow us to transform into polytomies all the nodes that satisfy a certain criterion.

Now, enter Support in the Attribute text box. The Attribute type box should automatically update itself to Number. Enter 70 in the Value text box, and choose Smaller than under Comparison type. In this way, all nodes with a Support value smaller than 70 will be matched and transformed into polytomies. Finally, click on the Apply button to apply the changes.

The tree will be updated and the nodes with low support values will be transformed into polytomies.

In this new tree, nodes with support values lower than 70% have been collapsed, nodes with a support value between 70% and 95% are marked in black, and nodes with a support value between 95% and 99% are marked in grey.

Adding a legend

Finally, it would be nice to add a legend to the tree, highlighting the meaning of the circles on the nodes. We can do this using the Legend module.

To add a legend, add a new Plot action module, and select the Legend module. A legend will appear at the bottom of the tree, with a red circle, a blue square and a green star. Expand the options of this module, and click on the Edit button for the Markdown source parameter. In the Markdown editor window, enter the following Markdown code:

### **Legend**

![](circle://8,black) 70% ≤ _BS_ < 95% \
![](circle://8,#808080) 95% ≤ _BS_ ≤ 99% \
![](circle://8,white,1,black) _BS_ > 99%

_BS_: ultrafast bootstrap support

The preview of the Markdown code will show a preview of how this code will be rendered. You can learn more about Markdown at the CommonMark website. Notable things about the code you just entered are:

  • &leq;, &lt; and &gt; are HTML entity codes encoding for the ≤, < and > symbols, respectively.

  • ![](circle://8,black) and the other similar parts are "special" images supported by TreeViewer to easily draw symbols; see the readme for the Legend module for more information about these.

Close the Markdown editor window by clicking on the OK button. The legend will update to reflect the new code that you entered.

We now need to choose the position the legend; the bottom-left part of the tree looks quite empty, thus it would be a good idea to put it there, rather than at the bottom of the tree. To do this, in the options for the Legend module, select Bottom-left for both the Anchor and the Alignment options.

This works because the value selected for the Anchor corresponds to a point on the plot (i.e. the bottom-left corner of the tree plot), while the value selected for the Alignment corresponds to a point on the legend (i.e. the bottom-left corner of the legend). The module then causes these two points to coincide (i.e. the bottom-left corner of the legend is placed at the bottom-left corner of the plot). By combining different values for the Alignment and the Anchor, it is possible to display the legend at various positions around the tree.

The Position parameter can also be used to manually fine-tune the position of the legend. For now, set both X and Y to 0.

Finally, you can increase the Font size to make the legend more legible. For example, set this to 25 (note how the coloured symbols also increase in size). However, this will cause the legend to overflow the available horizontal space, thus some of the text will flow to a new line. To prevent this, you should also increase the Width of the legend to 400.

The finished tree should look like this:

You can now save the tree file or the plot as a PDF or SVG file using the items from the File menu. You can also download the Cyanobacteria.tbi tree file, which contains the tree along with all the modules. The finished tree file is also available in the Examples section of TreeViewer's welcome page in the File page.

Tips

  • If the tree contains multiple support values (e.g. in Newick format it looks something like ... (A,B)77/87/99 ...), each support value will be stored in a separate attribute: the first one (in this case 77) will be in the Support attribute, the next one in the Support2 and so on (so, in this case Support2 would be set to 87 and Support3 to 99). You can then follow the steps in this tutorial to highlight the different support values.

    • You may also highlight all support values at once: to do this, add multiple instances of the Node shapes module (using the Duplicate button), each showing a different attribute, and change the Position so that they do not overlap.

    • Similarly, you could use multiple instances of the Labels module to show a separate label for each support value.

Alternative approaches

Note that the approach described here is not the only way in which it is possible to obtain a result like this. Alternatives could be:

  • Use a custom script in the Colour formatter (to avoid the hassle of creating the gradient). In the script, use a series of if statements to return different colours based on the value for the Support attribute, e.g.:

    public static Colour? Format(object attribute)
{
    if (attribute is double attributeValue && !double.IsNaN(attributeValue))
    {
        if (attributeValue < 95)
        {
            return Colours.Black;
        }
        else if (attributeValue <= 99)
        {
            return Colours.Grey;
        }
        else
        {
            return Colour.FromRgba(0, 0, 0, 0);
        }
    }
    else
    {
        return null;
    }
}

  • Use multiple instances of the Replace attribute module to search for nodes matching the various thresholds for the Support attribute and add a new attribute to determine the colour of the node shape. For example, you could:

    1. Add a Replace attribute instance that matches nodes where the Support attribute is lower than 99.1 and sets an attribute called SupportColour to the value grey.
    2. Add another Replace attribute instance that matches nodes where the Support attribute is lower than 95 and sets the SupportColour attribute to the value black (note that this will overwrite the value set by the previous module for values lower than 95).
    3. In the node shapes module, set the attribute name to SupportColour, the attribute type to String and the default colour to a transparent colour.

All these alternative approaches produce essentially the same plot as the procedure described in this tutorial; depending on the situation one approach might be easier to implement than the others.

Clone this wiki locally