Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Code for Japan 第10回 Brigadeワークショップ

1.334 visualizaciones

Publicado el

Code for Japanでは、毎月一度BrigadeワークショップとしてBrigadeの方向けの勉強会を行っています。2015年3月に開催された「インフォグラフィックスをハンズオンで学ぶ!」の登壇資料です。

  • Sé el primero en comentar

Code for Japan 第10回 Brigadeワークショップ

  1. 1. インフォグラフィックスをハンズオンで学ぶ! 第10回Brigadeワークショップ 矢崎 裕一
  2. 2. 13:00-13:10 会場挨拶など 13:10-14:00 講義 14:00-14:10 休憩 14:00-17:00 実習(infogr.am) 17:00-18:00 発表&講評 今日の進行
  3. 3. ・自己紹介 ・Code for Japan/Tokyo ! ・インフォグラフィックスとは ・インフォグラフィックスvsデータビジュアライゼーション ・日本におけるデータビジュアライゼーション ! ・最近の作品 ・データ グラフィックが彩る世界 ! ・データのあり方 ・データの整形 ・データの組み合わせ方 ・自己紹介 ! ! ・インフォグラフィックス ! ! ! ・事例紹介 ! ! ・データ
  4. 4. http://www.cerevo.com/ja/
  5. 5. シャボン玉生成器 Processingで形を生成
  6. 6. Race for Resilience http://raceforresilience.org/ イラスト:加藤オズワルド
  7. 7. イラスト:加藤オズワルド
  8. 8. ISAC Tokyo (NASAハッカソン) http://tokyo.spaceappschallenge.org/
  9. 9. 曄田依子 ポートフォリオ
  10. 10. DataVisualizationJapan(Facebookグループ) https://www.facebook.com/groups/datavizjapan/
  11. 11. (テレビ局ディレクター) タイトル:医療データ可視化の最前線 ! 小副川 健さん(富士通株式会社/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.
  12. 12. 鈴木 拓生さん(@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) タイトル:「数字を見せろ」から「コードを見せろ」へ
  13. 13. 医療ビッグデータ勉強会 https://www.facebook.com/groups/338084979676310/ image by Kenichiro Ono
  14. 14. http://open-design-lab.org/ Open Design Lab.
  15. 15. http://code4japan.org/
  16. 16. http://visualizing.jp/code-for-japan-logo/ 「この試みは、この母国である日本を一 旦相対化し、当たり前のことだと思って いる思い込みを一旦留保して疑いそもそ も論に立ち返り、コードで生成されるア プリやサービスを通じて見えてくるもの を元に、もう一度自分たちや国のあり方 を捉え直す行為ではないか」 Code for Japanのロゴについて
  17. 17. http://codefor.tokyo/
  18. 18. 東京オリンピック 1.0 「TOKYOオリンピック物語」 ノンフィクション作家の野地秩嘉氏が15年もの取材を重 ねて執筆した、東京オリンピック1.0の裏方実務家たちの 活躍を描いた一冊。あまり知られていなかった日本の意 地を賭けた職人たちの戦いと、彼らが巻き起こしたイノ ベーションがありありと記録されている。
  19. 19. 亀倉雄策 東京オリンピック 1.0 「TOKYOオリンピック物語」 「日本人は時間を守るとか団体行動に向いていると いうのは嘘だ。どちらも東京オリンピック以降に確 立したものだ。みんな、そのことを忘れている。」
  20. 20. 村上信夫(帝国レストラン料理長) 東京オリンピック 1.0 「TOKYOオリンピック物語」 「今ではどこのホテルでも料理人は分担して仕事をします。当たり前だと思ってやります。だが、当時 は全員が力を合わせるなんてことはなかった。料理人は1年違えば位が違うし、仕事もまったく違う。 熟練の職人に、パンを切れと言っても、動かなかった。」 http://museum.ipsj.or.jp/heritage/olympic.html
  21. 21. 竹下 亨(IBMエンジニア) 東京オリンピック 1.0 「TOKYOオリンピック物語」 「東京オリンピックでオンラインのコンピュータが 役に立つとわかり、以後、日本の企業は本気でオン ライン化を進めたのです。」 http://museum.ipsj.or.jp/heritage/olympic.html
  22. 22. • 久しぶりに登場した坂の上の雲 • 課題先進国として何ができるのか • シビックテック/オープンデータの潮流との並走はほぼ初 • たいていの人にとって、一生に一度 →今できること、今しかできないことがきっとある。 東京オリンピック 1.0において、スポーツ以外でも、日本社会の価 値観や、実務面で多大な影響があった。 東京オリンピック 2.0
  23. 23. ・東京一極集中と地方創生 ・プロジェクトとしてのCode for Olympic ・Code for Rio de Janeiro? 東京オリンピック 2.0
  24. 24. インフォグラフィックスとは
  25. 25. 人間の認知能力に合わせて抽象化して、 特徴を理解できるものにする
  26. 26. 「なるほど!」と思って共感する なるほど!
  27. 27. そのことによって… なるほど! • 行動が変わる • 記憶に残る • 人に話したくなる
  28. 28. 共感を引き出すために ビジュアルメタファー を用いる 事柄や関係性を アイコンなどを 使って図示 みるユーザー層を想定し、 その属性や視点を 考慮する http://tg.tripadvisor.jp/coffee/ http://f-labo.tumblr.com/post/48175449166/ iamas-f-labo
  29. 29. インフォメーション・グラフィックと データ・ビジュアライゼーション
  30. 30. http://elections.nytimes.com/2012/results/president
  31. 31. • 人が手作業かグラフィックアプリケーションで描いている。 • 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選 ばれる。 • そのため、別のデータを使用して再作成するのが容易ではない。 • 表示についてのルールとその例外ルールについて、作者以外の外部から、すべて を推測することが難しい。 • 参照したデータとの関連性の証明が難しい。 • インタラクションがないものが多い。 インフォメーション・グラフィック http://visualizing.jp/infograph_vs_dataviz/
  32. 32. データ・ビジュアライゼーション • あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによっ て描画されること。 • その描画によってデータセットを眺めているだけではわからない傾向や特徴が明ら かになっていること。 • アルゴリズムはコーディングによって定義され、チャートやグラフとして発達して きた表示形式を用い、形式知化/可視化されていること。 • ソート、フィルター、トグルなどのインタラクションが可能で、その場でその結果 がすぐ得られること。 • 利用しているデータセットが可視化されていること。 http://visualizing.jp/infograph_vs_dataviz/
  33. 33. 日本における データビジュアライゼーション の今日的な意味
  34. 34. データによる合意形成の手助け
  35. 35. データによる合意形成の手助け 日本列島の地域構造・図集
  36. 36. データによる合意形成の手助け 日本列島の地域構造・図集 • 1967年 日本地域開発センター刊 • シート126枚、白地図2枚が束ねて収容されている • 30 x 31 x 7.5cm、英文併記 • 高度成長のピークにさしかかっているころ • 未来学が盛ん • 日本が世界のなかでどの位置にいるか知りたい、という要望
  37. 37. データによる合意形成の手助け 日本列島の地域構造・図集
  38. 38. データによる合意形成の手助け 日本列島の地域構造・図集 • 建築家 丹下健三と地理学者 木内信蔵による、日本列島の構造のリ サーチ統計をダイアグラムにまとめたもの • 多数の学者とグラフィックデザイナーを動員し制作に2年半かかっ た • この図集は、当時経済成長が進み、地域問題が浮上する中で議論 の土台を作るために、様々な角度から日本列島の「今」の情報を 視覚化することを狙って作られた。
  39. 39. 全体と部分を同時に描くことの難しさ データによる合意形成の手助け 日本列島の地域構造・図集 作者が語る難しかったこと 「棒グラフ、円グラフなどグラフの概念で捉えられる手法は、現象を定量的に鋭く表現するためにはなくてはならないものである。しかし量的な 対比を明確に表示しようとすればするほど、複雑な構造をもった全体像の極小部分を切り取る形となり、全体像を見ようとすれば、継時的に多数 のグラフをつき合わせて、観察者の思考過程の中で論理的な関係を組み立てなくてはならない。その点で、なまの数表を読んでいく場合と同じよ うな、利用の限界がある。」 性質の異なるものの相関を地図上で表すことの難しさ 「 地図の概念でとらえられるものは、量を表現する点・線・面などの図形あるいは定性的な記号-アイソタイプを地形図の上にプロットして現象 の地域的分布を示すものである。地域間の対比はこれによって表現することは出来るが、性質の異なる諸指標間の相関関係を読み取ることは一般 に困難である。構造モデル をあらかじめ想定して量的表示のパターンを標準化し、図上での相関関係を強調しようとすれば、それは主観を含んだ 特定の論証に単に「さしえ(イラストレーション)」を付け加えるだけのことになる。」
  40. 40. データによる合意形成の手助け 日本列島の地域構造・図集 • 様々な角度から日本列島の「今」の情報を視覚化し、議論の土台 を作ることが必要なのではないか。 Data Visualization
  41. 41. • 1960年 世界デザイン会議(基調講演「デザインの展望」ハーバート・バイヤー) 第一次オリンピック前後 • 1953年 ハーバート・バイヤー著作「世界地理地図」 • 1964年 第一次東京オリンピック • 1967年 非広告系デザイナーによる「日本列島の地域構造・図集」
  42. 42. 空からの俯瞰 vs 地面からの眺め
  43. 43. 空からの俯瞰 vs 地面からの眺め 杉浦康平 - 時間軸変形地図
  44. 44. 視点のある場所によって、見える景色が動的に変化する
  45. 45. • 「私」のステータス(例:いる場所)によって全体像が動的に変化す ること • 「俯瞰/統治型の国土管理地図の形と、文化の振る舞いをうつしだす 地図の変化」主観的な地図 • データの多角的な見方を用意することで、視野が多角的になる。 Data Visualization 空からの俯瞰 vs 地面からの眺め 杉浦康平 - 時間軸変形地図
  46. 46. 事実と評価を峻別することが大事
  47. 47. 「証拠から読み取ることので きるものを、原因行為と結果 と因果関係などを明確に認定 していく」 事実と評価を峻別することが大事 椎名 つよしさん(弁護士/衆院議員) https://www.facebook.com/tsuyoshi.shiina.yourparty/posts/341435192680860 事実に対して、その人の価 値観で下す評価。価値観≒ その人間の哲学 事実 評価 (科学/法律/経済学/倫 理/宗教/他人からどう思 われるかなど) リベラル アーツ 『事実と評価を分けることが当たり前の他の仕事(新聞記者や戦略コンサルなど)の方々の見ている「事実」 と弁護士の見ている「事実」ですら、どの程度評価を含んだ概念までを「事実」として提示するか、という意 味において大分異なるというカルチャーショックを受けたことがあり』人は主観から逃れられない。
  48. 48. 「常に不断の多面的な考察を続けていく、ことによって自分なり の事実認識と評価を確立するという以外に方法はない」 Data Visualization 事実と評価を峻別することが大事 椎名 つよしさん(弁護士/衆院議員)
  49. 49. 報道されている内容が本当なのか どうかを自分で確かめたい
  50. 50. • 福島での線量計の話 • 公共事業とGDPと消費税 データの取られ方
  51. 51. • データの多角的な見方を用意することで、 視野を多角的に • 事実と評価を峻別し、事実を元にした合 意形成のあり方 • データの眺め方をリテラシーとして身に つける まとめると…
  52. 52. ヴィジュアライズ=ものの見方
  53. 53. ギリシャ…熊 日本…柄杓中国…雲の上に 座っている王朝 北斗七星
  54. 54. 最近の作品
  55. 55. さわってわかる家計と物価 http://www3.nhk.or.jp/news/wakaru_kakei/
  56. 56. Open Data Day logo generator http://logo.odd.okfn.jp/
  57. 57. value generayor http://visualizing.jp/files/random-viewer/
  58. 58. 東急沿線 乗降者数と昼夜別人口 http://structure-and-representation.com/works/tokyu-lod/
  59. 59. visual representation of http://wvs.structure-and-representation.com/ World Values Survey
  60. 60. データ グラフィック が彩る世界
  61. 61. 医療ビッグデータ 治療の仕方
  62. 62. NHKスペシャル「医療ビッグデータ」 2014年11月2日放送
  63. 63. NHKスペシャル「医療ビッグデータ」 2014年11月2日放送 •患者の医療情報を、了解を得て毎日徹底的に記録 •ビッグデータの分析から分かった、患者が退院す るまでの期間を決定づける最も大きな要因は、患 者が「痛み」を訴える期間
  64. 64. NHKスペシャル「医療ビッグデータ」 2014年11月2日放送 •患者が発作の際に使う「吸入器」にセンサーをつけてデー タを収集 •臨床試験に参加した患者300人の発作パターンを詳しく 解析したところ、それぞれの患者が発作を起こす「原因 物質」が次々と判明
  65. 65. 当事者を巻き込む モニュメントの作られ方 (インクルーシブ)
  66. 66. http://localprojects.net/clients/page/2/?client=911-memorial 9/11 Memorial Names Arrangement Software
  67. 67. センサーデータ コミュニケーション
  68. 68. http://lauren-mccarthy.com/usplus/ us+
  69. 69. ライフログ
  70. 70. Nicholas Felton http://feltron.com/
  71. 71. データのありか
  72. 72. データはどこにある? ! • 総務省統計局のサイト(e-stat) • 各国のデータカタログサイト • 国際機関(国連、世銀)データサイト ! ! • Wikipedia • SNS • 各種ウェブサイト ! • 専門家に聞く • 書籍 • センサーデータ 統計情報 ! ! ! ! ウェブ ! • 専門機関に聞く • 書籍 ! ! • たいていはサービス主体 たる企業 ! ! •記録に残らないだけで発 生しては消えていく ヒューリスティック ! ! ! センサーデータ ! ! ! 街
  73. 73. e-Stat 政府統計の総合窓口 http://www.e-stat.go.jp/SG1/estat/ eStatTopPortal.do data.go.jp データカタログサイト http://www.data.go.jp/
  74. 74. e-Gov e-Gov ¦ 白書、年次報告書等 http://www.e-gov.go.jp/link/ white_papers.html e-Gov e-Gov ¦ 統計調査結果 http://www.e-gov.go.jp/link/ statistics.html
  75. 75. Open Data Universe http://codefor.tokyo/odd/
  76. 76. データの整形
  77. 77. 扱い方のポイント ExcelやPDFで公開されているファ イルの作り方は、印刷やディスプレ イ表示をした際に人が認識しやすい 書式で作られている。 ! 一方データとして扱う場合には不要 な書式、不要な情報が多く含まれて いる。これを取り除く必要がある。
  78. 78. 行政の提供する統計データファイルはShift JISであることが多い。 1.文字コード ExcelやAdobe Illustrator日本語版ではShift JISという文字 コードを採用している。 Shift JISは日本語のみの文字コードで、現在はUTF-8という 多様な言語体系を含んだ文字コードが標準的に使用されている。 扱い方のポイント ウェブで使用するファイル、様々なアプリで使用するファイルは UTF-8へ変換する必要がある。
  79. 79. MultiTextConverter 1.文字コード扱い方のポイント http://www.rk-k.com/software/mtc nkf http://dev.classmethod.jp/tool/ exchange-file-encode-by-nkf/ mi http://www.mimikaki.net/
  80. 80. ※Excelで作業する前提です。 2.不 いな書式を える 実データの表記とExcelが適用する 表記法を切り分ける。 →Excelが適用する表記法をリセッ トし、実データの表記のみが表示さ れるようにする。 扱い方のポイント Mac: 「書式」→「セル」 Windows: リボンメニュー「ホーム」 「表示形式」タブで標準(特定の形 式を指定しない)を選ぶ。
  81. 81. 例: 数値における3桁ごとのカンマ区切り を取り除く 例: 値が入る欄に単位も含まれている場 合があるので取り除く 例: データとして使わない部分は取り除く 2.不 いな書式を える扱い方のポイント
  82. 82. Excel1シートに含まれるデータ 1グラフに必要なデータ 3.一シートに含まれる情報量扱い方のポイント
  83. 83. テキストエディタ → Excel という移動 4.アプリ間のデータ移動扱い方のポイント CSV/TSVファイル 「ファイルを開く」 機能で開く エディタからExcelへ コピー&ペースト 1 2a 2b csv, tsv…OK csv…NG, tsv…OK UTF-8…文字化けする UTF-8…文字化けしない
  84. 84. Excel → テキストエディタ という移動 4.アプリ間のデータ移動扱い方のポイント Excelファイル CSV/TSVで保存し たものを「ファイル を開く」機能で開く Excelからエディタへ コピー&ペースト 1 2a 2b
  85. 85. 4.アプリ間のデータ移動扱い方のポイント Excel ←→ テキストエディタ間のデータの移動は 「TSV形式(タブ区切り形式)をコピペする」のが最も楽! ベストプラクティス
  86. 86. •コラムごとのデータ形式の変換 •データ形式が間違っているものを検出(数値のコラムに 文字列がある、など) •データの重複を探し出す •表記揺れの解消 •エラー値の検出と処理 •空白の検出と処理 •使うアプリやプログラム言語に合わせた書式への変更 5.データのクレンジング扱い方のポイント
  87. 87. http://openrefine.org/ 5.データのクレンジング扱い方のポイント https://github.com/ DataVisualizationJapan/ OpenRefine/tree/ localization-to-ja 日本語版を 配布しています ※Javaのインストール が必要です
  88. 88. データの組み合わせ方
  89. 89. 何を表現したいかによって、使える チャートは限られているので、適切に 選ぶことが肝心。
  90. 90. 構成……パイチャート 関係性…散布図 分布……バブルチャート 比較……棒グラフ 変化……折れ線グラフ グラフで何を表現するか? 変数の数 1つ 2つ 3∼4つ 1つ 1つ
  91. 91. 複数のデータセットを かけ合わせてみる チャート データセットA データセットB
  92. 92. 1つのデータセットを 複数の切り口でビジュアライズする チャートB チャートA データセット
  93. 93. データ・ビジュアライゼーションの本、 年内出版予定(目標)
  94. 94. 今日使うツール
  95. 95. https://infogr.am/ infogr.am
  96. 96. 作例
  97. 97. https://infogr.am/-7753805559472248 東京おどりまつり!
  98. 98. https://infogr.am/-2855742861663442 東京都内の公園の整備状況と使い勝手の評価ガイド
  99. 99. https://infogr.am/-3937940432224422
  100. 100. https://infogr.am/-3546338912565261
  101. 101. https://infogr.am/-7034421486314386 チーム電力

×