1. データマイニングとビジュアライゼーション
第22回 データマイニング+WEB@東京 (TokyoWebmining #22)
Sep 23, 2012
1
Sunday, September 23, 12

2. 自己紹介
✦ [Name] 本郷 寛 ( twitter: @hongo3_5 )
✦ [Status] 東大院修士2年
✦ [Major] Visualization , (Network science)
✦ [Arbeit] 楽天技術研究所(RIT)
✦ [Hobby] Squash 2
Sunday, September 23, 12

3. Agenda
✦ ビジュアライゼーション(14slides)
・概要(7)
・注意すべき点(4)
・ツールの紹介(3)
✦ Dashboard(4slides)
・概要(2)
・自作 or ツール(2)
3
Sunday, September 23, 12

4. ビジュアライゼーションについて
4
Sunday, September 23, 12

5. ビジュアライゼーション
✦ 人間のデータ理解を助けてくれる
✦ 処理対象データの大規模・多次元化による可視化の必要性
ビジュアライゼーションと関係の深い分野
Data Mining Network Science Bio Informatics
5
Sunday, September 23, 12

6. データマイニングとビジュアライゼーション
✦ データマイニングとビジュアライゼーションはセット
✦ 目的はどちらも大量のデータの中から価値あるもの、パターンを見つけること
ビジュアルデータマイニング
データマイニング
・統計学、パターン認識
・コンピュータの優れた部分
データ
ビジュアライゼーション
・視覚的認知能力、直感力
・コンピュータには真似できない、人間の優れた部分
6
Sunday, September 23, 12

7. 注目される可視化
✦ ビッグデータがさらに大きくなるにつれ、複雑なデータがより簡潔に表現されること
が求められる
✦ ビッグデータという新たな世界の理解のために、クライアントにとって未知で価値あ
る貴重な情報・洞察を視覚的にストーリーテリングできることが重要
✦ ストーリーが語れれば、その後の展開が予想でき、戦略を練ることができる
http://bi4everybody.com/2012/03/nielsen_dataviz/
7
Sunday, September 23, 12

8. 注目される可視化
✦ グラフィックス能力の向上
✦ ブラウザ上でリッチな表現が可能に
HTML5
SVG Canvas
・Markup defined graphics ・Raster based
・DOM-friendly ・Larger-scale graphics application(social game)
・Vector based
CSS3 gradient, transition
8
Sunday, September 23, 12

9. 研究の側から見たビジュアライゼーション
データマイニング
・定量的に評価しやすい
ビジュアライゼーション
・定量的に評価しにくい
Hierarchical Edge Bundles:
・手法の評価方法はユーザーテストなど Visualization of Adjacency Relations in Hierarchical Data
新しい手法、インターフェイスの提案で良い結果を出すのは難しい
定量的な評価がしやすい部分をメインにし、ビジュアライゼーションは
より深い理解をするためのサポート(個人的な意見です...) 9
Sunday, September 23, 12

10. VisWeek
✦ 最も有名なビジュアライゼーションの学会
・多次元データ、時系列データ...
・システム開発論文も多い
・見るだけでもおもしろい
http://visweek.org/
10
Sunday, September 23, 12

11. 研究と現実のギャップ
✦ 見る人に対して付加的な知識を要求すべきではない
✦ 何を表しているのか説明しなければならない可視化は現実には使えない
エンコード
データ
色、形、大きさ
デコード
色、形、大きさが何を表しているのか
データを見ることに慣れていない人が見
Reader/User
てもわかるかどうか
11
Sunday, September 23, 12

12. 1. Target
2. Focus plus Context
3. Story
12
Sunday, September 23, 12

13. 1. Target
✦ 誰が見るのか？
例1. データ(可視化)についての深い知識があり、専門的な人
→ より多くの情報が伝えられるような表現...
例2. あまりデータに精通していない人
→ シンプルでわかりやすい表現...
例3. 自分だけ
使う人、見る人のことを第一に考える
13
Sunday, September 23, 12

14. 2. Focus plus Context
✦ 実現するためにはインタラクティブ性が必要
Focus : 詳細情報へのアクセス
Context : 全体像、情報間の関連
Context 全体の中での対象データの位置付け
俯瞰的可視化 詳細の可視化
Content Content
(Context) (Focus)
14
Sunday, September 23, 12

15. 3. Story
✦ すべてのビジュアライゼーションが持っているのは、ストーリーを語るということ
可視化する目的を明確にし、データについての物語を語れなければならない
Data Science Summit 2012
・ユーザーエクスペリエンスが次の2年のチャレンジ
・偉大なData Scientistは結果だけではなくストーリーで語れる
http://www.greenplum.com/datasciencesummit
(参考) http://flowingdata.com/2012/05/26/even-simple-charts-can-tell-a-story/
15
Sunday, September 23, 12

16. ストーリーを語るために重要なこと
・目的を明確にする(何のために可視化するのか?何が見たいのか?)
→ 最も重要
・対象とするデータに対する深い知識、理解がある
→例えば、金融の知識がない人が金融データを見てもストーリーは語れない
・適切な可視化手法を選択する
→データの種類、目的にあった手法の選択
16
Sunday, September 23, 12

17. Tools
・Highcharts
一般的なラインチャート、ヒストグラムの描画
http://www.highcharts.com/
・d3.js
jQueryライクにDOM操作ができる。実装スキルは必要だが、様々なグラフ描画が可能
http://d3js.org/
・Three.js
簡単に3D描画ができるライブラリ
http://mrdoob.github.com/three.js/
17
Sunday, September 23, 12

18. Tools
Datavisualization.ch
http://selection.datavisualization.ch/
Viz Log(日本語)
http://keiono.tumblr.com/post/22576668024/complex-data-visualization-with-javascript-part-1
18
Sunday, September 23, 12

19. d3.js
Data-Driven Documents
Sample Code
・jQueryライク(セレクタ、メソッドチェーン)
・サンプルコードが大量にある
・活発なコミュニティ
19
Sunday, September 23, 12

20. Dashboard
20
Sunday, September 23, 12

21. Dashboard
Definition
A dashboard is a visual display of the most important information needed to
achieve one or more objectives; consolidated and arranged on a single screen so
the information can be monitored at a glance.
✦ 全体を見渡して傾向を把握したい場合に使われる
✦ Focus plus ContextのContext
✦ 特定の気になる部分をドリルダウン(Focus)
21
Sunday, September 23, 12

22. Dashboard
✦ これからは、ダッシュボードのような俯瞰的なデータの見せ方がより注目される
Line chart
データ Histogram
・・
大規模・多次元化
低次元データを扱う一般的な手法
わかりやすいグラフを並べて、様々な
角度からデータを見る
Parallel Coordinates
Chord Diagram
・・
・高次元データ、次元間の関係性を表せる
・なじみが薄い 22
Sunday, September 23, 12

23. (参考)Parallel coordinates
✦ 複数の座標軸を平行に並べ、各軸の間を線で結ぶことで、次元間の関係性を可視化
y y x
x
正相関 負相関
次元の並びを固定してしまうと特定次元間の
関係性しか見られなくなる
→次元をインタラクティブに変える工夫
23
Sunday, September 23, 12

24. 自作 or ツール
✦ 自作する場合 Tableau
・数字の根拠を説明(ストーリー)しやすい
・開発コストがかかる
✦ BIツールを使う場合
・見やすさ、機能の豊富さ Metric Insights
・コスト安
・きちんと数字の説明ができるか？
一長一短で、どちらがよいかは場合による
24
Sunday, September 23, 12

25. 自作する場合
✦ Twitter Bootstrap
✦ Kendo UI
✦ Graphup
✦ Highcharts ・外部に見せるわけではないので、差別化の必要は無い
・ Calendarの機能
✦ (おまけ) Themeforest ( http://themeforest.net/ )
Dashboardに特化したデザインを購入できる
25
Sunday, September 23, 12

26. 今回のまとめ
26
Sunday, September 23, 12

27. まとめ
✦ ビジュアライゼーションは注目されているけど、表面的な部分(綺麗さなど)だけではな
く、データをきちんと伝えられるかが重要
✦ データ、エンジニアリング、デザイン、ビジネスまで幅広い知識が必要
✦ 複雑なものよりシンプルなもの
27
Sunday, September 23, 12

28. 情報収集
✦ visual.ly
http://blog.visual.ly/
✦ FlowingData
http://flowingdata.com/
✦ visualizing data
http://www.visualisingdata.com/
ビジュアライゼーション分野の日本語資料はほとんどない...
28
Sunday, September 23, 12