Cytoscape.js Neo4jを組み合わせて相関図を書く方法

漫画とかで書かれている相関図が描きたいんだけど、どうやって書けるの？

相関図を書くためのツールは色々あるけど、今回はデータから描画する方法を説明するよ

この記事を書いた人

プロコアラ＠エンジニアブロガー
10年間エンジニアをしており、副業でWebサイトやWebサービスを作っています。
一時期資格取得にハマりTOEIC860点オーバー、応用情報処理は取得。休日はラズパイをいじるコアラ好きです。
Follow @top_pro_koala

漫画の登場人物紹介などで相関図って、分かりやすくていいですよね。

相関図はWebサービスとしてニーズがあるんじゃないかと考えています。

相関図を描画するツールはあるんですけど、データから描画するツールって無い？

プログラムをGraphVizで可視化するみたいにデータを可視化したい。

その方法を調べてみました。

データ可視化する方法

データを可視化する場合、以下のようにする方法がいいみたい。

・グラフDBにデータを格納する。

・グラフDBのデータをデータ可視化ライブラリで描画する。

まず、グラフは折れ線グラフなどの一般的なグラフではありません。

グラフは各頂点を繋いだネットワーク図のことを表します。

・ノード：頂点を表す

・エッジ：別名リレーション。頂点を繋ぐ辺。ノード間の関係を表す。

・プロパティ：ノードとエッジに属性を付与する。

グラフDBは、リレーショナルDBやNoSQLと異なり、グラフ（ネットワーク図）を管理するためのデータベースです。

データ可視化ライブラリは、グラフDBのデータを可視化するためのライブラリです。

Neo4j単独でもある程度のことはできますが、データ可視化ライブラリを用いることで綺麗に表示することができます。

また、フィルタリングやグルーピングなどの色々と便利な機能が使えます。

データ可視化をするにあたり、人気のあるソフトが何なのか調査しました。

グラフDBはNeo4jが人気があるようです。

Javascriptで実装されたライブラリ。オープンソースであり、無料で使える。

Neo4jのデータを使用するためにプラグインが用意されており、Neo4jと連携しやすい。

Cola.jsを使用すると、ノードが重ならないように制約をかけられたりする。

Cytoscape.jsとCola.jsを併用する方法がいいみたい。

Cytoscape、Neo4jを連携されてWebサービスとして相関図作成サービスを作れそうということが分かりました。

では！(^^)/