a road map of data analysis for visualization with d3.js
DESCRIPTION
1.Force-Directed Graph: D3による可視化 2.Node.js + WebSocketを用いた通信 →1. + 2.で、Twitter/ Foursquareからデータ収集・可視化しやリアルタイム処理を行う。 今回はこれらに必要な要素をロードマップととして示したものです。TRANSCRIPT
LT 2nd TrialA Road map of Data Analysis for Visualization
with D3.js
jsCafe vol.15 2013/10/06 At WAVE : Web Design & Programming School
Twitter ID:@otanet Hiromitsu OTA
自己紹介( @otanet )
• 背景: 2008 年まで環境問題(廃棄物)を研究。 - 産業廃棄物の不法投棄の実証分析 - 最終処分場の跡地利用の環境評価 • これまでの取り組み: POS データの分析によるコスト削減の提案や営
業戦略の立案、業務改善のコンサルティング
•発表等: http://www.slideshare.net/otanet/
前回までのあらすじ…(その 1 )
⇒DevOps的な視点や「つながり」の視点から、 D3.jsにフォーカスされている! 3
前回までのあらすじ… (その 2 )
4
1 . DevOps 的な視点:Munin によるサーバーの可視化http://munin-monitoring.org/wiki/Munin_Template_dynamic
2 .「つながり」の視点:SNS 、 Web ページのリンク、路線図、組織図…http://www.slideshare.net/hirokoonari/r-15447585
→ サイトのステータスごとのレスポンスタイムの集計•可視化から改善へ!
→ 震災時の SNS の可視化による避難場所の適性や Web ページリンクの可視化によるサイト構造の改善へ!
今後の見通しとして -データ可視化のツールの切り口から-
⇒ ここで、 4 .の中の D3.js に注目してみることに!
5
1 . Munin 、 GrowthForecast 、 ImageMagik :メトリクス•モニタリングツールhttp://munin-monitoring.org/wiki/Munin_Template_dynamichttps://github.com/kazeburo/GrowthForecast/ http://kazeburo.github.io/GrowthForecast/
2 . Excel スパークライン http://bit.ly/1fRFSL1 3 . Google Analytics による可視化: ユーザフロー図 http://bit.ly/1fRG0dn
4 . Web による可視化:HTML5 、 Canvas 、 SVG 、 D3.js
今後の目標
6
1 . Force-Directed Graph :D3 による可視化!Force-Directed Graph :http://bl.ocks.org/mbostock/4062045
→1. + 2. で、 Twitter/ Foursquare からデータ収集•可視化しやリアルタイム処理を行いたい!
2 . Node.js + WebSocket を用いた通信:http://nodejs.jp/ http://www.websocket.org/
目標達成に必要なこと(全体)
7
1 .ネットワーク図の描画のポイント
2 .ネットワーク分析の様々な手法
3 . PageRank の計算と行列計算用 Javascript ライブラリ
4 .ネットワークデータの形式
5 .ネットワークのレイアウト…
次のスライドで、少し掘り下げてみる!
目標達成に必要なこと( 1/5 )
8
1 .ネットワーク図の描画のポイント -レイアウトの審美性基準:
・ネットワークと空間の位置関係の矛盾が少ないか。-ノードの大きさ、エッジの太さ、色… ・グラフ特徴量、属性、グループ-ノードの形 ・シンボル、アイコン、写真、ダイヤグラム…-エッジの形 ・孤、矢印、等高線…
「視認性の高いグラフレイアウトについて」http://rit.rakuten.co.jp/conf/rrds4/papers/RRDS4-020.pdf
目標達成に必要なこと( 2/5 )
9
2 .ネットワーク分析の様々な手法 -距離・経路:
・最短経路、距離中心性、媒介中心性、 Dijkstra法-行列 ・固有べクトル中心性( PageRank )、 Spectral Graph Analysis 、 Graph Laplacian-クラスタリング ・ K-Clique Community 、 Newman コミュニティ、Modularity 、連結成分、デンドログラム-その他 ・クラスタ係数、次数分布、次数中心性、 Motif「グラフ理論スピード入門」 http://slidesha.re/1fRGss8 「あたらしいグラフ理論」 小林みどり( 2013 ) 牧野書店 http://amzn.to/1fRGbFt
目標達成に必要なこと( 3/5 )
10
3 . PageRank の計算と行列計算用 Javascript ライブラリ - PageRank の計算:
・遷移確率行列の最大固有値( =1 )に対応する固有べクトル⇒ v = Av-行列計算の Javascript ライブラリ ・ Numeric Javascript var A = [[1,2,3], [4,5,6], [7,8,9]] ; var b = [3, 1, 2] ; var y = numeric.dot(A, b); // ドット積 var X = numeric.inv(A) ; // 逆行列 var S = numeric.det(A) ; // 行列式 var T = numeric.eig(A) ; // 固有値・固有べクトル Numeric Javascript : http://www.numericjs.com/
目標達成に必要なこと( 4/5 )
11
4 .ネットワークデータの形式
-隣接行列( adjacency Matrix )、 隣接リスト( adjacency List )、 エッジリスト( Edge List ) →大規模データの疎(スパース)なグラフ
- XML 形式、 JSON 形式-ツールに定義された形式: ・ igraph ( .R )、 Pajek (.net) 、 GML ( .gml :Graph Modeling Language )GML (Graph Modeling Language) : http://bit.ly/1fRGIHr Pajek: http://vlado.fmf.uni-lj.si/pub/networks/pajek/
目標達成に必要なこと( 5/5 )
12
5 .ネットワークのレイアウト
-ネットワークは何次元の空間でも矛盾しなくレイアウトは可能ですが、
- 2 次元 / 3 次元にいかに落とし込むか ・ Force-Directed Method ・次元圧縮( High Dimentional Embedding, etc. ) ・描画要素の縮約( Clustering, Edge Bundring, etc. )
- Filtering ( Tree の抽出 , etc. )“A Force-Directed Method for Large Crossing Angle Graph Drawing” (2010)http://arxiv.org/abs/1012.4559
目標達成に必要なこと( 5/5 の補足:その 1 )
13
5 .ネットワークのレイアウト
- Force-Directed Method : ・ Kamada-Kawai algorithm →力学モデルによるグラフ描画 ・ Fruchterman-Reingold algorithm
Kamada-Kawai algorithm http://bit.ly/1a1Nu4N Fruchterman-Reingold algorithm http://bit.ly/1a1NQbN
目標達成に必要なこと( 5/5 の補足:その 2 )
14
5 .ネットワークのレイアウト
- High Dimensional Embedding
- Edge Bundling
High Dimensional Embedding http://bit.ly/1a1Oypj http://bit.ly/1a1OHJx
Edge Bundling http://bl.ocks.org/mbostock/1044242
JS ベースの情報可視化ライブラリ VS 他のネットワーク可視化ツール(その 1 )
15
- JS ベースの情報可視化: ・ D3.js ・ sigma.js ・ Raphael.js ・ three.js ・ Processing.js
sigma.js http://sigmajs.org/examples.html Raphael.jshttp://raphaeljs.com/ three.jshttp://threejs.org/ Processing.jshttp://processingjs.org/
-他のネットワーク可視化ツール: ・☆☆ ☆ Gephi ・☆☆☆ Cytoscape ・ ☆☆ Pajek ・ ☆☆ igraph ・ Tulip
Gephi https://gephi.org/ Cytoscapehttp://www.cytoscape.org/ Tuliphttp://tulip.labri.fr/TulipDrupal/ Igraphhttp://igraph.sourceforge.net/
補足:
16
3 . PageRank の計算と行列計算用 Javascript ライブラリ - PageRank の計算:
・遷移確率行列の最大固有値( =1 )に対応する固有べクトル⇒ v = Av-行列計算の Javascript ライブラリ ・ Numeric Javascript var A = [[1,2,3], [4,5,6], [7,8,9]] ; var b = [3, 1, 2] ; var y = numeric.dot(A, b); // ドット積 var X = numeric.inv(A) ; // 逆行列 var S = numeric.det(A) ; // 行列式 var T = numeric.eig(A) ; // 固有値・固有べクトル Numeric Javascript : http://www.numericjs.com/
D3.js を使うメリット
17
-プログラムで制御できること-動作環境を選ばないこと-開発環境を選ばないこと-インタラクションも含めて渡せること
⇒ データの可視化が目的ではなく、そこから次なるアクションを引き出すことがねらい。
⇒ Force-Directed Graph は分析後に可視化したもの。
D3.js - Data-Driven Documentshttp://d3js.org/IBM Many Eyeshttp://www-958.ibm.com/software/analytics/manyeyes
D3.js の基本(その 1 )
18
そろそろお時間ですので、次回以降にしたいとおもいます…が、その前に、いつものをやらせてください!
では、いつものキャッチフレーズで!
19
時代は JS だ!いやっ、 JS が時代だ!そして勉強会は JSCafeだ!
次回以降のトピック(予定)
20
1 .グラフの構造と種類について(グラフ理論)2 .有効グラフ•無向グラフの行列表示(グラフ理論)3 . RDBMS ( MySQL )とグラフデータベース( FlockDB ) 3.1 最短経路問題と Dijkstra 法(ダイクストラ法) 3.2 Traveling Salesman Problem ( TSP ) 巡回セールスマン問題と遺伝的アルゴリズム 3.3 グラフに対するクエリの一考察4 .ネットワーク分析におけるクラスタリング 4.1 グラフ分割法:強連結成分分解、 弱連結成分分解、最大サブグラフ、最小カット法 4.2 階層的手法:凝集法、分割法5 . Node.js と WebSocket による通信6 .スロークエリによる一考察7 .コミュニティーの検出
Thanks for your kindness.
21
ご静聴、ありがとうございました!
参考文献• URI 等一覧その 1 (逐次更新します)
• 日本のソーシャルネットワーク分析の実務も伴っている第1人者の@millionsmileさんのJapan Rでの
「Rでソーシャルネットワーク分析」(2012) http://www.slideshare.net/hirokoonari/r-15447585
• 「WEB+DB PRESS Vol.76」 http://p.tl/6iKg サンプルデータはここにあるよ→ http://p.tl/hiiN
• 「Tokyo.Rの輪」@manozoさんのslideshare、rubyでデータの切り出しを行い、arulesを用いてapeで可視化したもの。得られる知見が多い。http://slidesha.re/186IAX4
シェアウィズ@門脇さんの、ソフトウェアエンジニアの立場からわかりやすく、説明されている。
• 「理論で学ぶSQL再入門」オラクル@奥野さん:わかりやすくとてもコンパクトにまとまっている。
• 「データベースエンジニア養成読本」 http://p.tl/TZ_v• Nifty@森藤さんので、Dev.Opsの視点からサーバーの異常検知などの視点から、
ストーリテラーも含めて書いてある。生データを可視化することが重要と。ナポレオン進軍はともあれ、エンタメ性(→インフォグラフィック?)よりもデータを可視化して、実用に生かそうぜというもの。
• ※Connpasで森藤さん主催の「データの可視化 Handson」の勉強会で上記は作成されたもの。 http://connpass.com/event/2403/
• Munin: http://munin-monitoring.org/wiki/Munin_Template_dynamic 22
参考文献• URI 等一覧その 2 (逐次更新します)• GrowthForecast: https://github.com/kazeburo/GrowthForecast/ http://kazeburo.github.io/GrowthForecast/ • イー•エージェンシーのブログ:
http://www.e-agency.co.jp/column/20130423.html さすが IAのパイオニア。• Excelスパークライン :
http://office.microsoft.com/ja-jp/excel-help/HA010354892.aspx • ImageMagick http://www.imagemagick.org/script/index.php • https://support.google.com/analytics/answer/1709395?hl=ja • http://sigmajs.org/examples.html• IBM Many Eyes : http://www-958.ibm.com/software/analytics/manyeyes/• Force-Directed Graph : http://bl.ocks.org/mbostock/4062045 • http://nodejs.jp/ • http://www.websocket.org/ • 視認性の高いグラフレイアウトについて
http://rit.rakuten.co.jp/conf/rrds4/papers/RRDS4-020.pdf • Numeric Javascript : http://www.numericjs.com/• http://vlado.fmf.uni-lj.si/pub/networks/pajek/ A Force-Directed Method for Large
Crossing Angle Graph Drawing• http://arxiv.org/abs/1012.4559 • http://bit.ly/1a1Nu4N • Fruchterman-Reingold algorithm http://bit.ly/1a1NQbN
23
参考文献• URI 等一覧その 2 (逐次更新します)• High Dimensional Embedding
http://reference.wolfram.com/mathematica/tutorial/GraphDrawingIntroduction.html
• http://bit.ly/1a1Oypj http://bit.ly/1a1OHJx • Edge Bundling http://bl.ocks.org/mbostock/1044242
24
memo
25