デスクトップ版Cytoscape用の拡張GUIを手軽に作る方法JavaScriptデータ可視化CytoscapeXMLHttpRequest日頃からQiitaにはお世話になっているので、ブログに書いた内容のうち、過去の自分が欲しかった情報(動かすのに必要な部分)を要約してご紹介します。元のブログ記事はこちらです。ネットワーク可視化ツール「Cytoscape」の拡張GUIを、htmlファイル1つでお手軽に作る話Cytoscape自体の使い方についても書いているので、よかったら参考にしてみてください。APIを叩く方法です。デスクトップ版のCytoscapeに、お手軽に外付けのGUIを生やすことができます。Perturbation.cys」を使って、「選択中のエッジのEdgeBetweennessの合計値をリアルタイムで表示する」GUIをつくってみました。右のウィンドウがそれです。Cytoscapeで上記サンプルセッションを開いたうえで、下のソースコードをUTF-8のHTMLとして保存して、IE以外のブラウザで開いてください。Shift+ドラッグでエッジを複数選択すると、ほぼリアルタイムで集計値が表示されます。ソースコードソースコードの説明は、コード内のコメントを参照ください。HTMLもJavascriptもCytoscapeも専門外なので、品質は保証できませんが、狙い通り動くことは確認済みです。id="result">ここに結果が入ります。`選択中のEdgeは${response_body.length}本です。EdgeBetweennessの合計は${total_Betweenness}です。</script></body></html>おまけリクエストJsonの"columnList"の値は、カンマ区切りで複数アトリビュートを指定することもできます。この例では結果を文字列として表示しただけですが、集計データをChart.jsなどでリアルタイムにグラフ化するような使い方もできると思います。ブログには、このHTMLをCytoscapeのウィンドウ内で開く方法も書いてあるので、よかったら覗いてみてください。upLoginユーザーは見つかりませんでした。