SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Downloaden Sie, um offline zu lesen
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
2014/06/27 (金) 19:00 - 21:30
https://www.facebook.com/events/645728912170926/
矢崎 裕一
実際に形にするために
考え方のポイントとリソース紹介
インフォメーション・グラフィックと
データ・ビジュアライゼーション
http://elections.nytimes.com/2012/results/president
• 人が手作業かグラフィックアプリケーションで描いている。
• 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選
ばれる。
• そのため、別のデータを使用して再作成するのが容易ではない。
• 表示についてのルールとその例外ルールについて、作者以外の外部から、すべて
を推測することが難しい。
• 参照したデータとの関連性の証明が難しい。
• インタラクションがないものが多い。
インフォメーション・グラフィック
http://visualizing.jp/infograph_vs_dataviz/
データ・ビジュアライゼーション
• あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによっ
て描画されること。
• その描画によってデータセットを眺めているだけではわからない傾向や特徴が明ら
かになっていること。
• アルゴリズムはコーディングによって定義され、チャートやグラフとして発達して
きた表示形式を用い、形式知化/可視化されていること。
• ソート、フィルター、トグルなどのインタラクションが可能で、その場でその結果
がすぐ得られること。
• 利用しているデータセットが可視化されていること。
http://visualizing.jp/infograph_vs_dataviz/
データのビジュアライズ
step1.データを情報に変換する
人間の認知能力に合わせて抽象化して、理解できるものにする
• データセットそのものから特
徴や性質を掴むことが困難
• 特徴を理解できる
• 他のデータセットと組み合わせ
られる
なるほど!
step2.「なるほど!」と思って共感する
単なる理解から共感へ結びつける
• 自分ごとと関連づけて、
共感できる
ワークフロー
「ビジュアライジング・データ」
によるワークフロー
• 手軽で強力なプログラミング環境「Processing」を用いた情報視覚
化技術についての解説書。
• 地図情報・階層ファイルシステム・リスト・グラフ構造・時系列デー
タなど、さまざまなデータの収集・解析手法から対話的な視覚化手
法・プログラミングテクニックまでを豊富な実例を用いて詳しく解
説している。(出版元サイトより)
http://www.oreilly.co.jp/books/9784873113784/
「Data Journalism Handbook」
によるワークフロー
• ロンドンで開かれた MozFest 2011での48時間ワークショップの集大成
• BBC、シカゴトリビューン、ガーディアン、フィナンシャルタイムズ、ニュー
ヨークタイムズ、ワシントンポスト、テキサストリビューンなどが参加。
• データ・ジャーナリズムの知識共有や実例集。
http://datajournalismhandbook.org/
データ→情報→インサイト
データを見つけ、
下ごしらえする
データを情報(ここでは
チャートを指す)に変換
し、分析/検証する
情報からインサイトを
見つける
なるほど!
データをどのように選定するか
• 1stパーティをまずはあたる
• メタデータ(誰がどのように集めたデータなの
か)が重要
• 専門家に聞くのはとても有益な手段
データをどのように選定するのか
• 各国のデータカタログサイト
• 国際機関(国連、世銀)のデータサイト
• Wikipedia
• SNS
• 各種ウェブサイト
• 専門家に聞く
• 書籍
etc…
データはどこにある?
「データは街に れている」
http://portal.nifty.com/2007/08/01/a/
自分のアクティビティ・データ
Quantified Self
Moves app
アクティビティ・データ・サービスにおける
Twitterのようなサービス
データを下ごしらえする
Google Refine
OpenRefine
• コラムごとのデータ形式の変換
• データ形式が間違っているものを
検出(数値のコラムに文字列があ
るなど)
• データの重複を探し出す
• 表記揺れの解消
• エラー値の検出と処理
• 空白の検出と処理
http://openrefine.org/
データを情報に変換し、分析/検証する
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-visualization-cookbook/book
http://www.oreilly.co.jp/books/
9784873116556/
NumPy + pandas
情報からインサイトを見つける
探索型 物語型
データの探索をユーザーが出来るようにする。
作り手としてのインサイトは押し付けない。
作り手としてのインサイトを最大限に
伝える方法を考える。
誰がインサイトを見つけるのか
ユーザーに委ねる 作り手が仕上げる
実例紹介
インサイトを自分ごとに
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)、地図投影法(Map Projection)、幾何(Geometry)
• 統計学上必要な計算を賄ってくれる
• 地図投影法が多数用意されている
• 細かいスタイリングがすべて指定できる
• ウェブ標準に則っている
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
パイチャート
項目が多すぎて
比較が困難
http://eagereyes.org/techniques/pie-charts
GoogleMaps
項目が多すぎて
よくわからない
http://mrare.ca/blog/visualizing-our-calgary-
transit-iphone-app-next-stops-usage
データビジュアライズで
大事なこと
ヴィジュアライズ=ものの見方
ギリシャ…熊 日本…柄杓中国…雲の上に
座っている王朝
北斗七星
客観的 vs 主観的
• データヴィジュアライゼーションは可視化されたデータに基づ
くものなのだが、それでも主観的な考えは入ってくる。
• 主観的な考えを完璧に排除することは難しいが、多面的な視座
を提供すること、元データをユーザー自身も検証できるように
することで、解釈する余地や幅を持たせてあげることが肝要。
杉浦康平 - 時間軸変形地図
多視点なものの見方を提供する
視点のある場所によって、見える景色が変わる
データをわかりやすく可視化する「データビジュアライゼーション」勉強会

Weitere ähnliche Inhalte

Mehr von Yuichi Yazaki

「価値観カルテ」
「価値観カルテ」「価値観カルテ」
「価値観カルテ」Yuichi Yazaki
 
「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」Yuichi Yazaki
 
Code for Japan 第10回 Brigadeワークショップ
Code for Japan 第10回 BrigadeワークショップCode for Japan 第10回 Brigadeワークショップ
Code for Japan 第10回 BrigadeワークショップYuichi Yazaki
 
Data Visualization Japanの目指すもの
Data Visualization Japanの目指すものData Visualization Japanの目指すもの
Data Visualization Japanの目指すものYuichi Yazaki
 
Code for Tokyoとは
Code for TokyoとはCode for Tokyoとは
Code for TokyoとはYuichi Yazaki
 
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1Yuichi Yazaki
 
ワークショップ「D3.js」入門
ワークショップ「D3.js」入門ワークショップ「D3.js」入門
ワークショップ「D3.js」入門Yuichi Yazaki
 
World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.Yuichi Yazaki
 
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動についてYuichi Yazaki
 

Mehr von Yuichi Yazaki (9)

「価値観カルテ」
「価値観カルテ」「価値観カルテ」
「価値観カルテ」
 
「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」
 
Code for Japan 第10回 Brigadeワークショップ
Code for Japan 第10回 BrigadeワークショップCode for Japan 第10回 Brigadeワークショップ
Code for Japan 第10回 Brigadeワークショップ
 
Data Visualization Japanの目指すもの
Data Visualization Japanの目指すものData Visualization Japanの目指すもの
Data Visualization Japanの目指すもの
 
Code for Tokyoとは
Code for TokyoとはCode for Tokyoとは
Code for Tokyoとは
 
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
 
ワークショップ「D3.js」入門
ワークショップ「D3.js」入門ワークショップ「D3.js」入門
ワークショップ「D3.js」入門
 
World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.
 
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
 

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