code for japan 第10回 brigadeワークショップ
Post on 20-Jul-2015
309 Views
Preview:
TRANSCRIPT
インフォグラフィックスをハンズオンで学ぶ！第10回Brigadeワークショップ
矢崎 裕一
13:00-13:10 会場挨拶など
13:10-14:00 講義
14:00-14:10 休憩
14:00-17:00 実習(infogr.am)
17:00-18:00 発表＆講評
今日の進行
・自己紹介 ・Code for Japan/Tokyo !
・インフォグラフィックスとは ・インフォグラフィックスvsデータビジュアライゼーション ・日本におけるデータビジュアライゼーション !
・最近の作品 ・データ×グラフィックが彩る世界 !
・データのあり方 ・データの整形 ・データの組み合わせ方
・自己紹介 !
!
・インフォグラフィックス !
!
!
・事例紹介 !
!
・データ
シャボン玉生成器Processingで形を生成
イラスト：加藤オズワルド
曄田依子 ポートフォリオ
DataVisualizationJapan(Facebookグループ)https://www.facebook.com/groups/datavizjapan/
（テレビ局ディレクター） タイトル：医療データ可視化の最前線 !小副川 健さん（富士通株式会社/Data Visualization Japan） タイトル：ちゃんと学ぶD3.js !財満大介さん（日本経済新聞） タイトル：日経新聞でのデータ可視化について !西田 善彦さん（富士通デザイン株式会社） タイトル：直感とビジュアライズ !奥山 晶二郎さん（朝日新聞） タイトル：震災報道におけるデータジャーナリズム !伊藤 大地さん（ハフィントン・ポスト日本版 エディター） タイトル：コードの書けないド文系がデータを使って報道するのって大変だ !五十嵐 康伸さん（研究者） タイトル：Graph it forward - Plotlyに見るグラフ共有の意味 - !矢崎 裕一（Data Visualization Japan/visualizing.jp） タイトル：DataVisualizationJapanの目指すもの
http://data-visualization-japan.doorkeeper.jp/events/14892
第一回イベント 9/16 at Mixi.
鈴木 拓生さん（@taquo） タイトル：アナログとデジタルのヴィジュアライゼーション手法 !櫻田 潤さん（NewsPicks） タイトル：ビジュアル・コンテンツのデザイン !大友 翔一さん（研究者） タイトル：統計・防災・環境情報が、ひと目で分かる地図の作り方 !五十嵐 康伸さん（研究者） タイトル：Graph it forward by using E2D3
https://data-visualization-japan.doorkeeper.jp/events/18551第二回イベント 12/25 at Sony Craetive Lounge
谷口 直嗣さん（フリーランス） タイトル：バーチャルリアリティを使ったデータビジュアライゼーションの可能性 !清水 正行さん（研究者） タイトル：たのしいジオビジュアライゼーション !大野 圭一朗さん（カリフォルニア大学サンディエゴ校医学部/Data Visualization Japan） タイトル：「数字を見せろ」から「コードを見せろ」へ
医療ビッグデータ勉強会https://www.facebook.com/groups/338084979676310/
image by Kenichiro Ono
http://visualizing.jp/code-for-japan-logo/
「この試みは、この母国である日本を一
旦相対化し、当たり前のことだと思って
いる思い込みを一旦留保して疑いそもそ
も論に立ち返り、コードで生成されるア
プリやサービスを通じて見えてくるもの
を元に、もう一度自分たちや国のあり方
を捉え直す行為ではないか」
Code for Japanのロゴについて
東京オリンピック 1.0「TOKYOオリンピック物語」
ノンフィクション作家の野地秩嘉氏が15年もの取材を重
ねて執筆した、東京オリンピック1.0の裏方実務家たちの
活躍を描いた一冊。あまり知られていなかった日本の意
地を賭けた職人たちの戦いと、彼らが巻き起こしたイノ
ベーションがありありと記録されている。
亀倉雄策
東京オリンピック 1.0「TOKYOオリンピック物語」
「日本人は時間を守るとか団体行動に向いていると
いうのは嘘だ。どちらも東京オリンピック以降に確
立したものだ。みんな、そのことを忘れている。」
村上信夫（帝国レストラン料理長）
東京オリンピック 1.0「TOKYOオリンピック物語」
「今ではどこのホテルでも料理人は分担して仕事をします。当たり前だと思ってやります。だが、当時
は全員が力を合わせるなんてことはなかった。料理人は１年違えば位が違うし、仕事もまったく違う。
熟練の職人に、パンを切れと言っても、動かなかった。」
http://museum.ipsj.or.jp/heritage/olympic.html
竹下 亨(IBMエンジニア)
東京オリンピック 1.0「TOKYOオリンピック物語」
「東京オリンピックでオンラインのコンピュータが
役に立つとわかり、以後、日本の企業は本気でオン
ライン化を進めたのです。」
http://museum.ipsj.or.jp/heritage/olympic.html
• 久しぶりに登場した坂の上の雲 • 課題先進国として何ができるのか • シビックテック／オープンデータの潮流との並走はほぼ初 • たいていの人にとって、一生に一度
→今できること、今しかできないことがきっとある。
東京オリンピック 1.0において、スポーツ以外でも、日本社会の価
値観や、実務面で多大な影響があった。
東京オリンピック 2.0
・東京一極集中と地方創生
・プロジェクトとしてのCode for Olympic
・Code for Rio de Janeiro?
東京オリンピック 2.0
インフォグラフィックスとは
人間の認知能力に合わせて抽象化して、 特徴を理解できるものにする
「なるほど！」と思って共感する
なるほど！
そのことによって…
なるほど！
• 行動が変わる • 記憶に残る • 人に話したくなる
共感を引き出すために
ビジュアルメタファーを用いる
事柄や関係性を アイコンなどを 使って図示
みるユーザー層を想定し、 その属性や視点を 考慮する
http://tg.tripadvisor.jp/coffee/ http://f-labo.tumblr.com/post/48175449166/iamas-f-labo
インフォメーション・グラフィックと データ・ビジュアライゼーション
http://elections.nytimes.com/2012/results/president
• 人が手作業かグラフィックアプリケーションで描いている。
• 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選ばれる。
• そのため、別のデータを使用して再作成するのが容易ではない。
• 表示についてのルールとその例外ルールについて、作者以外の外部から、すべてを推測することが難しい。
• 参照したデータとの関連性の証明が難しい。
• インタラクションがないものが多い。
インフォメーション・グラフィック
http://visualizing.jp/infograph_vs_dataviz/
データ・ビジュアライゼーション
• あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによって描画されること。
• その描画によってデータセットを眺めているだけではわからない傾向や特徴が明らかになっていること。
• アルゴリズムはコーディングによって定義され、チャートやグラフとして発達してきた表示形式を用い、形式知化／可視化されていること。
• ソート、フィルター、トグルなどのインタラクションが可能で、その場でその結果がすぐ得られること。
• 利用しているデータセットが可視化されていること。
http://visualizing.jp/infograph_vs_dataviz/
日本における
データビジュアライゼーション
の今日的な意味
データによる合意形成の手助け
データによる合意形成の手助け日本列島の地域構造・図集
データによる合意形成の手助け日本列島の地域構造・図集
• 1967年 日本地域開発センター刊
• シート126枚、白地図2枚が束ねて収容されている
• 30 x 31 x 7.5cm、英文併記
• 高度成長のピークにさしかかっているころ
• 未来学が盛ん
• 日本が世界のなかでどの位置にいるか知りたい、という要望
データによる合意形成の手助け日本列島の地域構造・図集
データによる合意形成の手助け日本列島の地域構造・図集
• 建築家 丹下健三と地理学者 木内信蔵による、日本列島の構造のリ
サーチ統計をダイアグラムにまとめたもの
• 多数の学者とグラフィックデザイナーを動員し制作に2年半かかっ
た
• この図集は、当時経済成長が進み、地域問題が浮上する中で議論
の土台を作るために、様々な角度から日本列島の「今」の情報を
視覚化することを狙って作られた。
全体と部分を同時に描くことの難しさ
データによる合意形成の手助け日本列島の地域構造・図集 作者が語る難しかったこと
「棒グラフ、円グラフなどグラフの概念で捉えられる手法は、現象を定量的に鋭く表現するためにはなくてはならないものである。しかし量的な
対比を明確に表示しようとすればするほど、複雑な構造をもった全体像の極小部分を切り取る形となり、全体像を見ようとすれば、継時的に多数
のグラフをつき合わせて、観察者の思考過程の中で論理的な関係を組み立てなくてはならない。その点で、なまの数表を読んでいく場合と同じよ
うな、利用の限界がある。」
性質の異なるものの相関を地図上で表すことの難しさ「 地図の概念でとらえられるものは、量を表現する点・線・面などの図形あるいは定性的な記号-アイソタイプを地形図の上にプロットして現象
の地域的分布を示すものである。地域間の対比はこれによって表現することは出来るが、性質の異なる諸指標間の相関関係を読み取ることは一般
に困難である。構造モデル をあらかじめ想定して量的表示のパターンを標準化し、図上での相関関係を強調しようとすれば、それは主観を含んだ
特定の論証に単に「さしえ（イラストレーション）」を付け加えるだけのことになる。」
データによる合意形成の手助け日本列島の地域構造・図集
• 様々な角度から日本列島の「今」の情報を視覚化し、議論の土台
を作ることが必要なのではないか。
Data Visualization
• 1960年 世界デザイン会議（基調講演「デザインの展望」ハーバート・バイヤー）
第一次オリンピック前後
• 1953年 ハーバート・バイヤー著作「世界地理地図」
• 1964年 第一次東京オリンピック
• 1967年 非広告系デザイナーによる「日本列島の地域構造・図集」
空からの俯瞰 vs 地面からの眺め
空からの俯瞰 vs 地面からの眺め杉浦康平 - 時間軸変形地図
視点のある場所によって、見える景色が動的に変化する
• 「私」のステータス（例：いる場所）によって全体像が動的に変化す
ること
• 「俯瞰／統治型の国土管理地図の形と、文化の振る舞いをうつしだす
地図の変化」主観的な地図
• データの多角的な見方を用意することで、視野が多角的になる。
Data Visualization
空からの俯瞰 vs 地面からの眺め杉浦康平 - 時間軸変形地図
事実と評価を峻別することが大事
「証拠から読み取ることのできるものを、原因行為と結果と因果関係などを明確に認定していく」
事実と評価を峻別することが大事椎名 つよしさん（弁護士／衆院議員）
https://www.facebook.com/tsuyoshi.shiina.yourparty/posts/341435192680860
事実に対して、その人の価値観で下す評価。価値観≒その人間の哲学
事実 評価
（科学／法律／経済学／倫理／宗教／他人からどう思われるかなど）
リベラル
アーツ
『事実と評価を分けることが当たり前の他の仕事（新聞記者や戦略コンサルなど）の方々の見ている「事実」
と弁護士の見ている「事実」ですら、どの程度評価を含んだ概念までを「事実」として提示するか、という意
味において大分異なるというカルチャーショックを受けたことがあり』人は主観から逃れられない。
「常に不断の多面的な考察を続けていく、ことによって自分なり
の事実認識と評価を確立するという以外に方法はない」
Data Visualization
事実と評価を峻別することが大事椎名 つよしさん（弁護士／衆院議員）
報道されている内容が本当なのか
どうかを自分で確かめたい
• 福島での線量計の話
• 公共事業とGDPと消費税
データの取られ方
• データの多角的な見方を用意することで、視野を多角的に
• 事実と評価を峻別し、事実を元にした合意形成のあり方
• データの眺め方をリテラシーとして身につける
まとめると…
ヴィジュアライズ＝ものの見方
ギリシャ…熊 日本…柄杓中国…雲の上に座っている王朝
北斗七星
最近の作品
value generayorhttp://visualizing.jp/files/random-viewer/
東急沿線 乗降者数と昼夜別人口http://structure-and-representation.com/works/tokyu-lod/
visual representation of
http://wvs.structure-and-representation.com/
World Values Survey
データ×グラフィック が彩る世界
医療ビッグデータ ×
治療の仕方
NHKスペシャル「医療ビッグデータ」2014年11月2日放送
NHKスペシャル「医療ビッグデータ」2014年11月2日放送
•患者の医療情報を、了解を得て毎日徹底的に記録
•ビッグデータの分析から分かった、患者が退院するまでの期間を決定づける最も大きな要因は、患者が「痛み」を訴える期間
NHKスペシャル「医療ビッグデータ」2014年11月2日放送
•患者が発作の際に使う「吸入器」にセンサーをつけてデータを収集
•臨床試験に参加した患者300人の発作パターンを詳しく解析したところ、それぞれの患者が発作を起こす「原因物質」が次々と判明
当事者を巻き込む ×
モニュメントの作られ方
（インクルーシブ）
http://localprojects.net/clients/page/2/?client=911-memorial
9/11 Memorial Names Arrangement Software
センサーデータ ×
コミュニケーション
ライフログ
データのありか
データはどこにある？
!• 総務省統計局のサイト（e-stat） • 各国のデータカタログサイト • 国際機関（国連、世銀）データサイト !!
• Wikipedia • SNS • 各種ウェブサイト !• 専門家に聞く • 書籍 • センサーデータ
統計情報 !!!!ウェブ
!• 専門機関に聞く • 書籍 !!• たいていはサービス主体たる企業
!!•記録に残らないだけで発生しては消えていく
ヒューリスティック !!!センサーデータ !!!街
e-Stat政府統計の総合窓口
http://www.e-stat.go.jp/SG1/estat/eStatTopPortal.do
data.go.jpデータカタログサイト
http://www.data.go.jp/
e-Gove-Gov | 白書、年次報告書等
http://www.e-gov.go.jp/link/white_papers.html
e-Gove-Gov | 統計調査結果
http://www.e-gov.go.jp/link/statistics.html
データの整形
扱い方のポイント
ExcelやPDFで公開されているファイルの作り方は、印刷やディスプレイ表示をした際に人が認識しやすい書式で作られている。 !一方データとして扱う場合には不要な書式、不要な情報が多く含まれている。これを取り除く必要がある。
行政の提供する統計データファイルはShift JISであることが多い。
1.文字コード
ExcelやAdobe Illustrator日本語版ではShift JISという文字コードを採用している。
Shift JISは日本語のみの文字コードで、現在はUTF-8という多様な言語体系を含んだ文字コードが標準的に使用されている。
扱い方のポイント
ウェブで使用するファイル、様々なアプリで使用するファイルはUTF-8へ変換する必要がある。
MultiTextConverter
1.文字コード扱い方のポイント
http://www.rk-k.com/software/mtc
nkfhttp://dev.classmethod.jp/tool/exchange-file-encode-by-nkf/
mihttp://www.mimikaki.net/
※Excelで作業する前提です。
2.不揃いな書式を揃える
実データの表記とExcelが適用する表記法を切り分ける。 →Excelが適用する表記法をリセットし、実データの表記のみが表示されるようにする。
扱い方のポイント
Mac: 「書式」→「セル」 Windows: リボンメニュー「ホーム」「表示形式」タブで標準（特定の形式を指定しない）を選ぶ。
例： 数値における3桁ごとのカンマ区切りを取り除く
例： 値が入る欄に単位も含まれている場合があるので取り除く
例： データとして使わない部分は取り除く
2.不揃いな書式を揃える扱い方のポイント
Excel1シートに含まれるデータ ≠ １グラフに必要なデータ
3.一シートに含まれる情報量扱い方のポイント
テキストエディタ → Excel という移動
4.アプリ間のデータ移動扱い方のポイント
CSV／TSVファイル「ファイルを開く」機能で開く
エディタからExcelへ コピー＆ペースト
1 2a
2b
csv, tsv…OK
csv…NG, tsv…OK
UTF-8…文字化けする
UTF-8…文字化けしない
Excel → テキストエディタ という移動
4.アプリ間のデータ移動扱い方のポイント
ExcelファイルCSV/TSVで保存したものを「ファイルを開く」機能で開く
Excelからエディタへ コピー＆ペースト
1 2a
2b
4.アプリ間のデータ移動扱い方のポイント
Excel ←→ テキストエディタ間のデータの移動は 「TSV形式（タブ区切り形式）をコピペする」のが最も楽！
ベストプラクティス
•コラムごとのデータ形式の変換
•データ形式が間違っているものを検出（数値のコラムに文字列がある、など）
•データの重複を探し出す
•表記揺れの解消
•エラー値の検出と処理
•空白の検出と処理 •使うアプリやプログラム言語に合わせた書式への変更
5.データのクレンジング扱い方のポイント
http://openrefine.org/
5.データのクレンジング扱い方のポイント
https://github.com/DataVisualizationJapan/OpenRefine/tree/localization-to-ja
日本語版を 配布しています
※Javaのインストールが必要です
データの組み合わせ方
何を表現したいかによって、使えるチャートは限られているので、適切に
選ぶことが肝心。
構成……パイチャート
関係性…散布図
分布……バブルチャート
比較……棒グラフ
変化……折れ線グラフ
グラフで何を表現するか？
変数の数
1つ
２つ
３～4つ
１つ
１つ
複数のデータセットを かけ合わせてみる
チャート
データセットA
データセットB
1つのデータセットを 複数の切り口でビジュアライズする
チャートB
チャートA
データセット
データ・ビジュアライゼーションの本、 年内出版予定（目標）
今日使うツール
作例
top related