Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

mishimasyk#4

1,110 views

Published on

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

Published in: Science
  • Login to see the comments

mishimasyk#4

  1. 1. Cytoscape.js を使ってみました。 @iwatobipen
  2. 2. 自己紹介 ● 某製薬企業で働いてます。 ● 普段はウェット側(一応)。 ● 興味=>chemoinfo。
  3. 3. Cytoscape.js ● http://js.cytoscape.org/ ● Cytoscape とは全く同じではありません ● エンドユーザー側でなく開発側のアプリ ● jQuery と同じ雰囲気
  4. 4. Cytoscape.js でアクセスする要素 cy; core• ベース eles; ノードもしくはエッジの集合 ele; ノードもしくはエッジ nodes; ノードの集合 node; ノード edges; エッジの集合 edge; エッジ object.function1().function2()....
  5. 5. たとえば。。。selectors cy.style() .selector('node[degree >= 5]') .css({'hoge' : 'huga'}).update() ノードオブジェクトのうち 結合次数 > 5 のノードに関して hoge を huga とする 変更を反映させる
  6. 6. 分子の類似性でネットワーク 俺たちそっくりだね〜 類似性高いね〜 ☆ 本日のサンプル ①分子をFingerPrint で記述 ②類似性が閾値より高い時エッジを結ぶ ③ cytoscape.js で可視化 mol 1 mol 2 Tc > 0.8
  7. 7. Javascript + HTML... うおー( ; ・`ω ・´) JavaScript & HTML ? 開発なんてしたことない、、、オマエ書けよ〜 無理無理
  8. 8. そうだPython でいこう! Flask でがんばろー おー!!! * 普通にHTML 書けるのなら そちらで全然問題ないです。
  9. 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. 10. ネットワークの表現方法 JSON ?
  11. 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. 12. 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
  13. 13. 前のコードで作ったファイルを読む <script> // load JSON items = [] $.getJSON(("static/jsondata/mols.json"), function(data){ items = data; return items; }); </script> JSON ファイルを読み込んでおく
  14. 14. 以下はHTML / JavaScript
  15. 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. 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. 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. 18. Layout null random preset grid circle concentric breadthfirst dagre cose cola arbor springy 複数のアルゴリズムがあります
  19. 19. サンプル作ってみました https://github.com/iwatobipen/mishimasyk
  20. 20. 実行すると多分動く Flask, flask-bootstrap は必要ですが。
  21. 21. Cytoscape に比べノードエッジの数が多いと挙動が遅くなる。 ですが,webapp であれこれできるので とても興味深いツールではないかと思います

×