データをわかりやすく可視化する「データビジュアライゼーション」勉強会
2014/06/27 (金) 19:00 - 21:30
https://www.facebook.com/events/645728912170926/
矢崎 裕一
実際に...
インフォメーション・グラフィックと
データ・ビジュアライゼーション
http://elections.nytimes.com/2012/results/president
• 人が手作業かグラフィックアプリケーションで描いている。
• 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選
ばれる。
• そのため、別のデータを使用して再作成するのが容易ではない。
• 表示についてのルールとその例...
データ・ビジュアライゼーション
• あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによっ
て描画されること。
• その描画によってデータセットを眺めているだけではわからない傾向や特徴が明ら
かになっていること。
• アルゴ...
データのビジュアライズ
step1.データを情報に変換する
人間の認知能力に合わせて抽象化して、理解できるものにする
• データセットそのものから特
徴や性質を掴むことが困難
• 特徴を理解できる
• 他のデータセットと組み合わせ
られる
なるほど!
step2.「なるほど!」と思って共感する
単なる理解から共感へ結びつける
• 自分ごとと関連づけて、
共感できる
ワークフロー
「ビジュアライジング・データ」
によるワークフロー
• 手軽で強力なプログラミング環境「Processing」を用いた情報視覚
化技術についての解説書。
• 地図情報・階層ファイルシステム・リスト・グラフ構造・時系列デー
タなど、さまざまなデー...
「Data Journalism Handbook」
によるワークフロー
• ロンドンで開かれた MozFest 2011での48時間ワークショップの集大成
• BBC、シカゴトリビューン、ガーディアン、フィナンシャルタイムズ、ニュー
ヨークタ...
データ→情報→インサイト
データを見つけ、
下ごしらえする
データを情報(ここでは
チャートを指す)に変換
し、分析/検証する
情報からインサイトを
見つける
なるほど!
データをどのように選定するか
• 1stパーティをまずはあたる
• メタデータ(誰がどのように集めたデータなの
か)が重要
• 専門家に聞くのはとても有益な手段
データをどのように選定するのか
• 各国のデータカタログサイト
• 国際機関(国連、世銀)のデータサイト
• Wikipedia
• SNS
• 各種ウェブサイト
• 専門家に聞く
• 書籍
etc…
データはどこにある?
「データは街に れている」
http://portal.nifty.com/2007/08/01/a/
自分のアクティビティ・データ
Quantified Self
Moves app
アクティビティ・データ・サービスにおける
Twitterのようなサービス
データを下ごしらえする
Google Refine
OpenRefine
• コラムごとのデータ形式の変換
• データ形式が間違っているものを
検出(数値のコラムに文字列があ
るなど)
• データの重複を探し出す
• 表記揺れの解消
• エラー値の検出と処理
• 空白の検出と処理
http://o...
データを情報に変換し、分析/検証する
RAW / Tableau / ManyEyes /
MatLab
データセットとビジュアル表現を選択するだけの比較的お手軽なもの
R / Python
データ分析
http://raw.densitydesign.org/
http://raw.visualizing.jp/#/
Raw
- ブラウザ上で動く
- データセットとビジュアル表現を選ぶだけ
- 結果の出力フォーマットも多様
http://www.tableausoftware.com/products/desktop
Tableau
Desktop edition。Mac版も先日リリース。
- 単体アプリ
- データセットとビジュアル表現を選ぶだけ
- 約10万円
http://www-958.ibm.com/software/analytics/labs/manyeyes/#create
ManyEyes
- ブラウザ上で動く(Java)
- データセットとビジュアル表現を選ぶだけ
http://www.mathworks.co.jp/products/statistics/
MatLab
MatLab+Statistics Toolbox
R
- オープンソース
- 統計解析のためのプログラミング言語
http://www.r-project.org/
Python
-「データ分析」と「最終プロダクト」を一つの言語で。
- Python as Glue 2.0
http://pydata.org/
https://www.packtpub.com/python-
data-visualizat...
情報からインサイトを見つける
探索型 物語型
データの探索をユーザーが出来るようにする。
作り手としてのインサイトは押し付けない。
作り手としてのインサイトを最大限に
伝える方法を考える。
誰がインサイトを見つけるのか
ユーザーに委ねる 作り手が仕上げる
実例紹介
インサイトを自分ごとに
http://www.extremepresentation.com/design/charts/
自分ごとに巻き込むためのForm/UI
別な切り口
位置情報(地図)
Form/UI
ビジュアライズツール
http://www.extremepresentation.com/design/charts/
「示したいこと」と「チャート」の対応表
1つのデータセットを
複数の切り口でビジュアライズする
別な切り口
位置情報(地図)
あるデータセット
地図系ツールの紹介
• D3.js
• Leaflet.js
D3.js
Show Reel
D3.jsの主な特徴や機能
選択、アニメーション、タイマー、補間、配列操作、ランダム、外
部リソースの読み込み、テキスト/CSV整形、カラーユーティリ
ティ、スケール、タイマー、レイアウト(Layout)、地理
(Geography)、地図投影...
unemployment rates from 2008
by Mike Bostock
http://bl.ocks.org/mbostock/4060606
Chropleth Maps 地形の色で値を表現する
http://leafletjs.com/
Leaflet.jsの主な特徴や機能
• タイル型地図
• 表示する地図を選べる
• 動作が軽量/軽快
• D3と連携可能
http://leaflet-extras.github.io/leaflet-providers/preview/
醒めた目でもう一度みてみると…
ドーナツチャート
割合を示す角度がすっぽり
表示から抜けている
http://www.telerik.com/help/windows-8-
html/chart-donut-series.html
パイチャート...
データビジュアライズで
大事なこと
ヴィジュアライズ=ものの見方
ギリシャ…熊 日本…柄杓中国…雲の上に
座っている王朝
北斗七星
客観的 vs 主観的
• データヴィジュアライゼーションは可視化されたデータに基づ
くものなのだが、それでも主観的な考えは入ってくる。
• 主観的な考えを完璧に排除することは難しいが、多面的な視座
を提供すること、元データをユーザー自身も検証で...
杉浦康平 - 時間軸変形地図
多視点なものの見方を提供する
視点のある場所によって、見える景色が変わる
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
Upcoming SlideShare
Loading in...5
×

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

2,063
-1

Published on

2014/06/27 (金) 6月27日にさくらWORKS<関内>で開かれた『データをわかりやすく可視化する「データビジュアライゼーション」勉強会』にて講演した際の資料です。

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

No Downloads
Views
Total Views
2,063
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
38
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

データをわかりやすく可視化する「データビジュアライゼーション」勉強会

  1. 1. データをわかりやすく可視化する「データビジュアライゼーション」勉強会 2014/06/27 (金) 19:00 - 21:30 https://www.facebook.com/events/645728912170926/ 矢崎 裕一 実際に形にするために 考え方のポイントとリソース紹介
  2. 2. インフォメーション・グラフィックと データ・ビジュアライゼーション
  3. 3. http://elections.nytimes.com/2012/results/president
  4. 4. • 人が手作業かグラフィックアプリケーションで描いている。 • 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選 ばれる。 • そのため、別のデータを使用して再作成するのが容易ではない。 • 表示についてのルールとその例外ルールについて、作者以外の外部から、すべて を推測することが難しい。 • 参照したデータとの関連性の証明が難しい。 • インタラクションがないものが多い。 インフォメーション・グラフィック http://visualizing.jp/infograph_vs_dataviz/
  5. 5. データ・ビジュアライゼーション • あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによっ て描画されること。 • その描画によってデータセットを眺めているだけではわからない傾向や特徴が明ら かになっていること。 • アルゴリズムはコーディングによって定義され、チャートやグラフとして発達して きた表示形式を用い、形式知化/可視化されていること。 • ソート、フィルター、トグルなどのインタラクションが可能で、その場でその結果 がすぐ得られること。 • 利用しているデータセットが可視化されていること。 http://visualizing.jp/infograph_vs_dataviz/
  6. 6. データのビジュアライズ
  7. 7. step1.データを情報に変換する 人間の認知能力に合わせて抽象化して、理解できるものにする • データセットそのものから特 徴や性質を掴むことが困難 • 特徴を理解できる • 他のデータセットと組み合わせ られる
  8. 8. なるほど! step2.「なるほど!」と思って共感する 単なる理解から共感へ結びつける • 自分ごとと関連づけて、 共感できる
  9. 9. ワークフロー
  10. 10. 「ビジュアライジング・データ」 によるワークフロー • 手軽で強力なプログラミング環境「Processing」を用いた情報視覚 化技術についての解説書。 • 地図情報・階層ファイルシステム・リスト・グラフ構造・時系列デー タなど、さまざまなデータの収集・解析手法から対話的な視覚化手 法・プログラミングテクニックまでを豊富な実例を用いて詳しく解 説している。(出版元サイトより) http://www.oreilly.co.jp/books/9784873113784/
  11. 11. 「Data Journalism Handbook」 によるワークフロー • ロンドンで開かれた MozFest 2011での48時間ワークショップの集大成 • BBC、シカゴトリビューン、ガーディアン、フィナンシャルタイムズ、ニュー ヨークタイムズ、ワシントンポスト、テキサストリビューンなどが参加。 • データ・ジャーナリズムの知識共有や実例集。 http://datajournalismhandbook.org/
  12. 12. データ→情報→インサイト データを見つけ、 下ごしらえする データを情報(ここでは チャートを指す)に変換 し、分析/検証する 情報からインサイトを 見つける なるほど!
  13. 13. データをどのように選定するか
  14. 14. • 1stパーティをまずはあたる • メタデータ(誰がどのように集めたデータなの か)が重要 • 専門家に聞くのはとても有益な手段 データをどのように選定するのか
  15. 15. • 各国のデータカタログサイト • 国際機関(国連、世銀)のデータサイト • Wikipedia • SNS • 各種ウェブサイト • 専門家に聞く • 書籍 etc… データはどこにある?
  16. 16. 「データは街に れている」 http://portal.nifty.com/2007/08/01/a/
  17. 17. 自分のアクティビティ・データ Quantified Self Moves app アクティビティ・データ・サービスにおける Twitterのようなサービス
  18. 18. データを下ごしらえする Google Refine
  19. 19. OpenRefine • コラムごとのデータ形式の変換 • データ形式が間違っているものを 検出(数値のコラムに文字列があ るなど) • データの重複を探し出す • 表記揺れの解消 • エラー値の検出と処理 • 空白の検出と処理 http://openrefine.org/
  20. 20. データを情報に変換し、分析/検証する RAW / Tableau / ManyEyes / MatLab データセットとビジュアル表現を選択するだけの比較的お手軽なもの R / Python データ分析
  21. 21. http://raw.densitydesign.org/ http://raw.visualizing.jp/#/ Raw - ブラウザ上で動く - データセットとビジュアル表現を選ぶだけ - 結果の出力フォーマットも多様
  22. 22. http://www.tableausoftware.com/products/desktop Tableau Desktop edition。Mac版も先日リリース。 - 単体アプリ - データセットとビジュアル表現を選ぶだけ - 約10万円
  23. 23. http://www-958.ibm.com/software/analytics/labs/manyeyes/#create ManyEyes - ブラウザ上で動く(Java) - データセットとビジュアル表現を選ぶだけ
  24. 24. http://www.mathworks.co.jp/products/statistics/ MatLab MatLab+Statistics Toolbox
  25. 25. R - オープンソース - 統計解析のためのプログラミング言語 http://www.r-project.org/
  26. 26. Python -「データ分析」と「最終プロダクト」を一つの言語で。 - Python as Glue 2.0 http://pydata.org/ https://www.packtpub.com/python- data-visualization-cookbook/book http://www.oreilly.co.jp/books/ 9784873116556/ NumPy + pandas
  27. 27. 情報からインサイトを見つける
  28. 28. 探索型 物語型 データの探索をユーザーが出来るようにする。 作り手としてのインサイトは押し付けない。 作り手としてのインサイトを最大限に 伝える方法を考える。 誰がインサイトを見つけるのか ユーザーに委ねる 作り手が仕上げる
  29. 29. 実例紹介
  30. 30. インサイトを自分ごとに
  31. 31. http://www.extremepresentation.com/design/charts/ 自分ごとに巻き込むためのForm/UI 別な切り口 位置情報(地図) Form/UI
  32. 32. ビジュアライズツール
  33. 33. http://www.extremepresentation.com/design/charts/ 「示したいこと」と「チャート」の対応表
  34. 34. 1つのデータセットを 複数の切り口でビジュアライズする 別な切り口 位置情報(地図) あるデータセット
  35. 35. 地図系ツールの紹介 • D3.js • Leaflet.js
  36. 36. D3.js
  37. 37. Show Reel
  38. 38. D3.jsの主な特徴や機能 選択、アニメーション、タイマー、補間、配列操作、ランダム、外 部リソースの読み込み、テキスト/CSV整形、カラーユーティリ ティ、スケール、タイマー、レイアウト(Layout)、地理 (Geography)、地図投影法(Map Projection)、幾何(Geometry) • 統計学上必要な計算を賄ってくれる • 地図投影法が多数用意されている • 細かいスタイリングがすべて指定できる • ウェブ標準に則っている
  39. 39. unemployment rates from 2008 by Mike Bostock http://bl.ocks.org/mbostock/4060606 Chropleth Maps 地形の色で値を表現する
  40. 40. http://leafletjs.com/ Leaflet.jsの主な特徴や機能 • タイル型地図 • 表示する地図を選べる • 動作が軽量/軽快 • D3と連携可能
  41. 41. http://leaflet-extras.github.io/leaflet-providers/preview/
  42. 42. 醒めた目でもう一度みてみると… ドーナツチャート 割合を示す角度がすっぽり 表示から抜けている http://www.telerik.com/help/windows-8- html/chart-donut-series.html パイチャート 項目が多すぎて 比較が困難 http://eagereyes.org/techniques/pie-charts GoogleMaps 項目が多すぎて よくわからない http://mrare.ca/blog/visualizing-our-calgary- transit-iphone-app-next-stops-usage
  43. 43. データビジュアライズで 大事なこと
  44. 44. ヴィジュアライズ=ものの見方
  45. 45. ギリシャ…熊 日本…柄杓中国…雲の上に 座っている王朝 北斗七星
  46. 46. 客観的 vs 主観的 • データヴィジュアライゼーションは可視化されたデータに基づ くものなのだが、それでも主観的な考えは入ってくる。 • 主観的な考えを完璧に排除することは難しいが、多面的な視座 を提供すること、元データをユーザー自身も検証できるように することで、解釈する余地や幅を持たせてあげることが肝要。
  47. 47. 杉浦康平 - 時間軸変形地図 多視点なものの見方を提供する 視点のある場所によって、見える景色が変わる
  1. A particular slide catching your eye?

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

×