Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
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
×

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

3,995 views

Published on

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

Published in: Design

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

  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. 杉浦康平 - 時間軸変形地図 多視点なものの見方を提供する 視点のある場所によって、見える景色が変わる

×