(2017.6.9) neo4jの可視化ライブラリまとめ

Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved

Neo4jの可視化ライブラリ(あらためて)まとめ

クリエーションライン株式会社木内満歳

2017/6/9 Neo4j勉強会 #11 資料


自己紹介木内満歳（きうちみつとし）

クリエーションライン株式会社シニアコンサルタント

Slideshare: http://www.slideshare.net/mkiuchi4

各種寄稿

a. gihyo.jp: “Mesosphere DCOSでつくるクラウドアプリケーション”

b. 日経クラウドファースト2016年6月 “Azure IoT Suiteの評価”

c. Codezine: “機械学習をクラウドで手軽に体験！ BluemixのApache Sparkで異常

なセンサーデータを洗い出す”

各種講演a. Developer Summit 2016 Summer

b. 日経BP社 “パブリッククラウド導入の企画提案力養成講座”

c. Cloudweek Hokkaido 2015/2016

d. 政策研究大学院大学科学技術イノベーション政策研究センター「科学技術イノベーション政策のための科学オープンフォーラム」

専門分野：Apache Mesos, Apache Spark, 分散コンピューティング, クラウドコンピューテ

ィング, NoSQL DB, グラフDB

O’reilley Certified Developer on Apache Spark

Docker Certified Technical Trainer

http://www.slideshare.net/mkiuchi4

http://gihyo.jp/admin/serial/01/dcos

http://itpro.nikkeibp.co.jp/NCF/

http://codezine.jp/article/detail/9391


クリエーションライン株式会社


人材募集中です

• クリエーションラインでは「われこそは！」という人材を募集しています– クラウド・Docker

– IoT

– データ分析– DevOps/構成自動化(Chefなど)

https://www.creationline.com/recruit


本題:

Neo4jの可視化ライブラリ(あらためて)まとめ


Neo4j ユーザー勉強会 #6(2016.1.25)も見てください

株式会社インテリジェンス清田馨一郎さん

[Slideshare]

https://www.slideshare.net/keiichiroseida/neo4j-57449613

https://www.slideshare.net/keiichiroseida/neo4j-57449613


Neo4j可視化ライブラリを使うとき

• 可視化ライブラリを使う理由

– Neo4jに付属するブラウザではデータの変更もできてしまうので見せ

るだけにしたい

– 特定のクエリの結果を見せたい

– Neo4jブラウザではできないような見せ方をしたい

• ノードのアイコンを変えたり、条件によってバッジをつけたい

• ノード(サブグラフ)をグループ化したい

• クエリを変更せずに結果をフィルタリングしたい

• 別のコンポーネントと併用したい(ボタン、プルダウン、など)


D3.js

• みんなだいすきD3.js

• 最近の可視化ではデファクト• Javascriptがかけない人は厳しい

• そもそもグラフデータ専用ではないのでNeo4jのグラフを可視化したいという用途には困難な道かも・・・

https://d3js.org/


GraphViz

• アカデミック系の人に好まれるイメージ• インタラクティブなグラフは作れない？• Pythonバインディングがある

http://www.graphviz.org/


Cytoscape

• 可視化ライブラリというよりは可視化アプリケーション

• 日本人の開発者がいる• Neo4jとの接続は直接はサポートされていない(機能拡張*でサポート)

• Javascriptの可視化ライブラリ -

Cytoscape.js がある。ある程度のグラ

フ分析アルゴリズムも同梱されている(ダイクストラ探索(ShortestPath)、PageRankなど)

http://www.cytoscape.org/

* cyNeo4j: http://apps.cytoscape.org/apps/cyneo4j

https://github.com/keiono

http://www.cytoscape.org/


LINKURIOUS(Sigma.js)

• 可視化ライブラリ&アプリケーション• ICIJのパナマ文書分析に採用され、いちやく有名に

• 可視化ライブラリ部分をオープンソースにした Sigma.js があるhttp://sigmajs.org/

プラグインでNeo4jからのロードも可能

※Linkurious.jsはdeprecated、Ogmaは有償

https://linkurio.us/

商用

http://sigmajs.org/


• 可視化ライブラリ• 開発はjavascript

• 完全クローズドソース• Neo4jとの接続可能。他のデータソースとのコネクタもある

• 可視化の機能はけっこうある

https://cambridge-intelligence.com/keylines/

商用


みんな大好き星取表

無償？言語機能

オートレイアウト

グループ化カスタムスタイル

アニメーション

フィルタリング

D3.js ◯ Javascript ◯ ☓. △ ◯ ☓

GraphViz ◯ 独自(DOT

言語),

Python

◯ △ △ ☓. ☓

Cytoscape ◯ Javascript ◯ △ ◯ ◯ ◯

LINKURIOUS

(Sigma.js)

△ Javascript ◯ ☓ ◯ ◯ ◯

KeyLines ☓ Javascript ◯ ◯ ◯ ◯ ◯

https://bl.ocks.org/mbostock/4063530

http://www.graphviz.org/content/cluster

http://www.graphviz.org/content/kennedyanc

https://github.com/mapio/GraphvizAnim


「で、実際どうなの！？」


デモ (時間の許す限り・・・)


• 基本的にforceを使うのだが、D3.js の version 3と version 4で大きく書式が変わっている。世

の中ぐぐるとVersion 3のサンプルが出てきてハマる

• 元のグラフデータの整合性をぴったり合わせないとD3の描画でエラーが出てハマる。しかもエ

ラーの内容が直感的にわかるような内容ではないため原因がわからずハマる

• forceは有向グラフを表現できない

• スタイルは綺麗にやろうとするとそれはそれでハマる。文字とか収まらないし

• 全般的に問題があったときのエラーが不親切。何が原因でうまく動かないのかよくわからずハ

マる

・・・ということで本質と関係ないところでやたらと

ハマり時間をくう。デモに惑わされて手を出すと

痛い目をみる(ホントあいつらよくやるわ・・・)。

ユースケースも選ぶ(有向グラフ非対応)ので。。。

オススメ度

低

実際に作ってみて (D3.js)

https://github.com/d3/d3/blob/master/API.md#forces-d3-force

https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md

https://github.com/d3/d3/blob/master/API.md#forces-d3-force


オススメ度

中

実際に作ってみて (GraphViz)

• あっけなくできてしまった。全く何もないところから始めて1時間程度で絵まで出せる。

• 有向/無向グラフともに表現できる

• ノードやリレーションシップの重複もよきように取り計らってくれる

• スタイルは・・・あってなきが如し。味も素っ気もないけどノードの文字がちゃんとノードの

中に入るなど、最低限のことはやってくれる

• SVG/PNGなどの出力も可能。ちょっとした構造データ程度であればこれでいいかも。・・・面

白みは全くないけど

・・・まあ、面白みもへったくれもないけどお手軽に

できるし、最低限出すべきものは出せる、ということで


• さすがグラフデータ専用。D3.jsの困難に比べるとめっちゃ楽勝。2~3時間程度でOK。これくら

いでできるならカスタマイズしようかという気にもなる。ノードやリレーションシップをクリ

ックした時のイベントを出すことも簡単。

• 有向/無向グラフともに表現できる。ノードやリレーションシップの重複もよきように取り計ら

ってくれる

• スタイルもいろいろできる。アニメーションはバッチ的なことはできるけど、D3.jsみたいなび

ょんびょんしたの(force, collide)はできなさそう

• 描画エリアはdiv+canvas。画面をそのままSVGで

出すとかは手間がかかりそう。別途javascriptで

組めばSVG/JPGなどの出力も可能。高さを

事前にstyleで指定しておかないといけない

・・・これならいろいろカスタマイズしても

よさそう、ということで

オススメ度

高

実際に作ってみて (Cytoscape)


• Cytoscape.jsと同等の簡便さ。1時間程度でサクっとできる。機能を個別にjsプラグインで実装

しているのでいちいちインポートするのが面倒といえば面倒。プラグインの組み合わせによっ

てはイマイチな結果になることもある(例えばforce-layoutとnode-drugを組み合わせたり)。

• 有向/無向グラフともに表現できる・・・が！アローがめちゃくちゃ小さい！(いちおうカスタマ

イズできるけど) おしゃれにしたつもりなんだろうか・・・

• スタイルも変えられるけど、なんというか、控えめ。D3.jsみたいなびょんびょんしたの(force,

collide)もできるけど、他の機能とバッティングが・・・

• 描画エリアはdiv+canvas。画面をそのままSVGで

出すとかは手間がかかりそう。別途javascriptで

組めばSVG/JPGなどの出力も可能。高さを

事前にstyleで指定しておかないといけない

・・・おおむねCytoscape.jsと同等だけど、表現力が

イマイチなところもあり

オススメ度

中

実際に作ってみて (LINKURIOUS(Sigma.js))

https://github.com/jacomyal/sigma.js/pull/279


• Cytoscape.jsと同等の簡便さ。1時間程度でサクっとできる。1つのjsに機能が全部入っているの

で簡単

• Javascriptの組み方がめっちゃ今風というか、コールバックの嵐。慣れていれば、まあ、いける

（最近の人は難なくいけるよね！？）

• 有向/無向グラフともに表現できる

• スタイルもわりといい感じ。データのスタイル表現にちょっと癖が(まあOKの範疇)

• 描画エリアはdiv+canvas。画面をそのままSVGで出すとかは手間がかかりそう。別途javascript

で組めばSVG/JPGなどの出力も可能

・・・おおむねCytoscape.jsと同等

表現力もあり。有償サポートが必要であれば

こっちもいけるなー、ということでオススメ度

高

実際に作ってみて (KeyLines)


まとめ！！

こういう人に向いてます

D3.js 全てをかなぐり捨ててびよんびよん感を追求したい人

GraphViz 論文さえかければいい人

Cytoscape いけてる感じの可視化をしたい人

LINKURIOUS(Sigma.js) ビミョーな感じをかもし出したい人

KeyLines いけてる感じの可視化をして、メーカーのサポートが欲しい人


Neo4jとの接続についてはboltで行って、

可視化ライブラリに合わせてjavascriptで成形できるので可

視化ライブラリがNeo4jをサポートしているかどうかはあ

まり気にしなくてもいいです。

（このデモではNeo4jへのアクセスはぜんぶboltです）


今回のソースコードは

https://github.com/m-kiuchi/neo4j-vizsample

においておきましたので煮るなり焼くなりご自由に！


みなさんの健闘を祈ります

(2017.6.9) neo4jの可視化ライブラリまとめ

Data & Analytics