TS
Uploaded byTakayuki Serizawa
PDF, PPTX1,415 views

mishimasyk#4

mishimasyk#4のすらいどどえす。

Embed presentation

Download as PDF, PPTX
Cytoscape.js を使ってみました。 @iwatobipen
自己紹介 ● 某製薬企業で働いてます。 ● 普段はウェット側（一応）。 ● 興味=>chemoinfo。
Cytoscape.js ● http://js.cytoscape.org/ ● Cytoscape とは全く同じではありません ● エンドユーザー側でなく開発側のアプリ ● jQuery と同じ雰囲気
Cytoscape.js でアクセスする要素 cy; core• ベース eles; ノードもしくはエッジの集合 ele; ノードもしくはエッジ nodes; ノードの集合 node; ノード edges; エッジの集合 edge; エッジ object.function1().function2()....
たとえば。。。selectors cy.style() .selector('node[degree >= 5]') .css({'hoge' : 'huga'}).update() ノードオブジェクトのうち 結合次数 > 5 のノードに関して hoge を huga とする 変更を反映させる
分子の類似性でネットワーク 俺たちそっくりだね〜 類似性高いね〜 ☆ 本日のサンプル ①分子をFingerPrint で記述 ②類似性が閾値より高い時エッジを結ぶ ③ cytoscape.js で可視化 mol 1 mol 2 Tc > 0.8
Javascript + HTML... うおー( ； ･`ω ･´) JavaScript & HTML ? 開発なんてしたことない、、、オマエ書けよ〜 無理無理
そうだPython でいこう！ Flask でがんばろー おー！！！ * 普通にHTML 書けるのなら そちらで全然問題ないです。
Flask なのでこんな構成 iwatobipen$ tree mishimasyk4 mishimasyk4 ├ ── Readme.rst ├ ── __init__.py ├ ── app.py ├ ── requierments ├ ── sampledata │ ├ ── __init__.py │ ├ ── csv_sdf.py │ ├ ── document chemistry_20141011_130145_833.csv │ ├ ── document chemistry_20141011_130145_833.sdf │ └── for_network.py ├ ── static │ ├ ── js │ │ ├ ── javascript いろいろ │ └── jsondata │ └── mols.json └── templates ├ ── templ.html 　テンプレート └── top.html
ネットワークの表現方法 JSON ?
“nodes”: ネットワークをJSON で [{ "data": { "degree": 1, "molwt": 379.5, 後ほどリンクで画像をとる "href": "http://cactus.nci.nih.gov/chemical/structure/smi/image", "smi": "COc1cc2[nH]c(C)c(CCN3CCN(c4ccccc4)CC3)c2cc1OC", "id": "mol_0", "molid": 0 }}, ], “edges”: [ { "data": { "source": "mol_237", "target": "mol_207", "id": "237>>207", "similarity": 0.75 }, ] 結合次数 エッジの向きも表現できます
RDKit でつくりました。 class Node(object): def __init__(self,mol): self.mol = mol def mw( self ): return round( Descriptors.MolWt( self.mol ), 2 ) def smi( self ): return Chem.MolToSmiles( self.mol ) class Edge(object): def __init__(self, mol1, mol2 ): self.mol1 = mol1 self.mol2 = mol2 def source( self ): return Chem.MolToSmiles( self.mol1 ) def target( self ): return Chem.MolToSmiles( self.mol2 ) def sim(self): fp1 = AllChem.GetMorganFingerprintAsBitVect(self.mol1, 2) fp2 = AllChem.GetMorganFingerprintAsBitVect(self.mol2, 2) tc = DataStructs.TanimotoSimilarity(fp1,fp2) return tc Node class Edge class
前のコードで作ったファイルを読む <script> // load JSON items = [] $.getJSON(("static/jsondata/mols.json"), function(data){ items = data; return items; }); </script> JSON ファイルを読み込んでおく
以下はHTML / JavaScript
Flask では特別なことしない Flask 便利だね〜 BootStrap も使えるね〜 from flask import Flask from flask_bootstrap import Bootstrap from flask import render_template def create_app(): app = Flask( __name__ ) Bootstrap( app ) return app app = create_app() @app.route("/") def root(): return render_template("top.html") @app.route("/circle") def circle(): return render_template("circle.html") @app.route("/cola") def cola(): return render_template("cola.html") Make web Using flask
Template 側のjavascript cy というID のdiv にバインドする static なグラフは mapData を使える $(function(){ $("#cy").cytoscape({ style: cytoscape.stylesheet() .selector('node') .css({ 'background-color': 'gray', 'border-color' : 'black', 'border-width' : 3 'width': 'mapData(degree,1,10,10,50)', 'height': 'mapData(degree,1,10,10,50)' }) .selector('edge') .css hogehoge mapData メソッド 要素の属性を指定値で可視化 ( 次数, 最小, 最大,10,50) にスケーリング
Javascript であれこれ 描画の準備DOM 全部読み込んだら動作させる クリックしたらsmiles を表示 static なグラフは mapData を使える ready: function(){ // this refer cy console.log("ready2"); window.cy = this; cy.load(items); // insert some events! cy.on('tap', 'node', function(){ alert("smiles is "+this.data('smi')); cy.on('tap', 'node', function(){ window.open(this.data('href')); $('#mol_wt').text("mol_wt is; "+this.data('molwt')); }); } クリックしたら構造を取得する
Layout null random preset grid circle concentric breadthfirst dagre cose cola arbor springy 複数のアルゴリズムがあります
サンプル作ってみました https://github.com/iwatobipen/mishimasyk
実行すると多分動く Flask, flask-bootstrap は必要ですが。
Cytoscape に比べノードエッジの数が多いと挙動が遅くなる。 ですが,webapp であれこれできるので とても興味深いツールではないかと思います

More Related Content

PDF
「Html sql」で図書館hpにアクセスしてみよう
byKentaro Matsui
 
PDF
PHP5.5新機能「ジェネレータ」初心者入門
bykwatch
 
PDF
Synthesijer hls 20150116
byTakefumi MIYOSHI
 
PDF
traitを使って楽したい話
byinfinite_loop
 
PDF
Teclab3
byEikichi Yamaguchi
 
KEY
Ll xcode
byNet Kanayan
 
PPTX
Deep dive into oss written in swift
byYuki Asai
 
PDF
メタメタプログラミングRuby
byemasaka
 
「Html sql」で図書館hpにアクセスしてみよう
byKentaro Matsui
 
PHP5.5新機能「ジェネレータ」初心者入門
bykwatch
 
Synthesijer hls 20150116
byTakefumi MIYOSHI
 
traitを使って楽したい話
byinfinite_loop
 
Teclab3
byEikichi Yamaguchi
 
Ll xcode
byNet Kanayan
 
Deep dive into oss written in swift
byYuki Asai
 
メタメタプログラミングRuby
byemasaka
 

What's hot

PDF
初級者向けレッスン 51回 ─── 例外
byhigaki
 
KEY
Clojrue 13 testing
byKiyotaka Kunihira
 
PDF
Ruby初級者向けレッスン 45回 ─── 例外
byhigaki
 
ODP
0x300
bygeek_alice
 
PPTX
Perlでちょいモテデザインパターン
byYuki Manno
 
PDF
for JSDeferred Code Reading
byKenichirou Oyama
 
PDF
FxUG in Toyama - ASphalt2 container -
byAkio Katayama
 
PDF
JavaScript入門
byRyo Maruyama
 
PDF
知って得する標準関数の使い方
bySoudai Sone
 
PDF
Garageをもうちょっと触ってみた
byYoichi Toyota
 
PDF
Ruby初級者向けレッスン 55回 ─── 例外
byhigaki
 
PDF
JavaScript超入門 基礎
bytetsu6
 
PDF
Rx java x retrofit
byShun Nakahara
 
PDF
20120422i phonedeveloperworkshoppublished
byYoichiro Sakurai
 
PDF
CodeIgniter入門
bySho A
 
PPTX
J qmobiはjqueryから軽量化しているか
byHisashi Aruji
 
PDF
クロージャデザインパターン
byMoriharu Ohzu
 
PDF
Elixirだ 第2回
byJoe_noh
 
PDF
探検！SwiftyJSON
byYuka Ezura
 
KEY
Development app-with-elixir
byk1complete
 
初級者向けレッスン 51回 ─── 例外
byhigaki
 
Clojrue 13 testing
byKiyotaka Kunihira
 
Ruby初級者向けレッスン 45回 ─── 例外
byhigaki
 
0x300
bygeek_alice
 
Perlでちょいモテデザインパターン
byYuki Manno
 
for JSDeferred Code Reading
byKenichirou Oyama
 
FxUG in Toyama - ASphalt2 container -
byAkio Katayama
 
JavaScript入門
byRyo Maruyama
 
知って得する標準関数の使い方
bySoudai Sone
 
Garageをもうちょっと触ってみた
byYoichi Toyota
 
Ruby初級者向けレッスン 55回 ─── 例外
byhigaki
 
JavaScript超入門 基礎
bytetsu6
 
Rx java x retrofit
byShun Nakahara
 
20120422i phonedeveloperworkshoppublished
byYoichiro Sakurai
 
CodeIgniter入門
bySho A
 
J qmobiはjqueryから軽量化しているか
byHisashi Aruji
 
クロージャデザインパターン
byMoriharu Ohzu
 
Elixirだ 第2回
byJoe_noh
 
探検！SwiftyJSON
byYuka Ezura
 
Development app-with-elixir
byk1complete
 

Viewers also liked

PDF
Rdkitの紹介
byTakayuki Serizawa
 
PDF
Mishimasyk 3 20140705
byTakayuki Serizawa
 
PDF
201310slide day1
byTakayuki Serizawa
 
PDF
Mishimasyk5 chemomine up
byTakayuki Serizawa
 
PDF
Mishimasyk6 iwatobipen
byTakayuki Serizawa
 
PDF
FAMSとchooseLDを用いたインシリコ創薬パイプライン
byY-h Taguchi
 
PDF
Mishimasyk
byTakayuki Serizawa
 
PDF
IPython notebookを使おう
byKazufumi Ohkawa
 
PDF
あまり知られていない静岡の言語戦争の歴史
byKazufumi Ohkawa
 
PDF
主成分分析を用いた教師なし学習による変数選択を用いたヒストン脱アセチル化酵素阻害剤の機能探索
byY-h Taguchi
 
PPTX
Mishimasyk141025
byKazufumi Ohkawa
 
PPTX
R -> Python
byKazufumi Ohkawa
 
PPTX
R seminar on igraph
byKazuhiro Takemoto
 
PDF
実践で学ぶネットワーク分析
byMitsunori Sato
 
PDF
現在のDNNにおける未解決問題
byDaisuke Okanohara
 
PDF
Python東海Vol.5 IPythonをマスターしよう
byHiroshi Funai
 
PDF
Pythonで簡単ネットワーク分析
byantibayesian 俺がS式だ
 
PDF
IIBMP2016 深層生成モデルによる表現学習
byPreferred Networks
 
KEY
『繋がり』を見る：　Cytoscapeと周辺ツールを使ったグラフデータ可視化入門
byKeiichiro Ono
 
PDF
IPAB2017 深層学習を使った新薬の探索から創造へ
byPreferred Networks
 
Rdkitの紹介
byTakayuki Serizawa
 
Mishimasyk 3 20140705
byTakayuki Serizawa
 
201310slide day1
byTakayuki Serizawa
 
Mishimasyk5 chemomine up
byTakayuki Serizawa
 
Mishimasyk6 iwatobipen
byTakayuki Serizawa
 
FAMSとchooseLDを用いたインシリコ創薬パイプライン
byY-h Taguchi
 
Mishimasyk
byTakayuki Serizawa
 
IPython notebookを使おう
byKazufumi Ohkawa
 
あまり知られていない静岡の言語戦争の歴史
byKazufumi Ohkawa
 
主成分分析を用いた教師なし学習による変数選択を用いたヒストン脱アセチル化酵素阻害剤の機能探索
byY-h Taguchi
 
Mishimasyk141025
byKazufumi Ohkawa
 
R -> Python
byKazufumi Ohkawa
 
R seminar on igraph
byKazuhiro Takemoto
 
実践で学ぶネットワーク分析
byMitsunori Sato
 
現在のDNNにおける未解決問題
byDaisuke Okanohara
 
Python東海Vol.5 IPythonをマスターしよう
byHiroshi Funai
 
Pythonで簡単ネットワーク分析
byantibayesian 俺がS式だ
 
IIBMP2016 深層生成モデルによる表現学習
byPreferred Networks
 
『繋がり』を見る：　Cytoscapeと周辺ツールを使ったグラフデータ可視化入門
byKeiichiro Ono
 
IPAB2017 深層学習を使った新薬の探索から創造へ
byPreferred Networks
 

mishimasyk#4

  • 1.
  • 2.
    自己紹介 ● 某製薬企業で働いてます。 ● 普段はウェット側（一応）。 ● 興味=>chemoinfo。
  • 3.
    Cytoscape.js ● http://js.cytoscape.org/ ● Cytoscape とは全く同じではありません ● エンドユーザー側でなく開発側のアプリ ● jQuery と同じ雰囲気
  • 4.
    Cytoscape.js でアクセスする要素 cy;core• ベース eles; ノードもしくはエッジの集合 ele; ノードもしくはエッジ nodes; ノードの集合 node; ノード edges; エッジの集合 edge; エッジ object.function1().function2()....
  • 5.
    たとえば。。。selectors cy.style() .selector('node[degree>= 5]') .css({'hoge' : 'huga'}).update() ノードオブジェクトのうち 結合次数 > 5 のノードに関して hoge を huga とする 変更を反映させる
  • 6.
    分子の類似性でネットワーク 俺たちそっくりだね〜 類似性高いね〜 ☆ 本日のサンプル ①分子をFingerPrint で記述 ②類似性が閾値より高い時エッジを結ぶ ③ cytoscape.js で可視化 mol 1 mol 2 Tc > 0.8
  • 7.
    Javascript + HTML... うおー( ； ･`ω ･´) JavaScript & HTML ? 開発なんてしたことない、、、オマエ書けよ〜 無理無理
  • 8.
    そうだPython でいこう！ Flaskでがんばろー おー！！！ * 普通にHTML 書けるのなら そちらで全然問題ないです。
  • 9.
    Flask なのでこんな構成 iwatobipen$tree mishimasyk4 mishimasyk4 ├ ── Readme.rst ├ ── __init__.py ├ ── app.py ├ ── requierments ├ ── sampledata │ ├ ── __init__.py │ ├ ── csv_sdf.py │ ├ ── document chemistry_20141011_130145_833.csv │ ├ ── document chemistry_20141011_130145_833.sdf │ └── for_network.py ├ ── static │ ├ ── js │ │ ├ ── javascript いろいろ │ └── jsondata │ └── mols.json └── templates ├ ── templ.html 　テンプレート └── top.html
  • 10.
  • 11.
    “nodes”: ネットワークをJSON で [{ "data": { "degree": 1, "molwt": 379.5, 後ほどリンクで画像をとる "href": "http://cactus.nci.nih.gov/chemical/structure/smi/image", "smi": "COc1cc2[nH]c(C)c(CCN3CCN(c4ccccc4)CC3)c2cc1OC", "id": "mol_0", "molid": 0 }}, ], “edges”: [ { "data": { "source": "mol_237", "target": "mol_207", "id": "237>>207", "similarity": 0.75 }, ] 結合次数 エッジの向きも表現できます
  • 12.
    RDKit でつくりました。 classNode(object): def __init__(self,mol): self.mol = mol def mw( self ): return round( Descriptors.MolWt( self.mol ), 2 ) def smi( self ): return Chem.MolToSmiles( self.mol ) class Edge(object): def __init__(self, mol1, mol2 ): self.mol1 = mol1 self.mol2 = mol2 def source( self ): return Chem.MolToSmiles( self.mol1 ) def target( self ): return Chem.MolToSmiles( self.mol2 ) def sim(self): fp1 = AllChem.GetMorganFingerprintAsBitVect(self.mol1, 2) fp2 = AllChem.GetMorganFingerprintAsBitVect(self.mol2, 2) tc = DataStructs.TanimotoSimilarity(fp1,fp2) return tc Node class Edge class
  • 13.
    前のコードで作ったファイルを読む <script> //load JSON items = [] $.getJSON(("static/jsondata/mols.json"), function(data){ items = data; return items; }); </script> JSON ファイルを読み込んでおく
  • 14.
  • 15.
    Flask では特別なことしない Flask便利だね〜 BootStrap も使えるね〜 from flask import Flask from flask_bootstrap import Bootstrap from flask import render_template def create_app(): app = Flask( __name__ ) Bootstrap( app ) return app app = create_app() @app.route("/") def root(): return render_template("top.html") @app.route("/circle") def circle(): return render_template("circle.html") @app.route("/cola") def cola(): return render_template("cola.html") Make web Using flask
  • 16.
    Template 側のjavascript cyというID のdiv にバインドする static なグラフは mapData を使える $(function(){ $("#cy").cytoscape({ style: cytoscape.stylesheet() .selector('node') .css({ 'background-color': 'gray', 'border-color' : 'black', 'border-width' : 3 'width': 'mapData(degree,1,10,10,50)', 'height': 'mapData(degree,1,10,10,50)' }) .selector('edge') .css hogehoge mapData メソッド 要素の属性を指定値で可視化 ( 次数, 最小, 最大,10,50) にスケーリング
  • 17.
    Javascript であれこれ 描画の準備DOM全部読み込んだら動作させる クリックしたらsmiles を表示 static なグラフは mapData を使える ready: function(){ // this refer cy console.log("ready2"); window.cy = this; cy.load(items); // insert some events! cy.on('tap', 'node', function(){ alert("smiles is "+this.data('smi')); cy.on('tap', 'node', function(){ window.open(this.data('href')); $('#mol_wt').text("mol_wt is; "+this.data('molwt')); }); } クリックしたら構造を取得する
  • 18.
    Layout null random preset grid circle concentric breadthfirst dagre cose cola arbor springy 複数のアルゴリズムがあります
  • 19.
  • 20.
  • 21.
    Cytoscape に比べノードエッジの数が多いと挙動が遅くなる。 ですが,webappであれこれできるので とても興味深いツールではないかと思います