plot descriptors in jupyter notebook using highcharts.

Last Saturday, I enjoyed mishima.syk#8.
Main topic was scikit-learn hans-on and . y-sama made great tutorial.
https://github.com/y-sama/sklearn-tutorial
I recommend check the tutorial.

Jupyter notebook is very powerful and flexible tool to analyse and visualise data.
And I found that jupyter notebook can handle html directly.
It’s means I can embed javascript to notebook.
So, I tried to plot molecular data using highcharts.
Highcharts is one of the JS library to visualise data.
Code is very simple.
Lode sdf, calculate molwt and logp, and plot them.

from IPython.display import HTML
from rdkit import Chem
from rdkit.Chem import PandasTools
from rdkit.Chem import Descriptors
import json

%%html
<script src="./Highcharts-4.2.5/js/highcharts.js"></script>

mols = PandasTools.LoadSDF( "testset.sdf" )
data =zip(
         list(map(Descriptors.MolWt, mols.ROMol)),  list(map(Descriptors.MolLogP, mols.ROMol ))
      )
data = [ list(i) for i in data ]
chartdict = {
    "chart" : { "type" : 'scatter', 'zoomType' : 'xy' },
    "title" : { "text" : 'scatter_test' },
    "xAxis" : { "title" : { "text" : "mol wt" } },
    "yAxis" : { "title" : { "text" : "logp" } },
    "series": [{ "name" : "mol/logp", "data" : data }]
 }

template = """
           <div id="container" style="width:100%; height:400px;"></div>
           <script type="text/javascript">
           $(function(){{
               $("#container").highcharts({data});
           }}
           );
           </script>
"""
HTML(template.format( data=json.dumps(chartdict)))

That’s all.
And then I got following interactive plot.
Screen Shot 2016-06-04 at 2.07.03 PM
Jupyter notebook is cool!!!
You can check my snipets in following url.
http://nbviewer.jupyter.org/github/iwatobipen/chemo_info/blob/master/highcharts_py/highchartstest.ipynb

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s