Background

Interpreting phenotypic variation presented through scientific figures is often challenging because the traits of interest are hidden behind data points. Specifically, in scatterplots or biplots of Principal Component Analysis (PCA), which can be very high-dimensional, the visual impression often remains abstract. Using pictograms in addition to data points, or adding interactive elements, can be a powerful way to increase the communicative value of a figure (especially if your study organism is as charismatic as these Junonia butterflies below). Interactive figures that show organisms are becoming increasingly feasible with the use of computer vision (automated extraction of meaningful information from images) to extract not only the phenotypic information but the relevant regions of interest (ROIs) themselves. In this post, I will show how to implement both approaches in Python, using the matplotlib and bokeh library

Pictogram-based figure

In this approach the goal is to plot the pictograms directly into the plot panel, which can be useful if you want to see all the variation in your dataset at once, so relationships of interest become visible, or if interactive figures are not an option (e.g., in publications). This is fairly straightforward using matplotlib’s offsetbox module. Below is an example that uses the ROis from a scan image to demonstrate how pigmentation increases with body size in isopods - see the result below, where the pictograms are plotted at their centroid on top of the data point:

Reproduce the figure with the following gist and by downloading the isopod dataset and scripts.

Interactive figures

The solution for producing interactive figures is a bit more involved (but not too much). Here we use bokeh, an extremely powerful library for static and interactive plots in Python. bokeh allows you to add all sorts of tools (e.g. box or lasso selection), but the most important one here is the creation of a custom java-based hover tool. This tool displays trait information and pictograms that have been extracted from the same scan image as above in a panel to the right when hovering over points on the scatter plot. The final layout, which combines the scatter plot and image display, is rendered and saved as an HTML file - give it a try by hovering over the points:

Reproduce the figure with the following gist and by downloading the isopod dataset and scripts.