Code for Japan 第10回 Brigadeワークショップ
•
8 gostaram•1,941 visualizações
Code for Japanでは、毎月一度BrigadeワークショップとしてBrigadeの方向けの勉強会を行っています。2015年3月に開催された「インフォグラフィックスをハンズオンで学ぶ！」の登壇資料です。
Recomendados
Recomendados
Mais conteúdo relacionado
Mais de Yuichi Yazaki
Mais de Yuichi Yazaki (14)
Code for Japan 第10回 Brigadeワークショップ
- 2. 13:00-13:10 会場挨拶など 13:10-14:00 講義 14:00-14:10 休憩 14:00-17:00 実習(infogr.am) 17:00-18:00 発表＆講評 今日の進行
- 3. ・自己紹介 ・Code for Japan/Tokyo ! ・インフォグラフィックスとは ・インフォグラフィックスvsデータビジュアライゼーション ・日本におけるデータビジュアライゼーション ! ・最近の作品 ・データ グラフィックが彩る世界 ! ・データのあり方 ・データの整形 ・データの組み合わせ方 ・自己紹介 ! ! ・インフォグラフィックス ! ! ! ・事例紹介 ! ! ・データ
- 9. イラスト：加藤オズワルド
- 13. 曄田依子 ポートフォリオ
- 15. （テレビ局ディレクター） タイトル：医療データ可視化の最前線 ! 小副川 健さん（富士通株式会社/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.
- 16. 鈴木 拓生さん（@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） タイトル：「数字を見せろ」から「コードを見せろ」へ
- 26. • 久しぶりに登場した坂の上の雲 • 課題先進国として何ができるのか • シビックテック／オープンデータの潮流との並走はほぼ初 • たいていの人にとって、一生に一度 →今できること、今しかできないことがきっとある。 東京オリンピック 1.0において、スポーツ以外でも、日本社会の価 値観や、実務面で多大な影響があった。 東京オリンピック 2.0
- 27. ・東京一極集中と地方創生 ・プロジェクトとしてのCode for Olympic ・Code for Rio de Janeiro? 東京オリンピック 2.0
- 28. インフォグラフィックスとは
- 31. そのことによって… なるほど！ • 行動が変わる • 記憶に残る • 人に話したくなる
- 36. • 人が手作業かグラフィックアプリケーションで描いている。 • 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選 ばれる。 • そのため、別のデータを使用して再作成するのが容易ではない。 • 表示についてのルールとその例外ルールについて、作者以外の外部から、すべて を推測することが難しい。 • 参照したデータとの関連性の証明が難しい。 • インタラクションがないものが多い。 インフォメーション・グラフィック http://visualizing.jp/infograph_vs_dataviz/
- 37. データ・ビジュアライゼーション • あるデータセットが、予め用意されたアルゴリズムを用いて、コンピュータによっ て描画されること。 • その描画によってデータセットを眺めているだけではわからない傾向や特徴が明ら かになっていること。 • アルゴリズムはコーディングによって定義され、チャートやグラフとして発達して きた表示形式を用い、形式知化／可視化されていること。 • ソート、フィルター、トグルなどのインタラクションが可能で、その場でその結果 がすぐ得られること。 • 利用しているデータセットが可視化されていること。 http://visualizing.jp/infograph_vs_dataviz/
- 39. データによる合意形成の手助け
- 41. データによる合意形成の手助け 日本列島の地域構造・図集 • 1967年 日本地域開発センター刊 • シート126枚、白地図2枚が束ねて収容されている • 30 x 31 x 7.5cm、英文併記 • 高度成長のピークにさしかかっているころ • 未来学が盛ん • 日本が世界のなかでどの位置にいるか知りたい、という要望
- 43. データによる合意形成の手助け 日本列島の地域構造・図集 • 建築家 丹下健三と地理学者 木内信蔵による、日本列島の構造のリ サーチ統計をダイアグラムにまとめたもの • 多数の学者とグラフィックデザイナーを動員し制作に2年半かかっ た • この図集は、当時経済成長が進み、地域問題が浮上する中で議論 の土台を作るために、様々な角度から日本列島の「今」の情報を 視覚化することを狙って作られた。
- 44. 全体と部分を同時に描くことの難しさ データによる合意形成の手助け 日本列島の地域構造・図集 作者が語る難しかったこと 「棒グラフ、円グラフなどグラフの概念で捉えられる手法は、現象を定量的に鋭く表現するためにはなくてはならないものである。しかし量的な 対比を明確に表示しようとすればするほど、複雑な構造をもった全体像の極小部分を切り取る形となり、全体像を見ようとすれば、継時的に多数 のグラフをつき合わせて、観察者の思考過程の中で論理的な関係を組み立てなくてはならない。その点で、なまの数表を読んでいく場合と同じよ うな、利用の限界がある。」 性質の異なるものの相関を地図上で表すことの難しさ 「 地図の概念でとらえられるものは、量を表現する点・線・面などの図形あるいは定性的な記号-アイソタイプを地形図の上にプロットして現象 の地域的分布を示すものである。地域間の対比はこれによって表現することは出来るが、性質の異なる諸指標間の相関関係を読み取ることは一般 に困難である。構造モデル をあらかじめ想定して量的表示のパターンを標準化し、図上での相関関係を強調しようとすれば、それは主観を含んだ 特定の論証に単に「さしえ（イラストレーション）」を付け加えるだけのことになる。」
- 46. • 1960年 世界デザイン会議（基調講演「デザインの展望」ハーバート・バイヤー） 第一次オリンピック前後 • 1953年 ハーバート・バイヤー著作「世界地理地図」 • 1964年 第一次東京オリンピック • 1967年 非広告系デザイナーによる「日本列島の地域構造・図集」
- 48. 空からの俯瞰 vs 地面からの眺め 杉浦康平 - 時間軸変形地図
- 50. • 「私」のステータス（例：いる場所）によって全体像が動的に変化す ること • 「俯瞰／統治型の国土管理地図の形と、文化の振る舞いをうつしだす 地図の変化」主観的な地図 • データの多角的な見方を用意することで、視野が多角的になる。 Data Visualization 空からの俯瞰 vs 地面からの眺め 杉浦康平 - 時間軸変形地図
- 51. 事実と評価を峻別することが大事
- 56. • データの多角的な見方を用意することで、 視野を多角的に • 事実と評価を峻別し、事実を元にした合 意形成のあり方 • データの眺め方をリテラシーとして身に つける まとめると…
- 57. ヴィジュアライズ＝ものの見方
- 59. 最近の作品
- 61. Open Data Day logo generator http://logo.odd.okfn.jp/
- 65. データ グラフィック が彩る世界
- 66. 医療ビッグデータ 治療の仕方
- 71. http://localprojects.net/clients/page/2/?client=911-memorial 9/11 Memorial Names Arrangement Software
- 74. ライフログ
- 77. データのありか
- 78. データはどこにある？ ! • 総務省統計局のサイト（e-stat） • 各国のデータカタログサイト • 国際機関（国連、世銀）データサイト ! ! • Wikipedia • SNS • 各種ウェブサイト ! • 専門家に聞く • 書籍 • センサーデータ 統計情報 ! ! ! ! ウェブ ! • 専門機関に聞く • 書籍 ! ! • たいていはサービス主体 たる企業 ! ! •記録に残らないだけで発 生しては消えていく ヒューリスティック ! ! ! センサーデータ ! ! ! 街
- 80. 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
- 82. データの整形
- 84. 行政の提供する統計データファイルはShift JISであることが多い。 1.文字コード ExcelやAdobe Illustrator日本語版ではShift JISという文字 コードを採用している。 Shift JISは日本語のみの文字コードで、現在はUTF-8という 多様な言語体系を含んだ文字コードが標準的に使用されている。 扱い方のポイント ウェブで使用するファイル、様々なアプリで使用するファイルは UTF-8へ変換する必要がある。
- 86. ※Excelで作業する前提です。 2.不 いな書式を える 実データの表記とExcelが適用する 表記法を切り分ける。 →Excelが適用する表記法をリセッ トし、実データの表記のみが表示さ れるようにする。 扱い方のポイント Mac: 「書式」→「セル」 Windows: リボンメニュー「ホーム」 「表示形式」タブで標準（特定の形 式を指定しない）を選ぶ。
- 87. 例： 数値における3桁ごとのカンマ区切り を取り除く 例： 値が入る欄に単位も含まれている場 合があるので取り除く 例： データとして使わない部分は取り除く 2.不 いな書式を える扱い方のポイント
- 89. テキストエディタ → Excel という移動 4.アプリ間のデータ移動扱い方のポイント CSV／TSVファイル 「ファイルを開く」 機能で開く エディタからExcelへ コピー＆ペースト 1 2a 2b csv, tsv…OK csv…NG, tsv…OK UTF-8…文字化けする UTF-8…文字化けしない
- 90. Excel → テキストエディタ という移動 4.アプリ間のデータ移動扱い方のポイント Excelファイル CSV/TSVで保存し たものを「ファイル を開く」機能で開く Excelからエディタへ コピー＆ペースト 1 2a 2b
- 94. データの組み合わせ方
- 100. 今日使うツール
- 102. 作例