Suche senden
Hochladen
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
•
24 gefällt mir
•
5,199 views
Yuichi Yazaki
Folgen
2014/06/27 (金) 6月27日にさくらWORKS<関内>で開かれた『データをわかりやすく可視化する「データビジュアライゼーション」勉強会』にて講演した際の資料です。
Weniger lesen
Mehr lesen
Design
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 53
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
Yuichi Yazaki
ブロックチェーンと仮想通貨の仕組みアップ用
ブロックチェーンと仮想通貨の仕組みアップ用
Mugen Fujii
シビックテックとデザイン
シビックテックとデザイン
Yuichi Yazaki
米国大使館共催イベント ♡大好きな音楽が動き出す♡データビジュアライズのキラキラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音楽が動き出す♡データビジュアライズのキラキラおまじないをかけてみよう!
Yuichi Yazaki
CfJSummit2015 Day2 データとプログラミングで絵を描こう
CfJSummit2015 Day2 データとプログラミングで絵を描こう
Yuichi Yazaki
Japanese Open and Generative Design
Japanese Open and Generative Design
Yuichi Yazaki
データビジュアライゼーションの地理空間情報分野への応用可能性
データビジュアライゼーションの地理空間情報分野への応用可能性
Yuichi Yazaki
心地良さのインタラクションデザイン ワークショップ
心地良さのインタラクションデザイン ワークショップ
Yuichi Yazaki
Empfohlen
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
Yuichi Yazaki
ブロックチェーンと仮想通貨の仕組みアップ用
ブロックチェーンと仮想通貨の仕組みアップ用
Mugen Fujii
シビックテックとデザイン
シビックテックとデザイン
Yuichi Yazaki
米国大使館共催イベント ♡大好きな音楽が動き出す♡データビジュアライズのキラキラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音楽が動き出す♡データビジュアライズのキラキラおまじないをかけてみよう!
Yuichi Yazaki
CfJSummit2015 Day2 データとプログラミングで絵を描こう
CfJSummit2015 Day2 データとプログラミングで絵を描こう
Yuichi Yazaki
Japanese Open and Generative Design
Japanese Open and Generative Design
Yuichi Yazaki
データビジュアライゼーションの地理空間情報分野への応用可能性
データビジュアライゼーションの地理空間情報分野への応用可能性
Yuichi Yazaki
心地良さのインタラクションデザイン ワークショップ
心地良さのインタラクションデザイン ワークショップ
Yuichi Yazaki
「価値観カルテ」
「価値観カルテ」
Yuichi Yazaki
「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」
Yuichi Yazaki
Code for Japan 第10回 Brigadeワークショップ
Code for Japan 第10回 Brigadeワークショップ
Yuichi Yazaki
Data Visualization Japanの目指すもの
Data Visualization Japanの目指すもの
Yuichi Yazaki
Code for Tokyoとは
Code for Tokyoとは
Yuichi Yazaki
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
Yuichi Yazaki
ワークショップ「D3.js」入門
ワークショップ「D3.js」入門
Yuichi Yazaki
World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.
Yuichi Yazaki
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
Yuichi Yazaki
Weitere ähnliche Inhalte
Mehr von Yuichi Yazaki
「価値観カルテ」
「価値観カルテ」
Yuichi Yazaki
「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」
Yuichi Yazaki
Code for Japan 第10回 Brigadeワークショップ
Code for Japan 第10回 Brigadeワークショップ
Yuichi Yazaki
Data Visualization Japanの目指すもの
Data Visualization Japanの目指すもの
Yuichi Yazaki
Code for Tokyoとは
Code for Tokyoとは
Yuichi Yazaki
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
Yuichi Yazaki
ワークショップ「D3.js」入門
ワークショップ「D3.js」入門
Yuichi Yazaki
World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.
Yuichi Yazaki
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
Yuichi Yazaki
Mehr von Yuichi Yazaki
(9)
「価値観カルテ」
「価値観カルテ」
「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」
Code for Japan 第10回 Brigadeワークショップ
Code for Japan 第10回 Brigadeワークショップ
Data Visualization Japanの目指すもの
Data Visualization Japanの目指すもの
Code for Tokyoとは
Code for Tokyoとは
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
ワークショップ「D3.js」入門
ワークショップ「D3.js」入門
World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
1.
データをわかりやすく可視化する「データビジュアライゼーション」勉強会 2014/06/27 (金) 19:00
- 21:30 https://www.facebook.com/events/645728912170926/ 矢崎 裕一 実際に形にするために 考え方のポイントとリソース紹介
2.
3.
4.
5.
6.
インフォメーション・グラフィックと データ・ビジュアライゼーション
7.
8.
http://elections.nytimes.com/2012/results/president
9.
• 人が手作業かグラフィックアプリケーションで描いている。 • 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選 ばれる。 •
そのため、別のデータを使用して再作成するのが容易ではない。 • 表示についてのルールとその例外ルールについて、作者以外の外部から、すべて を推測することが難しい。 • 参照したデータとの関連性の証明が難しい。 • インタラクションがないものが多い。 インフォメーション・グラフィック http://visualizing.jp/infograph_vs_dataviz/
10.
データ・ビジュアライゼーション • あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによっ て描画されること。 • その描画によってデータセットを眺めているだけではわからない傾向や特徴が明ら かになっていること。 •
アルゴリズムはコーディングによって定義され、チャートやグラフとして発達して きた表示形式を用い、形式知化/可視化されていること。 • ソート、フィルター、トグルなどのインタラクションが可能で、その場でその結果 がすぐ得られること。 • 利用しているデータセットが可視化されていること。 http://visualizing.jp/infograph_vs_dataviz/
11.
データのビジュアライズ
12.
step1.データを情報に変換する 人間の認知能力に合わせて抽象化して、理解できるものにする • データセットそのものから特 徴や性質を掴むことが困難 • 特徴を理解できる •
他のデータセットと組み合わせ られる
13.
なるほど! step2.「なるほど!」と思って共感する 単なる理解から共感へ結びつける • 自分ごとと関連づけて、 共感できる
14.
ワークフロー
15.
「ビジュアライジング・データ」 によるワークフロー • 手軽で強力なプログラミング環境「Processing」を用いた情報視覚 化技術についての解説書。 • 地図情報・階層ファイルシステム・リスト・グラフ構造・時系列デー タなど、さまざまなデータの収集・解析手法から対話的な視覚化手 法・プログラミングテクニックまでを豊富な実例を用いて詳しく解 説している。(出版元サイトより) http://www.oreilly.co.jp/books/9784873113784/
16.
「Data Journalism Handbook」 によるワークフロー •
ロンドンで開かれた MozFest 2011での48時間ワークショップの集大成 • BBC、シカゴトリビューン、ガーディアン、フィナンシャルタイムズ、ニュー ヨークタイムズ、ワシントンポスト、テキサストリビューンなどが参加。 • データ・ジャーナリズムの知識共有や実例集。 http://datajournalismhandbook.org/
17.
データ→情報→インサイト データを見つけ、 下ごしらえする データを情報(ここでは チャートを指す)に変換 し、分析/検証する 情報からインサイトを 見つける なるほど!
18.
データをどのように選定するか
19.
• 1stパーティをまずはあたる • メタデータ(誰がどのように集めたデータなの か)が重要 •
専門家に聞くのはとても有益な手段 データをどのように選定するのか
20.
• 各国のデータカタログサイト • 国際機関(国連、世銀)のデータサイト •
Wikipedia • SNS • 各種ウェブサイト • 専門家に聞く • 書籍 etc… データはどこにある?
21.
「データは街に れている」 http://portal.nifty.com/2007/08/01/a/
22.
自分のアクティビティ・データ Quantified Self Moves app アクティビティ・データ・サービスにおける Twitterのようなサービス
23.
データを下ごしらえする Google Refine
24.
OpenRefine • コラムごとのデータ形式の変換 • データ形式が間違っているものを 検出(数値のコラムに文字列があ るなど) •
データの重複を探し出す • 表記揺れの解消 • エラー値の検出と処理 • 空白の検出と処理 http://openrefine.org/
25.
データを情報に変換し、分析/検証する RAW / Tableau
/ ManyEyes / MatLab データセットとビジュアル表現を選択するだけの比較的お手軽なもの R / Python データ分析
26.
http://raw.densitydesign.org/ http://raw.visualizing.jp/#/ Raw - ブラウザ上で動く - データセットとビジュアル表現を選ぶだけ -
結果の出力フォーマットも多様
27.
http://www.tableausoftware.com/products/desktop Tableau Desktop edition。Mac版も先日リリース。 - 単体アプリ -
データセットとビジュアル表現を選ぶだけ - 約10万円
28.
http://www-958.ibm.com/software/analytics/labs/manyeyes/#create ManyEyes - ブラウザ上で動く(Java) - データセットとビジュアル表現を選ぶだけ
29.
http://www.mathworks.co.jp/products/statistics/ MatLab MatLab+Statistics Toolbox
30.
R - オープンソース - 統計解析のためのプログラミング言語 http://www.r-project.org/
31.
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
32.
情報からインサイトを見つける
33.
探索型 物語型 データの探索をユーザーが出来るようにする。 作り手としてのインサイトは押し付けない。 作り手としてのインサイトを最大限に 伝える方法を考える。 誰がインサイトを見つけるのか ユーザーに委ねる 作り手が仕上げる
34.
実例紹介
35.
インサイトを自分ごとに
36.
http://www.extremepresentation.com/design/charts/ 自分ごとに巻き込むためのForm/UI 別な切り口 位置情報(地図) Form/UI
37.
ビジュアライズツール
38.
http://www.extremepresentation.com/design/charts/ 「示したいこと」と「チャート」の対応表
39.
1つのデータセットを 複数の切り口でビジュアライズする 別な切り口 位置情報(地図) あるデータセット
40.
地図系ツールの紹介 • D3.js • Leaflet.js
41.
D3.js
42.
Show Reel
43.
D3.jsの主な特徴や機能 選択、アニメーション、タイマー、補間、配列操作、ランダム、外 部リソースの読み込み、テキスト/CSV整形、カラーユーティリ ティ、スケール、タイマー、レイアウト(Layout)、地理 (Geography)、地図投影法(Map Projection)、幾何(Geometry) • 統計学上必要な計算を賄ってくれる •
地図投影法が多数用意されている • 細かいスタイリングがすべて指定できる • ウェブ標準に則っている
44.
unemployment rates from
2008 by Mike Bostock http://bl.ocks.org/mbostock/4060606 Chropleth Maps 地形の色で値を表現する
45.
http://leafletjs.com/ Leaflet.jsの主な特徴や機能 • タイル型地図 • 表示する地図を選べる •
動作が軽量/軽快 • D3と連携可能
46.
http://leaflet-extras.github.io/leaflet-providers/preview/
47.
醒めた目でもう一度みてみると… ドーナツチャート 割合を示す角度がすっぽり 表示から抜けている 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
48.
データビジュアライズで 大事なこと
49.
ヴィジュアライズ=ものの見方
50.
ギリシャ…熊 日本…柄杓中国…雲の上に 座っている王朝 北斗七星
51.
客観的 vs 主観的 •
データヴィジュアライゼーションは可視化されたデータに基づ くものなのだが、それでも主観的な考えは入ってくる。 • 主観的な考えを完璧に排除することは難しいが、多面的な視座 を提供すること、元データをユーザー自身も検証できるように することで、解釈する余地や幅を持たせてあげることが肝要。
52.
杉浦康平 - 時間軸変形地図 多視点なものの見方を提供する 視点のある場所によって、見える景色が変わる
Jetzt herunterladen