More Related Content Similar to 名古屋工業大学の講義資料 (15) 名古屋工業大学の講義資料2. 質問
• Data Visualization
– 1 ヒートマップ
– 2 バブルチャート
– 3 レーダーチャート
– 4 ツリーマップ
– 5 サンキーダイアグラム
• JavaScript
• D3.js
• E2D3
って使ったことありますか?
4. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
13. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
18. スポーツのData Vizを見てみよう
Grammer of Sports Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較
19. Usain Bolt and the Fastest Men in the
World Since 1896 – on the Same Track
The Newyork Times
https://goo.gl/mi9YjZ
21. Grammar of Sport Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較
22. Dressed for a world record?
The Washington Post
https://goo.gl/l1cgg
23. Grammar of Sport Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較
26. Grammar of Sport Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較
28. Grammar of Sport Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較
31. Grammar of Sport Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較
34. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
36. そもそも統計とは
• Statistics (n.) in German Statistik(1770)
• “science dealing with data about the condition
of a state or community”
https://goo.gl/fYxaHh
37. Data Vizの代替手段
伝え手 受け手 課題 代替手段
メディア 読者 取材 文章
国 国民 長期的視野 法律・予算
国 他国 価値観の違い 外交・戦争
自治体 市民 信頼・透明性 教育・説明会
芸術家 世間 無関心 映画、演劇、ダン
ス、音楽
部下 上司 懐疑 表
革命家 独裁者 抑圧 暴力・非暴力
課題解決、目的達成、目標到達の手段の一つ
その他の方法で課題が解決できるなら、無理にData Vizをする必要はない
Data Vizでないと課題解決できないと判断した時にData Vizを使えば良い
40. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
43. 研究対象としてのData Viz
工学 : 便利な道具 ([ヒト、モノ、カネ]、情報、自然を制御
する方法、 理論) を作る
New Comp + New Dataによって
• 新しい「Data Vizの機能(表現)」を作れるように
• 過去の「Data Vizの機能(表現) 」をより手軽に、より早
く誰でも使えるように(ライブラリー、プラットホーム)
→世界(広がり)と歴史(深さ)を”体系的”に感覚的に掴ん
でくれたら、Data Vizを研究する基盤となる
44. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
45. Data Vizの世界 (広がり) と
歴史 (深さ) の体系
表現種類 Tree・
Network
地図 統計グラフ・
チャート
Infograhics
Pictogram
PhotoViz
古代 1 4 7 10
中世 2 5 8 11
現代 3 6 9 12
作成ツール Cytoscape
Gephi
ArcGIS
QGIS
Carto
Tablueau
PowerBI
Plotly
Infogram
E2D3
52. Data Vizの
世界 (広がり) と歴史 (深さ) の体系
表現種類 Tree・
Network
地図 統計グラフ・
チャート
Infograhics
Pictogram
PhotoViz
古代 1 4 7 10
中世 2 5 8 11
現代 3 6 9 12
作成ツール Cytoscape
Gephi
ArcGIS
QGIS
Carto
Tablueau
PowerBI
Plotly
Infogram
E2D3
57. コラム: 18世紀、19世紀の英国
• André-Michel Guerry (1802-1866, Fr)
• John Snow (1813-1858, En)
• William Playfair (1759-1823, Sco)
• Florence Nightingale(1820-1910, En)
• 18世紀には、農業生産の飛躍的向上により人口の増加をもたらした農業革命(輪作と囲
い込み)に続き、世界初の工業化である産業革命(綿織物・製鉄業の技術革新、蒸気機
関→蒸気船や鉄道 )が起こったことにより、イギリスの生産力が飛躍的に向上した。
• 産業革命の原動力のひとつに大西洋の三角貿易(奴隷貿易)に支えられた砂糖や綿花
のプランテーション、そしてそこでの労働力となった黒人奴隷の存在がある。重商主義に
よりヨーロッパ各国で激しい貿易競争がおこなわれた。オランダの自由貿易は衰え、イギ
リスとフランスが台頭し両国は、激しい植民地戦争を繰り広げた。
• 1854年 ロンドン 250万人、世界最大、史上最大の都市
https://goo.gl/YNop9R
58. André-Michel Guerry (1802-1866, Fr)
フランスの弁護士とアマチュアの統計学者
André-Michel Guerryは、 地図に何らかの変数に応
じて、地図の各々の地域を違う色で塗り分けるとい
うアイデアを最初に世に出した人物である。 彼は
1829年に、 犯罪レベルに応じてフランスの地図の
各地区を影付けをして、初めてのコロプレス (塗り
分け) 地図を作成した。
[The Data Journalism Handbook (DJH) ]
61. John Snow (1813-1858, En)
イングランドの医師、 疫学の創設者
1854年、 John Snowは今日では有名な 「ロンドン
のコレラ地図」 を、発症が報告された地域に小さな
黒い棒をつけて作成した。 徐々に時間が経つに連
れ、 明らかに発症密度が高い地域がわかるように
なり、 問題の抑制措置が取ることができた。
[DJH]
67. Data Vizの
世界 (広がり) と歴史 (深さ) の体系
表現種類 Tree・
Network
地図 統計グラフ・
チャート
Infograhics
Pictogram
PhotoViz
古代 1 4 7 10
中世 2 5 8 11
現代 3 6 9 12
作成ツール Cytoscape
Gephi
ArcGIS
QGIS
Carto
Tablueau
PowerBI
Plotly
Infogram
E2D3
68. William Playfair (1759-1823, Sco)
多言語に通じたスコットランド人技師
William Playfairは、 今日でも同じように使われている図
やグラフのほとんど(Line, Bara, Pie)を、 たった一人で
世界に送り出した人物である。 1786年の彼の本、
「Commercial and Political Atlas (商業と政治の地
図) 」 のなかで彼は、 棒グラフという全く新しく、 視覚
的な手法を用いて、 スコットランドの輸出入量を明快に
示したのである。
[DJH]
69. William Playfair (1759-1823, Sco)
• 12歳、父死去。兄 科学者、数学者が家庭教師
• 14歳:粉挽機設計家に弟子入り:エンジニア
• バックル、馬鉄、スプーン:銀細工
• 雑記しの記事、新聞記者:ライター
• 銀行:投資家
• 投獄
• もう夢は諦めて本を書こう、線・棒・円グラフ:
• ルイ16世→蒸気機関の粉挽機設計許可→フランス革命
82. 5. 代替結果を想定する事
NYTにおいて、 何年にも渡る 悲惨なほど楽観的な
米国の赤字予測のAmanda Coxの 「ヤマアラシ図」
は起こらなかったことより、 面白くないことが起きた
ことがどれほどあるか示している。 戦争と減税の十
年の後に財政赤字が急増していることを示している
Coxの熱線は将来の期待が起きることがどれほど
非現実的かを示している。
83. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
84. Data Vizの
世界 (広がり) と歴史 (深さ) の体系
表現種類 Tree ・
Network
地図 統計グラフ・
チャート
Infograhics
Pictogram
PhotoViz
古代 1 4 7 10
中世 2 5 8 11
現代 3 6 9 12
作成ツール Cytoscape
Gephi
ArcGIS
QGIS
Carto
Tablueau
PowerBI
Plotly
Infogram
E2D3
85. Data VizのR&Dとは?
工学 : 便利な道具 ([ヒト、モノ、カネ]、情報、自然を制御
する方法、 理論) を作る
New Comp + New Dataによって
• 新しい「Data Vizの機能(表現)」を作れるように
• 過去の「Data Vizの機能(表現) 」をより手軽に、より早
く誰でも使えるように(ライブラリー、プラットホーム)
102. E2D3ハッカソン
No ハッカソンの名称 課題パートナー 課題の種類 開催日
1 E2D3 ハッカソン 2015. 2. 8
2 Political Data Visualization Hackathon Vol. 1 ~
E2D3とマニフェストスイッチで新しい政治の見せ方
を考えよう!
早稲田大学マニフ
ェスト研究所 選挙・政治 2015. 4. 11
3 小学生が楽しいと思うグラフを作るぞハッカソン
organized by GreenHack & E2D3
株式会社
GreenHack 教育 2015. 5. 10
4 NewsPicks & SPEEDA スマートデータエクスペリエ
ンスハッカソン powered by E2D3
株式会社ユーザ
ベース 経営・経済 2015. 6. 14
5
オープンデータでみる埼玉県知事選ハッカソン!
早稲田大学マニフ
ェスト研究所 選挙・政治 2015. 8. 2
6 LIGブログの勝手に1日編集長ハッカソン 株式会社LIG メディア 2015. 9.12
7 【裏鎌倉×野良IT】感性ビジュアライズの世界 NORA IT 自然・アウトドア 2015. 11. 7
8 名古屋から「世の中」ビジュアライジング・ハンズオ
ン – 第一夜 Code for Nagoya 地方創生 2015. 11. 14
9
Code for Kurashiki E2D3勉強会
Code for
Kurashiki 地方創生 2016. 1. 16
10 参院選データジャーナリズムハッカソン−立候補者
の違いを可視化しよう!
早稲田大学マニフ
ェスト研究所 選挙、政治 2016. 7. 2
104. て
題名
Data Viz
背景
アイコ
ン
Sample Data = 現実 or 仮想
表頭
表側 動く
Interactive & Dynamics
マウス操作有り、無しの画面遷
移
UI、UX、Touch、Action
1 いつ(When) 授業、部活
2 どこで(Where) 体育館、グラウンド
3 だれが(Who) 小学生高学年-高校生
4 なにを(What) 何と何を
5 なぜ(Why) 比較して何が知りたい?
6 どのように(How) データ測定方法
Data Vizの使用状況
By 手書き、PPT、
Sketch
114. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
124. Data Viz x オープンデータ x
グラフィカシー教育 (社会課題を可視化するハッカソン)
マイクロソフト、NewsPicks (Uzabase)、LIG、Code for 横浜、名古屋、倉敷らと約20回開催
127. Data Viz x オープンデータ x
グラフィカシー教育 (社会課題を可視化するアイデアソン)
Yahoo! みんなの政治、8つの高校・大学、塾で開催、メディア掲載11回
128. 講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場:E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション
132. goo スマホ部 x E2D3
ドコモ圧勝!iPhone 6s発売日に速度調査(大阪環状線), 2015. 8. 8
https://itlife.oshiete.goo.ne.jp/article/511
独自調査
133. E2D3 / Recommended / multi-series-radar-chart
http://a.e2d3.org/chart.html#multi-series-radar-chart!js!csv
137. Enjoy Data Viz !
Data Viz で困ったこと、 分からないことがあれば、
いつでも質問ください!
Founder & PJ Leader 五十嵐康伸
FB : yasunobu.igarashi、 Twitter : B_T_Budo
HP http://e2d3.org/ja/
FB https://www.facebook.com/e2d3project/
Twitter https://twitter.com/e2d3org
Connpass http://e2d3.connpass.com/
Github https://github.com/e2d3/e2d3-contrib