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