【5/21開催】ITOC機械学習もくもく会 #10 - connpass での作業内容。

最近グラフ・ネットワーク分析(Facebookの友達から相関図を出す等)を勉強していて、解析結果を画像ではなくjsでブラウザ上に表示してみたかったので、グラフ・ネットワークをJSONから描画するjsライブラリを調べてみました。

もうちょっと、ネットワーク分析を知りたい人は下の記事とか面白いです。

HIP HOPでわかるネットワーク分析 - Aidemy Tech Blog

jsのネットワーク・グラフ描画ライブラリ

検索してみたらいくつか発見

js界隈あるあるですが、殆どがメンテナンスがされていない状態。。。

Cytoscape.js だけは、現在もメンテナンスされているみたいなので、これで触ってみることに。

Cytoscape.js

何ができるかは、TOPページのDemosにあるのと、コードもみることができます。

あとは、他の人の記事でSlackの内容からコミュニケーションをCytoscape.jsで可視化している例もありました。

cytoscape.jsとslack APIでチーム内の関係を可視化

コード

もくもく会で時間も限られていたので基本的な部分だけ触ってみました。 Codepenでhtml,css,jsで書いて触れるようになってます。

Cytoscape - Codepen

jsのコードはこんな感じ

var cy = cytoscape({
  container: document.getElementById('cy'),

  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'height': 'data(size)',
        'width': 'data(size)',
        'border-color': '#000',
        'border-width': '1',
        'content': 'data(name)'
      })
    .selector('edge')
      .css({
        'width': 'data(strength)'
      })
    .selector('#1')
      .css({
        'background-color': 'red'
      }),

  elements: {
    nodes: [
      { data: { id: '1', size: 50, name: 'a' } },
      { data: { id: '2', size: 20, name: 'b' } },
      { data: { id: '3', size: 40, name: 'c' } }
    ],
    edges: [
      { data: { source: '1', target: '2', strength: 5 } },
      { data: { source: '1', target: '3', strength: 20 } }
    ]
  },
});

触ってみての感想

  • jsの中でCSSを定義するから、ReactとかElmみたいで今風?
  • elementsにノード(節点・頂点)とエッジ(枝・辺)の情報を書いていくので、ここの部分をJSONで読み込んで上げればデータを表示できそう
  • エッジの太さとかをCSSで書かないといけないのは、少し面倒に感じた
  • ただ、CSS定義のため自由に色々とできる(ノードを画像にしたりも簡単にできる)

みなさんもネットワーク分析結果をサイトに載せたい時とかは使ってみてください。