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

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中