データ可視化的ななにか #TechLunch

Transcript

1. データ可視化的な なにか

2. データ可視化の前に

3. 可視化

4. 可視化？ 人間が直接「見る」ことのできない現象・事象・関係 性を「見る」ことのできるもの（画像・グラフ・図・表 など）にすること wikipedia - 可視化

5. かんばんとか

6. 相関図とか

7. じゃあデータ可視化は？

8. データ可視化のイメージ

9. データ可視化のイメージ

10. データ可視化のイメージ

11. データ可視化のイメージ

12. データ可視化のイメージ

13. データ可視化のイメージ

14. データ可視化 データ可視化の大目的は、明瞭かつ効果的に情 報とコミュニケーションができるように、データを視 覚化する能力そのものである Vitaly Friedman

15. データ可視化 データ可視化の大目的は、明瞭かつ効果的に情 報とコミュニケーションができるように、データを視 覚化する能力そのものである Vitaly Friedman

16. 明瞭かつ効果的にデータを可視化

17. 明瞭かつ効果的？ http://artzub.com/d3/wbca/

18. おしゃんてぃなビジュアルがあれば OK!というわけではない ※おしゃんてぃなビジュアルは見ている分には楽しいです

19. たとえば

20. たとえば http://shimz.me/example/d3js/geo_example/geo8/

21. データに基づいてドキュメントを構築すると データ可視化に近づきそうだ

22. 実際に可視化してみる

23. データを可視化するツール

24. データを可視化するツール

25. データを可視化するツール

26. 比較可能な状態

27. d3.js • データに基づいてドキュメントを操作するための JavaScript ライブラリ • HTML や SVG、 CSSを使ってデータに命を吹き込む

    • 表現方法ではなく変換方法 • コードが簡潔に書ける • jQueryっぽく書ける

28. サンプル・ライブラリが豊富 https://github.com/mbostock/d3/wiki/Gallery

29. 事例が豊富

30. d3.jsの基本的な使い方 • 要素の選択 ◦ d3.select('body') • データをバインディングする要素の選択 ◦ d3.select('body').selectAll('p') •

    データをバインド ◦ d3.select('body').selectAll('p').data(a) • d3オブジェクトを作成 ◦ d3.select('body').selectAll('p').data(a).enter() • 要素を追加 ◦ d3.select('body').selectAll('p').data(a).enter().append('p')

31. 実際に可視化してみる • 検索クエリの表示回数とクリック数可視化 ◦ 表 ◦ Bubble Chart ◦ Word

    Cloud

32. 実際に可視化してみて • d3.jsすごい簡単 ◦ jQuery弄った人ならすぐ使える • グラフィカルな可視化だからこそ見えるものものある ◦ フォントサイズだったり比較可能な図だったり •

    円グラフは使うな ◦ 帯グラフとか棒グラフをつかうとよい

33. ちなみに

34. 簡単にデータ可視化ができるよ

35. ご清聴ありがとうございました