Drawing taxon images - arklumpus/TreeViewer GitHub Wiki

This guide will provide instructions on how to draw a phylogenetic tree that includes images that give the reader an idea of what is represented in the tree.

The tree file Fish.tre contains a phylogenetic tree of 10 species of fishes from the order Cyprinodontiformes, adapted from Rabosky et al. (2018). This is a clock-like tree, i.e. it is rooted and the branch lengths are expressed in units of millions of years ago (Mya).

When the tree file is opened in TreeViewer, it should look similar to the following figure:

Adding images to the tree

We would like to add some pictures of the fish species that are included in this tree, so that the reader can get an idea of what they look like. The Fish.zip file contains 10 SVG files (one for each species):

Poecilia reticulata: adapted from an original image © Vincent Eisfeld / nordhausen-wiki.de / CC-BY-SA-4.0
Poecilia sphenops: adapted from an original photo by Hugo Torres / CC-BY-2.5-ES
All other images adapted with permission from original photos by Rudolf Pohlmann

To add these images to the tree plot, first of all you need to extract the ZIP file; then, you should add each SVG file as an Attachment to the tree, by clicking on the Add attachment button in the Attachments tab. This will embed the images with the tree file.

To actually draw the images, we need to use the Draw image plot action module. Open the modules panel by clicking on the Plot actions button in the Modules tab. You can then enable this module by clicking on the Add module button under the Plot elements. Once you have added the module, you need to set the Image parameter to one of the attachments (e.g. Aphaniops_dispar). This will draw the fish picture on the tree plot. The position of an image is determined by the Node to which it is associated; by default, the center of the image will coincide with the root of the tree. The tree plot should now look similar to the following figure:

To position the image appropriately, we need to associate it to the right node: select the tip of the tree corresponding to Aphaniops dispar by clicking on it (this will open the selection panel on the right), then click on the Use selection button next to the Node parameter of the Draw image module. This will move the fish image so that its center coincides with the selected tip. To move the image further to the right, you can increase the X component of the Position to 180 and, to make the fish smaller, you can set both the Width and Height to 80.

The tree should now be similar to the following figure:

To draw the images for all the fishes, you can repeat these steps for each fish species (do not worry if the images for the various species overlap, we will deal with this soon). To be more efficient, you can duplicate the Draw image module by clicking on the Duplicate button (represented by two small squares).

The tree should now look similar to the following figure:

To prevent the images from overlapping, we can increase the vertical spacing of the tips of the tree. To do this, expand the options for the Coordinates module, and set the Height to 500, then click Apply. The tree should now look similar to this figure:

Drawing a scale axis

This tree is a clock-like tree: therefore, rather than showing the branch lengths, we want to show a scale axis that shows the time at which the various nodes in the tree originated.

To do this, first of all the second Labels module (which shows the branch lengths) can be removed from the plot by clicking on the × button next to it. Then, you should enable the Scale axis Plot action module, by clicking on the + button under the Plot elements and selecting the module. This will cause a scale axis to be drawn on the tree, which should look similar to the following image:

To make the labels on the scale axis look nicer, you can expand the options for this module and set the End parameter to 100. Then, you can increase the Tick spacing to 10 and set the Digits to 0 (which will remove the decimal digits from the scale axis).

The tree should now look similar to the following image:

Displaying the names of the groups

This tree contains fishes from four different families within the order Cyprinodontiformes. It would be a good idea to show the names of the fish families on the tree, so that they can be easily distinguished. We can do this by using the Group labels module.

We can start by adding the names of the families to the tree. To do this, select the branch corresponding to the common ancestor of Poecilia sphenops and Poecilia reticulata; this will cause the Selection panel to open on the right. Here, click on the "tag" button to view the attributes for this node, and click on the Add attribute button to add a new attribute. A new window will open, in which you can set the Attribute name to Group, and the Attribute value to Poecilidae. This will add a new Add attribute Further transformation module to the plot, which adds the attribute to the selected node.

You should then repeat these steps to add a new Group attribute with value Cyprinodontidae to the ancestor of Cyprinodon nevadensis, Cyprinodon fontinalis and Aphaniops dispar. The ancestor of Austrofundulus leohoignei and Laimosemion xiphidus should be assigned a Group of Rivulidae, while the ancestor of Nothobranchius rachovii, Nothobranchius korthausae and Fundulopanchax deltaensis should have a Group of Nothobranchiidae. Finally, select the root node and add a Group attribute with value Cyprinodontiformes to it.

To draw the group names, you need to enable the Group labels module by clicking on the Add module button under the Plot elements. Then, expand the options for this module and set the Attribute to Group. This will cause the group labels to appear in the middle of the tree, which should look similar to the following image:

To move the group labels to the right, you should increase the Distance to 430. Then, you can increase the Height to 40 and the Margin to 20. Now, click on the button to change the Font parameter, and increase the font size to 15. Finally, set the Fill colour to something like a dark blue and the text Colour to white.

The tree should now look similar to the following image:

It would be nice to assign a different colour to each of the various families, so that they stand up a bit more. We achieve this by adding a new attribute containing the colour to the same nodes to which we added the family names. Select the ancestor of Poecilia sphenops and Poecilia reticulata and add a new attribute called LabelFillColour; leave the Attribute value empty for now. This will add a new Add attribute Further transformation module to the plot; select the Further transformations section in the modules panel and expand the options for this module, then click on the New value text box (as if you wanted to enter some text in it), then press CTRL+SHIFT+C (on Windows and Linux, or CMD+SHIFT+C on macOS). This will open a color picker window that you can use to specify a new colour. Select a light orange hue and click on the OK button: TreeViewer will automatically place the RGB Hex string corresponding to the selected colour in the text box. Now click on Apply and the colour of the Poecilidae label should change to the colour you selected.

Repeat these steps to add a light blue colour to the Cyprinodontidae, a green colour to the Rivulidae and a dark orange colour to the Nothobranchiidae (you can leave the colour for Cyprinodontiformes unchanged). The tree should now look similar to the following image:

Finally, since the tip labels of the tree show the names of the various fish species, it would be appropriate for them to be in italics. To achieve this, expand the options for the Labels module and click on the button to edit the Font; in the window that opens, select an Italic font style. The final tree figure should be similar to the following:

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 Fish.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

  • TreeViewer can draw images in multiple formats, including SVG, PDF, PNG, JPEG, GIF, and more.

  • SVG images, being in a vector format, offer the best results for publication-quality figures. However, not all features of SVG are completely supported by TreeViewer (in particular, gradients, blurs and shadows may not always work correctly). If these features are used by the image (or if for some reason the embedded image shows some artifacts), it might be necessary to use a different format.

  • While PDF is also a vector format, TreeViewer does not directly include the vector image in the output; instead, each PDF image is rasterised at the time the tree is drawn. The resolution for the rasterised image can be increased or decreased by changing the Scale factor parameter in the options for the Draw image module.

  • It might be a good idea to make sure that the images you wish to include in the tree are square (i.e. they have the same width and height). This will make it much easier to determine the Width and Height of the image in the plot. Otherwise, you will have to manually make sure that the correct width/height aspect ratio is preserved. For example, if the original image has a size of 337x115 pixel and you wish the image in the tree plot to have a width of 100, you will need to use a proportion to compute the appropriate height, i.e. 34.12. In any case, the Draw image module shows the original width and height of the image in the Image size field.

  • An image can also be used to include a second tree within the tree plot. For example, the tree in Fig. 2 of Sánchez-Baracaldo et al. (2021) was obtained by adding the small tree in the top-right corner (including some Nostocales genera, such as Richelia, Dolichospermum and Nodularia) to the larger cyanobacterial tree.

References

Daniel L. Rabosky, Jonathan Chang, Pascal O. Title, Peter F. Cowman, Lauren Sallan, Matt Friedman, Kristin Kaschner, Cristina Garilao, Thomas J. Near, Marta Coll, Michael E. Alfaro, An inverse latitudinal gradient in speciation rate for marine fishes, Nature 559, 392–395 (2018). https://doi.org/10.1038/s41586-018-0273-1

Patricia Sánchez-Baracaldo, Giorgio Bianchini, Jamie D. Wilson, Andrew H. Knoll, Cyanobacteria and biogeochemical cycles through Earth history, Trends in Microbiology, 2021. DOI: 10.1016/j.tim.2021.05.008