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

1. Cytoscape.js を使ってみました。
@iwatobipen

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. ネットワークの表現方法
JSON ?

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 でつくりました。
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. 前のコードで作ったファイルを読む
<script>
// load JSON
items = []
$.getJSON(("static/jsondata/mols.json"),
function(data){
items = data;
return items;
});
</script>
JSON ファイルを読み込んでおく

14. 以下はHTML / JavaScript

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. サンプル作ってみました
https://github.com/iwatobipen/mishimasyk

20. 実行すると多分動く
Flask, flask-bootstrap は必要ですが。

21. Cytoscape に比べノードエッジの数が多いと挙動が遅くなる。
ですが,webapp であれこれできるので
とても興味深いツールではないかと思います