Macs in Chemistry

Interactive Plots for Cheminformatics 1

I have a regular need to share results from my work and historically this has been via a paper reports that have more recently been replaced by electronic versions. Whilst useful, these reports lack the interactivity, in particular it is extremely useful to be able to easily link data points on a scatter plot with the corresponding chemical structure. So I’ve started using web-based reports to add extra functionality. Unfortunately it has often required the addition of applets or plugins that I can’t be sure the viewer will have available so with the advent of HTML5 I’ve been exploring writing the reports using just HTML and javascript.
One of the major challenges is to produce interactive plots instead of using static images, and I’ve been exploring the use of Flot to produce a plot with chemical structures produced using either a web-service like Chemspider or a javascript library of web components developed by ChemDoodle. On this page I’ve created a plot that uses ChemSpider to provide the popup images, but of course this could be provided by any web-service, on the next page the plot has the structures embedded in the web-page and uses ChemDoodle Web components to render them in a popup.

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series, as shown in the plot below taken from one of the examples provided with the distribution.


The Flot distribution comes with a detailed description of the API and I'll only include a basic description of how to construct the plots here.







First you need to create a placeholder div to put the graph in, including an id and size:

div id="placeholder1" style="width:600px;height:300px"

You then provide the data

$(function () {

// The Data [x,y,name,chemspiderId]
var redDots = [[3,6,'Aminopyrine',5787],
[3.3,1.9,'Amodiaquine',2080],
[2.7,0.8,'Zomepirac',5531]];

Flot uses the first two variables as the x and y coordinates for the plot and ignores the name and ChemSpider ID which are used later in the popup window.
Then set up the plot option, if you want interactivity it seem you need to set both the points and the grid as hoverable etc.

// Setup plot options
var plot = $.plot($('#placeholder'), [
{data:redDots, points:{show: true}, color:'#FF0000', label:'Withdraw/Blackbox', hoverable:true},
{data:greenDots, points:{show: true}, color:'#00FF00', label:'Warning', hoverable:true},
{data:blueDots, points:{show: true}, color:'#0000FF', label:'Safe', hoverable:true},
],
{
grid: {hoverable:true, clickable:true },
xaxis: {min:-1.0, max:4},
yaxis: {min:-1.0, max:3.3}
});

This is all you need to construct the plot, if you want to add interactivity you need to define the popups:

// Detect hover and call showPopup function
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#popup").remove();
showPopup(item.pageX, item.pageY, item.series.data[item.dataIndex]);
}
}
else {
$("#popup").remove();
previousPoint = null;
}
});

// Takes a datapoint and constructs the popup window
function showPopup(x, y, dataPoint) {
$(< div id="popup">< img src="http://www.chemspider.com/ImagesHandler.ashx?id='+dataPoint[3]+'" alt="'+dataPoint[2]+'" />< br />'+dataPoint[2]+'< /div>').css( {
top: y + 5,
left: x + 5
}).appendTo("body").fadeIn(200);
}
});

The molecular structures are pulled from ChemSpider on the fly using a URL constructed from the ChemSpider Id ( e.g. http://www.chemspider.com/ImagesHandler.ashx?id=5787) and displayed in the popup window using the name as the title for the popup. One thing to remember is that javascript numbers the variables 0,1,2,3 etc. so whilst each point is in this format [x,y,name,chemspiderId] the “name” is actually dataPoint[2]. I could not see how to add labels to axes so these were added either side of the placeholder div as plain HTML.

A real example is shown on the below using data from (A Zone Classification System for Risk Assessment of Idiosyncratic Drug Toxicity Using Daily Dose and Covalent Binding, DRUG METABOLISM AND DISPOSITION Vol. 37, No. 9, 1970-1977 (2009), doi:10.1124/dmd.109.027797.) (created using Flot and pulling the structures from ChemSpider, with thanks to Matt for help with coding), log-normalised covalent binding is plotted against the log-normalised daily dose.If you mouse over the points on the graph you should see the structure of the drug in a popup window.

Log Covalent Binding Log Dose
For those occasions when the structures are not available as a web-service we need to be able provide an alternative strategy, and on the next page you can see how to construct the same plot but using ChemDoodle web components to render the structures that are embedded in the actual web page.

Using Flot and ChemDoodle Web Components

There are more tutorials, scripts and reviews here