LT 2nd Trial
A Road map of Data Analysis for Visualization
with D3.js
jsCafe vol.15 2013/10/06
At WAVE : Web Design & Prog...
自己紹介(@otanet)
•背景: 2008年まで環境問題(廃棄物)を研究。
-産業廃棄物の不法投棄の実証分析
-最終処分場の跡地利用の環境評価
•これまでの取り組み:
POSデータの分析によるコスト削減の提案や営
業戦
略の立案、業務改善の...
前回までのあらすじ…(その1)
⇒DevOps的な視点や「つながり」の視点から、
D3.jsにフォーカスされている! 3
前回までのあらすじ… (その2)
4
1.DevOps的な視点:
Muninによるサーバーの可視化
http://munin-
monitoring.org/wiki/Munin_Template_dynamic
2.「つながり」の視点:SNS...
今後の見通しとして
-データ可視化のツールの切り口から-
⇒ここで、4.の中のD3.jsに注目してみること 5
1.Munin、GrowthForecast、
ImageMagik:
メトリクス・モニタリングツール
http://munin-m...
今後の目標
6
1.Force-Directed Graph:
D3による可視化!
Force-Directed Graph:
http://bl.ocks.org/mbostock/4062045
→1. + 2.で、Twitter/ Fou...
目標達成に必要なこと(全体)
7
1.ネットワーク図の描画のポイ
ント
2.ネットワーク分析の様々な手
法
3.PageRankの計算と行列計算用
Javascriptライブラリ
4.ネットワークデータの形式
5.ネットワークのレイアウト…
次...
目標達成に必要なこと( 1/5)
8
1.ネットワーク図の描画のポイ
ント
-レイアウトの審美性基準:
・ネットワークと空間の位置関係の矛盾が少な
いか。
-ノードの大きさ、エッジの太さ、色…
・グラフ特徴量、属性、グループ
-ノードの形
・シ...
目標達成に必要なこと( 2/5 )
9
2.ネットワーク分析の様々な手
法
-距離・経路:
・最短経路、距離中心性、媒介中心性、Dijkstra
法
-行列
・固有べクトル中心性(PageRank)、Spectral
Graph
Analysi...
目標達成に必要なこと( 3/5 )
10
3.PageRankの計算と行列計算用Javascriptライブ
ラリ
- PageRankの計算:
・遷移確率行列の最大固有値(=1)に対応する
固有べクトル⇒v = Av
-行列計算のJavascr...
目標達成に必要なこと( 4/5 )
11
4.ネットワークデータの形式
-隣接行列(adjacency Matrix)、
隣接リスト(adjacency List)、
エッジリスト(Edge List)
→大規模データの疎(スパース)なグラフ
...
目標達成に必要なこと(5/5)
12
5.ネットワークのレイアウト
-ネットワークは何次元の空間でも矛盾しなくレ
イアウトは可能ですが、
-2次元/ 3次元にいかに落とし込むか
・Force-Directed Method
・次元圧縮(High...
目標達成に必要なこと(5/5の補足:その1)
13
5.ネットワークのレイアウト
- Force-Directed Method:
・Kamada-Kawai algorithm
→力学モデルによるグラフ描画
・Fruchterman-Rein...
目標達成に必要なこと(5/5の補足:その2)
14
5.ネットワークのレイアウト
- High Dimensional Embedding
-Edge Bundling
High Dimensional Embedding
http://bit...
JSベースの情報可視化ライブラリ VS
他のネットワーク可視化ツール(その1)
15
-JSベースの情報可視
化:
・D3.js
・sigma.js
・Raphael.js
・three.js
・Processing.js
sigma.js
h...
補足:
16
3.PageRankの計算と行列計算用Javascriptライブ
ラリ
- PageRankの計算:
・遷移確率行列の最大固有値(=1)に対応する
固有べクトル⇒v = Av
-行列計算のJavascriptライブラリ
・Nume...
D3.jsを使うメリット
17
-プログラムで制御できること
-動作環境を選ばないこと
-開発環境を選ばないこと
-インタラクションも含めて渡せること
⇒データの可視化が目的ではなく、そこから次な
るアクションを引き出すことがねらい。
⇒ Fo...
D3.jsの基本(その1)
18
そろそろお時間ですの
で、
次回以降にしたいとお
もいます…
が、
その前に、いつものを
では、いつものキャッチフレーズで!
19
時代はJSだ!
いやっ、JSが時代だ!
そして勉強会はJSCafe
だ!
次回以降のトピック(予定)
20
1.グラフの構造と種類について(グラフ理論)
2.有効グラフ・無向グラフの行列表示(グラフ理論)
3.RDBMS(MySQL)とグラフデータベース
(FlockDB)
3.1 最短経路問題とDijkstra法(...
Thanks for your kindness.
21
ご静聴、ありがとうございました!
参考文献・URI等一覧その1(逐次更新します)
• 日本のソーシャルネットワーク分析の実務も伴っている第1人者の
@millionsmileさんのJapan Rでの
「Rでソーシャルネットワーク分析」(2012)
http://www.slid...
参考文献・URI等一覧その2(逐次更新します)
• GrowthForecast: https://github.com/kazeburo/GrowthForecast/
http://kazeburo.github.io/GrowthFore...
参考文献・URI等一覧その2(逐次更新します)
• High Dimensional Embedding
http://reference.wolfram.com/mathematica/tutorial/GraphDrawingIntrodu...
memo
25
Upcoming SlideShare
Loading in …5
×

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

1,434
-1

Published on

1.Force-Directed Graph:
D3による可視化

2.Node.js + WebSocketを用いた通信

→1. + 2.で、Twitter/ Foursquareからデータ収集・可視化しやリアルタイム処理を行う。

今回はこれらに必要な要素をロードマップととして示したものです。

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,434
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. 自己紹介(@otanet) •背景: 2008年まで環境問題(廃棄物)を研究。 -産業廃棄物の不法投棄の実証分析 -最終処分場の跡地利用の環境評価 •これまでの取り組み: POSデータの分析によるコスト削減の提案や営 業戦 略の立案、業務改善のコンサルティング •発表等: http://www.slideshare.net/otanet/
  3. 3. 前回までのあらすじ…(その1) ⇒DevOps的な視点や「つながり」の視点から、 D3.jsにフォーカスされている! 3
  4. 4. 前回までのあらすじ… (その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ページリンクの 可視化によるサイト構造の改善
  5. 5. 今後の見通しとして -データ可視化のツールの切り口から- ⇒ここで、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. 6. 今後の目標 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. 7. 目標達成に必要なこと(全体) 7 1.ネットワーク図の描画のポイ ント 2.ネットワーク分析の様々な手 法 3.PageRankの計算と行列計算用 Javascriptライブラリ 4.ネットワークデータの形式 5.ネットワークのレイアウト… 次のスラ イドで、 少し掘り 下げてみ る!
  8. 8. 目標達成に必要なこと( 1/5) 8 1.ネットワーク図の描画のポイ ント -レイアウトの審美性基準: ・ネットワークと空間の位置関係の矛盾が少な いか。 -ノードの大きさ、エッジの太さ、色… ・グラフ特徴量、属性、グループ -ノードの形 ・シンボル、アイコン、写真、ダイヤグラム… -エッジの形 ・孤、矢印、等高線… 「視認性の高いグラフレイアウトについて」 http://rit.rakuten.co.jp/conf/rrds4/papers/RRDS4-020.pdf
  9. 9. 目標達成に必要なこと( 2/5 ) 9 2.ネットワーク分析の様々な手 法 -距離・経路: ・最短経路、距離中心性、媒介中心性、Dijkstra 法 -行列 ・固有べクトル中心性(PageRank)、Spectral Graph Analysis、Graph Laplacian -クラスタリング ・K-Clique Community、Newmanコミュニティ、 Modularity、連結成分、デンドログラム -その他
  10. 10. 目標達成に必要なこと( 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/
  11. 11. 目標達成に必要なこと( 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/
  12. 12. 目標達成に必要なこと(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)
  13. 13. 目標達成に必要なこと(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
  14. 14. 目標達成に必要なこと(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
  15. 15. 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. 16. 補足: 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/
  17. 17. 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
  18. 18. D3.jsの基本(その1) 18 そろそろお時間ですの で、 次回以降にしたいとお もいます… が、 その前に、いつものを
  19. 19. では、いつものキャッチフレーズで! 19 時代はJSだ! いやっ、JSが時代だ! そして勉強会はJSCafe だ!
  20. 20. 次回以降のトピック(予定) 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による通信
  21. 21. Thanks for your kindness. 21 ご静聴、ありがとうございました!
  22. 22. 参考文献・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
  23. 23. 参考文献・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
  24. 24. 参考文献・URI等一覧その2(逐次更新します) • 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
  25. 25. memo 25
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×