Interactive Plots for Cheminformatics 2
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 the previous page I showed how to create a plot using ChemSpider or CIR to create popups that showed the molecular structure associated with points on a plot. This works fine if the structure is in Chemspider but on many occasions the structures will be novel and/or proprietary. Under these circumstances you could either pull the structures out of a local database or actually embed the structural information in the web page and use the ChemDoodle web components to render the image. This page aims to show you how to do the later.
To get the molecular structure in the correct format open up ChemDoodle and you can either draw the structure, open a structural file if available or as I did here use the MolGrabber to pull the structure from ChemSpider and then click the arrow to transfer it to the ChemDoodle drawing area.
We now need to convert the structure to a javascript data file that the ChemDoodle we components can read, the easiest way to do this is to “Save as Javascript Data File from with in ChemDoodle.
If you open the saved javascript data file you can see that the structure is converted to a single string with no line breaks, if you have sdf file containing the structures you can effect the same transformation by hand to get the correct format.
With all the molecular structures in the correct format we can then think about adding them to the plot. The format for the variables in the webpage is now
var redDots = [[x,.y6,'Name',ChemSpiderId,'Molecule Name\n CHEM.......],
...],
....]]:
I’ve left the ChemSpider Id in the list just to make it easier to compare with the previous plot and also it gives the opportunity to try the onClick option
The first part sets up the stylesheets for each element.
<!-- ChemDoodle HTML -->
<div id="cdContainer">
<script>
// Create empty ChemDoodle canvas with id=cdCanvas, the CSS hides it with display:none;
var cdCanvas = new ViewerCanvas('cdCanvas', 100, 100);
</script>
<span id="caption"></span>
</div>
<!-- CSS for everything -->
<style>
body {
font-family: sans-serif;
font-size: 12px;
max-width: 1000px;
}
//plot and cursor over plot
#placeholder {
cursor:crosshair;
width:800px;
height:500px;
}
//ChemDoodle canvas
#cdContainer {
position:absolute;
border:4px solid #999;
border-radius: 5px;
background:#eee;
padding:5px;
display:none;
color: #555;
font: 12px 'Lucida Grande';
text-align: center;
}
</style>
The next section contains the data for each series
// The Data
var redDots = [[3.4771212547196624,.0086001717619176,'Aminopyrine',5787,'Molecule Name\n CHEMDOOD04301107333D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 17 18 0 0 0 0 0 0 0 0 1 V2000\n 1.5989 0.1481 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 0.6479 0.4571 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.3389 1.4081 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.1611 -0.1307 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 0.9267 2.2172 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n -0.6611 1.4081 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.9701 0.4571 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n -0.1611 -1.1307 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.5199 3.1307 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.9212 2.1126 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.2489 2.2172 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.9212 0.1481 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.0272 -1.6307 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7049 -1.6307 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.0272 -2.6307 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7049 -2.6307 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.1611 -3.1307 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 7 4 1 0 0 0 0\n 7 6 1 0 0 0 0\n 7 12 1 0 0 0 0\n 4 2 1 0 0 0 0\n 4 8 1 0 0 0 0\n 5 3 1 0 0 0 0\n 5 9 1 0 0 0 0\n 5 10 1 0 0 0 0\n 6 3 2 0 0 0 0\n 6 11 1 0 0 0 0\n 3 2 1 0 0 0 0\n 8 14 2 0 0 0 0\n 8 13 1 0 0 0 0\n 14 16 1 0 0 0 0\n 13 15 2 0 0 0 0\n 16 17 2 0 0 0 0\n 15 17 1 0 0 0 0\nM END'],
.....
.....
The last part sets up the plot (including the legend) and the popup options (the offset is influenced by the sidebar and header).
// 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}
});
// 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;
$("#cdContainer").fadeOut(200);
showPopup(item.pageX, item.pageY, item.series.data[item.dataIndex]);
}
}
else {
$("#cdContainer").fadeOut(200);
previousPoint = null;
}
});
// Takes a datapoint and constructs the popup window
function showPopup(x, y, dataPoint) {
cdCanvas.loadMolecule(readMOL(dataPoint[4]));
$('#caption').text(dataPoint[2]);
$('#cdContainer').css({top:(y-100), left:x-190}).fadeIn(200);
}
});
If you mouse over the points on the graph you should see the structure of the drug in a popup window, this structure is rendered using a ChemDoodle Web Component.
Log Covalent Binding
Using Flot and ChemSpider
More Reviews and Tutorials
Updated 27 July 2017