Neo4j勉強会 #11 発表資料

1. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4jの可視化ライブラリ(あらためて)まとめ
クリエーションライン株式会社
木内 満歳
2017/6/9 Neo4j勉強会 #11 資料

2. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
自己紹介 木内 満歳（きうち みつとし）
クリエーションライン株式会社 シニアコンサルタント
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

3. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
クリエーションライン株式会社

4. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
人材募集中です
• クリエーションラインでは「われこそは！」という人材を募集しています
– クラウド・Docker
– IoT
– データ分析
– DevOps/構成自動化(Chefなど)
https://www.creationline.com/recruit

5. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
本題:
Neo4jの可視化ライブラリ(あらためて)まとめ

6. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4j ユーザー勉強会 #6(2016.1.25)も見てください
株式会社インテリジェンス
清田 馨一郎さん
[Slideshare]
https://www.slideshare.net/keiichiroseida/neo4j-57449613

7. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4j可視化ライブラリを使うとき
• 可視化ライブラリを使う理由
– Neo4jに付属するブラウザではデータの変更もできてしまうので見せ
るだけにしたい
– 特定のクエリの結果を見せたい
– Neo4jブラウザではできないような見せ方をしたい
• ノードのアイコンを変えたり、条件によってバッジをつけたい
• ノード(サブグラフ)をグループ化したい
• クエリを変更せずに結果をフィルタリングしたい
• 別のコンポーネントと併用したい(ボタン、プルダウン、など)

8. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
D3.js
• みんなだいすきD3.js
• 最近の可視化ではデファクト
• Javascriptがかけない人は厳しい
• そもそもグラフデータ専用ではない
のでNeo4jのグラフを可視化したい
という用途には困難な道かも・・・
https://d3js.org/

9. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
GraphViz
• アカデミック系の人に好まれるイメージ
• インタラクティブなグラフは作れない？
• Pythonバインディングがある
http://www.graphviz.org/

10. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Cytoscape
• 可視化ライブラリというよりは可視化
アプリケーション
• 日本人の開発者がいる
• Neo4jとの接続は直接はサポートされ
ていない(機能拡張*でサポート)
• Javascriptの可視化ライブラリ -
Cytoscape.js がある。ある程度のグラ
フ分析アルゴリズムも同梱されている
(ダイクストラ探索(ShortestPath)、
PageRankなど)
http://www.cytoscape.org/
* cyNeo4j: http://apps.cytoscape.org/apps/cyneo4j

11. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
LINKURIOUS(Sigma.js)
• 可視化ライブラリ&アプリケーション
• ICIJのパナマ文書分析に採用され、い
ちやく有名に
• 可視化ライブラリ部分をオープンソー
スにした Sigma.js がある
http://sigmajs.org/
プラグインでNeo4jからのロードも可
能
※Linkurious.jsはdeprecated、Ogmaは
有償
https://linkurio.us/
商用

12. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• 可視化ライブラリ
• 開発はjavascript
• 完全クローズドソース
• Neo4jとの接続可能。他のデータソー
スとのコネクタもある
• 可視化の機能はけっこうある
https://cambridge-intelligence.com/keylines/
商用

13. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
みんな大好き星取表
無償？ 言語 機能
オートレイ
アウト
グループ化 カスタムス
タイル
アニメーシ
ョン
フィルタリ
ング
D3.js ◯ Javascript ◯ ☓. △ ◯ ☓
GraphViz ◯ 独自(DOT
言語),
Python
◯ △ △ ☓. ☓
Cytoscape ◯ Javascript ◯ △ ◯ ◯ ◯
LINKURIOUS
(Sigma.js)
△ Javascript ◯ ☓ ◯ ◯ ◯
KeyLines ☓ Javascript ◯ ◯ ◯ ◯ ◯

14. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
「で、実際どうなの！？」

15. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
デモ (時間の許す限り・・・)

16. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• 基本的にforceを使うのだが、D3.js の version 3 と version 4で大きく書式が変わっている。世
の中ぐぐるとVersion 3のサンプルが出てきてハマる
• 元のグラフデータの整合性をぴったり合わせないとD3の描画でエラーが出てハマる。しかもエ
ラーの内容が直感的にわかるような内容ではないため原因がわからずハマる
• forceは有向グラフを表現できない
• スタイルは綺麗にやろうとするとそれはそれでハマる。文字とか収まらないし
• 全般的に問題があったときのエラーが不親切。何が原因でうまく動かないのかよくわからずハ
マる
・・・ということで本質と関係ないところでやたらと
ハマり時間をくう。デモに惑わされて手を出すと
痛い目をみる(ホントあいつらよくやるわ・・・)。
ユースケースも選ぶ(有向グラフ非対応)ので。。。
オススメ度
低
実際に作ってみて (D3.js)

17. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
オススメ度
中
実際に作ってみて (GraphViz)
• あっけなくできてしまった。全く何もないところから始めて1時間程度で絵まで出せる。
• 有向/無向グラフともに表現できる
• ノードやリレーションシップの重複もよきように取り計らってくれる
• スタイルは・・・あってなきが如し。味も素っ気もないけどノードの文字がちゃんとノードの
中に入るなど、最低限のことはやってくれる
• SVG/PNGなどの出力も可能。ちょっとした構造データ程度であればこれでいいかも。・・・面
白みは全くないけど
・・・まあ、面白みもへったくれもないけどお手軽に
できるし、最低限出すべきものは出せる、ということで

18. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• さすがグラフデータ専用。D3.jsの困難に比べるとめっちゃ楽勝。2~3時間程度でOK。これくら
いでできるならカスタマイズしようかという気にもなる。ノードやリレーションシップをクリ
ックした時のイベントを出すことも簡単。
• 有向/無向グラフともに表現できる。ノードやリレーションシップの重複もよきように取り計ら
ってくれる
• スタイルもいろいろできる。アニメーションはバッチ的なことはできるけど、D3.jsみたいなび
ょんびょんしたの(force, collide)はできなさそう
• 描画エリアはdiv+canvas。画面をそのままSVGで
出すとかは手間がかかりそう。別途javascriptで
組めばSVG/JPGなどの出力も可能。高さを
事前にstyleで指定しておかないといけない
・・・これならいろいろカスタマイズしても
よさそう、ということで
オススメ度
高
実際に作ってみて (Cytoscape)

19. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• Cytoscape.jsと同等の簡便さ。1時間程度でサクっとできる。機能を個別にjsプラグインで実装
しているのでいちいちインポートするのが面倒といえば面倒。プラグインの組み合わせによっ
てはイマイチな結果になることもある(例えばforce-layoutとnode-drugを組み合わせたり)。
• 有向/無向グラフともに表現できる・・・が！アローがめちゃくちゃ小さい！(いちおうカスタマ
イズできるけど) おしゃれにしたつもりなんだろうか・・・
• スタイルも変えられるけど、なんというか、控えめ。D3.jsみたいなびょんびょんしたの(force,
collide)もできるけど、他の機能とバッティングが・・・
• 描画エリアはdiv+canvas。画面をそのままSVGで
出すとかは手間がかかりそう。別途javascriptで
組めばSVG/JPGなどの出力も可能。高さを
事前にstyleで指定しておかないといけない
・・・おおむねCytoscape.jsと同等だけど、表現力が
イマイチなところもあり
オススメ度
中
実際に作ってみて (LINKURIOUS(Sigma.js))

20. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• Cytoscape.jsと同等の簡便さ。1時間程度でサクっとできる。1つのjsに機能が全部入っているの
で簡単
• Javascriptの組み方がめっちゃ今風というか、コールバックの嵐。慣れていれば、まあ、いける
（最近の人は難なくいけるよね！？）
• 有向/無向グラフともに表現できる
• スタイルもわりといい感じ。データのスタイル表現にちょっと癖が(まあOKの範疇)
• 描画エリアはdiv+canvas。画面をそのままSVGで出すとかは手間がかかりそう。別途javascript
で組めばSVG/JPGなどの出力も可能
・・・おおむねCytoscape.jsと同等
表現力もあり。有償サポートが必要であれば
こっちもいけるなー、ということで
オススメ度
高
実際に作ってみて (KeyLines)

21. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
まとめ！！
こういう人に向いてます
D3.js 全てをかなぐり捨ててびよんびよん感を追求したい人
GraphViz 論文さえかければいい人
Cytoscape いけてる感じの可視化をしたい人
LINKURIOUS(Sigma.js) ビミョーな感じをかもし出したい人
KeyLines いけてる感じの可視化をして、
メーカーのサポートが欲しい人

22. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4jとの接続についてはboltで行って、
可視化ライブラリに合わせてjavascriptで成形できるので可
視化ライブラリがNeo4jをサポートしているかどうかはあ
まり気にしなくてもいいです。
（このデモではNeo4jへのアクセスはぜんぶboltです）

23. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
今回のソースコードは
https://github.com/m-kiuchi/neo4j-vizsample
においておきましたので
煮るなり焼くなりご自由に！

24. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
みなさんの健闘を祈ります