Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4jの可視化ライブラリ(あらためて)まとめ
クリエーションライン株式会社
木内 満歳
2017/6/9 Neo4j勉強会 #11...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
自己紹介 木内 満歳(きうち みつとし)
クリエーションライン株式会社 シニアコンサルタント
Slideshare: http://w...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
クリエーションライン株式会社
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
人材募集中です
• クリエーションラインでは「われこそは!」という人材を募集しています
– クラウド・Docker
– IoT
– デ...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
本題:
Neo4jの可視化ライブラリ(あらためて)まとめ
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4j ユーザー勉強会 #6(2016.1.25)も見てください
株式会社インテリジェンス
清田 馨一郎さん
[Slideshar...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4j可視化ライブラリを使うとき
• 可視化ライブラリを使う理由
– Neo4jに付属するブラウザではデータの変更もできてしまうの...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
D3.js
• みんなだいすきD3.js
• 最近の可視化ではデファクト
• Javascriptがかけない人は厳しい
• そもそもグ...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
GraphViz
• アカデミック系の人に好まれるイメージ
• インタラクティブなグラフは作れない?
• Pythonバインディングが...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Cytoscape
• 可視化ライブラリというよりは可視化
アプリケーション
• 日本人の開発者がいる
• Neo4jとの接続は直接は...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
LINKURIOUS(Sigma.js)
• 可視化ライブラリ&アプリケーション
• ICIJのパナマ文書分析に採用され、い
ちやく有...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• 可視化ライブラリ
• 開発はjavascript
• 完全クローズドソース
• Neo4jとの接続可能。他のデータソー
スとのコネ...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
みんな大好き星取表
無償? 言語 機能
オートレイ
アウト
グループ化 カスタムス
タイル
アニメーシ
ョン
フィルタリ
ング
D3....
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
「で、実際どうなの!?」
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
デモ (時間の許す限り・・・)
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• 基本的にforceを使うのだが、D3.js の version 3 と version 4で大きく書式が変わっている。世
の中ぐぐ...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
オススメ度
中
実際に作ってみて (GraphViz)
• あっけなくできてしまった。全く何もないところから始めて1時間程度で絵まで出...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• さすがグラフデータ専用。D3.jsの困難に比べるとめっちゃ楽勝。2~3時間程度でOK。これくら
いでできるならカスタマイズしようか...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• Cytoscape.jsと同等の簡便さ。1時間程度でサクっとできる。機能を個別にjsプラグインで実装
しているのでいちいちインポー...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
• Cytoscape.jsと同等の簡便さ。1時間程度でサクっとできる。1つのjsに機能が全部入っているの
で簡単
• Javascr...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
まとめ!!
こういう人に向いてます
D3.js 全てをかなぐり捨ててびよんびよん感を追求したい人
GraphViz 論文さえかければい...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
Neo4jとの接続についてはboltで行って、
可視化ライブラリに合わせてjavascriptで成形できるので可
視化ライブラリがNe...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
今回のソースコードは
https://github.com/m-kiuchi/neo4j-vizsample
においておきましたので
...
Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved
みなさんの健闘を祈ります
Upcoming SlideShare
Loading in …5
×

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

4,237 views

Published on

Neo4j勉強会 #11 発表資料

Published in: Data & Analytics
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved Neo4jの可視化ライブラリ(あらためて)まとめ クリエーションライン株式会社 木内 満歳 2017/6/9 Neo4j勉強会 #11 資料
  2. 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. 3. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved クリエーションライン株式会社
  4. 4. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved 人材募集中です • クリエーションラインでは「われこそは!」という人材を募集しています – クラウド・Docker – IoT – データ分析 – DevOps/構成自動化(Chefなど) https://www.creationline.com/recruit
  5. 5. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved 本題: Neo4jの可視化ライブラリ(あらためて)まとめ
  6. 6. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved Neo4j ユーザー勉強会 #6(2016.1.25)も見てください 株式会社インテリジェンス 清田 馨一郎さん [Slideshare] https://www.slideshare.net/keiichiroseida/neo4j-57449613
  7. 7. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved Neo4j可視化ライブラリを使うとき • 可視化ライブラリを使う理由 – Neo4jに付属するブラウザではデータの変更もできてしまうので見せ るだけにしたい – 特定のクエリの結果を見せたい – Neo4jブラウザではできないような見せ方をしたい • ノードのアイコンを変えたり、条件によってバッジをつけたい • ノード(サブグラフ)をグループ化したい • クエリを変更せずに結果をフィルタリングしたい • 別のコンポーネントと併用したい(ボタン、プルダウン、など)
  8. 8. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved D3.js • みんなだいすきD3.js • 最近の可視化ではデファクト • Javascriptがかけない人は厳しい • そもそもグラフデータ専用ではない のでNeo4jのグラフを可視化したい という用途には困難な道かも・・・ https://d3js.org/
  9. 9. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved GraphViz • アカデミック系の人に好まれるイメージ • インタラクティブなグラフは作れない? • Pythonバインディングがある http://www.graphviz.org/
  10. 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. 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. 12. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved • 可視化ライブラリ • 開発はjavascript • 完全クローズドソース • Neo4jとの接続可能。他のデータソー スとのコネクタもある • 可視化の機能はけっこうある https://cambridge-intelligence.com/keylines/ 商用
  13. 13. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved みんな大好き星取表 無償? 言語 機能 オートレイ アウト グループ化 カスタムス タイル アニメーシ ョン フィルタリ ング D3.js ◯ Javascript ◯ ☓. △ ◯ ☓ GraphViz ◯ 独自(DOT 言語), Python ◯ △ △ ☓. ☓ Cytoscape ◯ Javascript ◯ △ ◯ ◯ ◯ LINKURIOUS (Sigma.js) △ Javascript ◯ ☓ ◯ ◯ ◯ KeyLines ☓ Javascript ◯ ◯ ◯ ◯ ◯
  14. 14. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved 「で、実際どうなの!?」
  15. 15. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved デモ (時間の許す限り・・・)
  16. 16. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved • 基本的にforceを使うのだが、D3.js の version 3 と version 4で大きく書式が変わっている。世 の中ぐぐるとVersion 3のサンプルが出てきてハマる • 元のグラフデータの整合性をぴったり合わせないとD3の描画でエラーが出てハマる。しかもエ ラーの内容が直感的にわかるような内容ではないため原因がわからずハマる • forceは有向グラフを表現できない • スタイルは綺麗にやろうとするとそれはそれでハマる。文字とか収まらないし • 全般的に問題があったときのエラーが不親切。何が原因でうまく動かないのかよくわからずハ マる ・・・ということで本質と関係ないところでやたらと ハマり時間をくう。デモに惑わされて手を出すと 痛い目をみる(ホントあいつらよくやるわ・・・)。 ユースケースも選ぶ(有向グラフ非対応)ので。。。 オススメ度 低 実際に作ってみて (D3.js)
  17. 17. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved オススメ度 中 実際に作ってみて (GraphViz) • あっけなくできてしまった。全く何もないところから始めて1時間程度で絵まで出せる。 • 有向/無向グラフともに表現できる • ノードやリレーションシップの重複もよきように取り計らってくれる • スタイルは・・・あってなきが如し。味も素っ気もないけどノードの文字がちゃんとノードの 中に入るなど、最低限のことはやってくれる • SVG/PNGなどの出力も可能。ちょっとした構造データ程度であればこれでいいかも。・・・面 白みは全くないけど ・・・まあ、面白みもへったくれもないけどお手軽に できるし、最低限出すべきものは出せる、ということで
  18. 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. 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. 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. 21. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved まとめ!! こういう人に向いてます D3.js 全てをかなぐり捨ててびよんびよん感を追求したい人 GraphViz 論文さえかければいい人 Cytoscape いけてる感じの可視化をしたい人 LINKURIOUS(Sigma.js) ビミョーな感じをかもし出したい人 KeyLines いけてる感じの可視化をして、 メーカーのサポートが欲しい人
  22. 22. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved Neo4jとの接続についてはboltで行って、 可視化ライブラリに合わせてjavascriptで成形できるので可 視化ライブラリがNeo4jをサポートしているかどうかはあ まり気にしなくてもいいです。 (このデモではNeo4jへのアクセスはぜんぶboltです)
  23. 23. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved 今回のソースコードは https://github.com/m-kiuchi/neo4j-vizsample においておきましたので 煮るなり焼くなりご自由に!
  24. 24. Copyright ⓒ2017 CREATIONLINE, INC. All Rights Reserved みなさんの健闘を祈ります

×