Macs in Chemistry

Insanely great science


Interactive plots in Jupyter Notebooks

I've been using Jupyter notebooks for a while for a wide variety of projects.

I've been looking at ways to produce interactive plots within a Jupyter notebook and after trying a couple of options to produce interactive data frames, in addition to 2D and 3D scatterplots.

Plotly's Python graphing library makes interactive, publication-quality graphs. Including line plots, scatter plots, area charts, bar charts, error bars, box plots, histograms, heatmaps, subplots, multiple-axes, polar charts, and bubble charts.

This provides some really nice tools for filtering Pandas datafames and also ways to create interactive scatter plots, that allow you to change axes, and tooltips on hovering over datapoints on both 2D and 3D scatter plots. However I could not find a way to include a chemical structure in the tooltip. This does seem to be a longstanding request.

I've included a few examples of plots in the notebook linked below.


The mpld3 project brings together Matplotlib, the popular Python-based graphing library, and D3js, the popular JavaScript library for creating interactive data visualizations for the web. The result is a simple API for exporting your matplotlib graphics to HTML code which can be used within the browser, within standard web pages, blogs, or tools such as the Jupyter notebook.

However, you should note the comment on the mpd3 website

mpld3 is no longer being actively maintained: feature requests & bug reports are likely to go unanswered

When I tried to use it I got an error

TypeError: Object of type 'ndarray' is not JSON serializable

The solution is to edit the mpld3/ file inside your mpld3 module adding these lines

elif isinstance(obj, (numpy.ndarray,)): # add this line
       return obj.tolist() # add this line

Iwatopen has published an excellent description of a method to use mpd3 to produce interactive plots in a Jupyter notebook.

The strategy was to use svg strings in the tooltip to provide the image on hovering over a datapoint in a scatter plot.

I've included a few examples of plots in the notebook linked below.

Bokeh and Holoview

Bokeh is an interactive visualization library for modern web browsers. It provides elegant, concise construction of versatile graphics, and affords high-performance interactivity over large or streaming datasets.

HoloViews is an open-source Python library designed to make data analysis and visualization seamless and simple.

Axel Pahl has created mol_frame for working with chemical structures within dataframes. In particular, there are examples of creating structures in tooltips here and here. The strategy is to add an Image column for the structure tooltips which is stored in the MolFrame for efficient plotting.

In addition there is a description for including an image in a tooltip here.

It is also possible to supply a custom HTML template for a tooltip. To do this, pass an HTML string, with the Bokeh tooltip field name symbols wherever substitutions are desired. All of the information above regarding formats, etc. still applies

I decided to create images of all the structures and then store them in a folder, the path to each of the images was then added to a new column to the data frame.

The full details are in the notebook linked below.

You can view the notebook here

The notebook and data files can be downloaded from here.

Last Updated 16 January 2019