A Road map of Data Analysis for Visualization with D3.js

LT 2nd Trial
A 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_dynamic
https://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、連結成分、デンドログラム
－その他

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/

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)

目標達成に必要なこと（5/5の補足：その1）
13
－ 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
－ 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.js
http://raphaeljs.com/
three.js
http://threejs.org/
Processing.js
－他のネットワーク可
視化ツール：
・☆☆ ☆ Gephi
・☆☆☆ Cytoscape
・ ☆☆ Pajek
・ ☆☆ igraph
・Tulip
Gephi
https://gephi.org/
Cytoscape
http://www.cytoscape.org/
Tulip
http://tulip.labri.fr/TulipDrupal/
Igraph
http://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 Documents
http://d3js.org/
IBM Many Eyes
http://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による通信

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

• 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

• High Dimensional Embedding
http://reference.wolfram.com/mathematica/tutorial/GraphDrawingIntroductio
n.html
• http://bit.ly/1a1Oypj http://bit.ly/1a1OHJx
• Edge Bundling http://bl.ocks.org/mbostock/1044242
24

A Road map of Data Analysis for Visualization with D3.js

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

En vedette

En vedette (20)

Similaire à A Road map of Data Analysis for Visualization with D3.js

Similaire à A Road map of Data Analysis for Visualization with D3.js (20)

Plus de 博三太田

Plus de 博三太田 (20)