名古屋工業大学の講義資料

名古屋工業大学
知能プログラム特論
人を動かすData Viz
Data Vizの文法、目的、道具
Founder & PJ Leader
五十嵐康伸、博士（理学）

質問
• Data Visualization
– 1 ヒートマップ
– 2 バブルチャート
– 3 レーダーチャート
– 4 ツリーマップ
– 5 サンキーダイアグラム
• JavaScript
• D3.js
• E2D3
って使ったことありますか？

質問
• シビックテック活動
って知ってますか？
• アイデアソン
• ハッカソン
って参加したことありますか？

講義内容
1. 自己紹介
2. Data Vizの最新事例
3. Data Vizとは何か
4. Data Vizの機能
5. Data Vizの世界と歴史
6. Data Vizが生まれ、共有される場：E2D3
7. Data Viz教育の実践
8. Data Vizのオープンイノベーション

データ活用のための
新技術を作り続ける研究者（博士、理学）
可
視
化
解
析
計
測
人
世
界

自らもデータを楽しむ！
総務大臣賞！

皆にもデータを
楽しんでもらう

皆にもデータを学んでもらう
京都大学
慶應義塾大学
でも講義
https://goo.gl/Je4Sa1

皆にもデータを使ってもらう
http://datajournalismjp.github.io/handbook/
データ・ジャーナリズムを
それ以外のジャーナリズムと違うものにして
いるのは何だろう？
おそらく、従来からの「ニュースをかぎつける
鼻」や人の心に訴える物語を語る力と現在利
用可能な壮大なスケール（と範囲）に及ぶデ
ジタル情報を組み合わせることで開ける
新たな可能性ではないだろうか。

話し手の目標
1. 見たことがない「Data Viz」の世界を見てもらう
2. 「Data Viz」って面白いって感じてもらう
3. 「Data Viz」を作りたい、って思ってもらう
作るためのツールは名称紹介まで

聞き手の目標
1. Data Vizが修論の研究テーマに成りうるのか？

今日は一人
1回質問することを
目指そう！
楽しくなる
聞き方のコツ

発表の目的
【授業の目的】
Linked Data／セマンティックWebやオープンデータに関する社会動向
や先端研究について調査し，最新研究及び技術の動向を把握習得
する.
【達成目標】
1. Linked Open Dataに関するコンテストへのアイデア応募およびデー
タ可視化に関する特別講義を通じ，社会的ニーズに即したアプリケ
ーションについて理解する．
2. 著名国際会議や著名論文誌の最新論文を精読し内容を理解する．

Data Vizはデータに基づいて
人・組織・社会を動かす方法（の一つ）
可
視
化
解
析
計
測
人
世
界
（自分自身も含む）
データ関連技術の出力先は？
計測 [機械＋人間] 解析 [機械＋人間] 可視化 [必ず人間]

新聞社はData Vizの最先端
日経ビジュアルデータ
https://vdata.nikkei.com/

新聞社はData Vizの最先端
NHK DATA NAVI
https://vdata.nikkei.com/

スポーツのData Vizを見てみよう
Grammer of Sports Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較

Usain Bolt and the Fastest Men in the
World Since 1896 – on the Same Track
The Newyork Times
https://goo.gl/mi9YjZ

Five Thirty Eight
https://goo.gl/L9gxV8

Grammar of Sport Data Viz
1. World Record / 時間比較
2. 道具の変化とWorld Record / 時間比較
3. 自分自身 / 時間比較・ばらつき
4. 因果・相関関係/ 時間比較・ばらつき
5. 比較できないものと比較

Dressed for a world record?
The Washington Post
https://goo.gl/l1cgg

Michael Phelps vs. Himself
The New York Times
https://goo.gl/MYbRJb

How Mariano Rivera Dominates Hitters
The New York Times
https://goo.gl/M7G4

年棒対パフォーマンス
Fathom Information Design
左：日付ことの成績、右：年俸合計
https://goo.gl/hqZdi5

Infographics for children: what they can
learn from data visualisations
https://goo.gl/tRhkFz

Data Vizの基本
＜Data Vizの基本は情報の比較＞
・自分、他人、対象物
多い、少ない、同じ
・現在の場所、他の場所
多い、少ない、同じ
・過去、現在、未来
増える、減る、同じ
＜Dynamic＞
・時間変化が観れる
＜Interactiveの設計＞
・時間を進める
・情報を並べる順番を変える

Data Viz作りの例
＜比較の例＞
最速の球技は何か？
野球：165 km/h、大谷翔平（日本）
169 km/h、アロルディス・チャップマン（キューバ）
ボウリング：55km/h
サッカー：132km/h
ゴルフ：328km/h
バドミントン：493km/h
＜誰も見たことがない新しいData Vizを簡単に作る秘訣＞
- 皆が認知しているボールの図をアイコンにする（コピーライトは気をつけて）
- 背景を舞台に変える

そもそも統計とは
• Statistics (n.) in German Statistik（1770）
• “science dealing with data about the condition
of a state or community”
https://goo.gl/fYxaHh

Data Vizの代替手段
伝え手受け手課題代替手段
メディア読者取材文章
国国民長期的視野法律・予算
国他国価値観の違い外交・戦争
自治体市民信頼・透明性教育・説明会
芸術家世間無関心映画、演劇、ダン
ス、音楽
部下上司懐疑表
革命家独裁者抑圧暴力・非暴力
課題解決、目的達成、目標到達の手段の一つ
その他の方法で課題が解決できるなら、無理にData Vizをする必要はない
Data Vizでないと課題解決できないと判断した時にData Vizを使えば良い

何のためのData Viz？
【読売新聞】
読売信条
• 真実を追求する公正な報道、
勇気と責任ある言論により、
読者の信頼にこたえる。
• Data Journalism、特にData Vizは
公正、勇気、責任、信頼の根拠になりうるか？
【日本経済新聞】
「中正公平、わが国民生活の基礎たる経済の平和的民主的発展を期す」との社是のもと、冷静で客観
的な報道姿勢を貫き、民主主義や市場の役割を重視してきました
• Data Vizを使うことで
中正公平性を上げられる、冷静で客観的になりうるか？

KPIを作るなら？
1. 世の中、日本がどれだけよくなったか？
2. 社是や信条の実現
3. メディアにおける日経新聞のポジショニング
4. これまでリーチしたかったけど、リーチできなかった読者層へのリーチ量
5. 既存読者のLTV（Life Time Value、顧客生涯価値）の向上
6. 議論を呼ぶ ≠ バズる
10. PV

Data Vizの機能
【百聞は一見にしかず、seeing is believing】
1. 情報→体験
2. 課題や状況の見える化
3. 情報過不足調整
4. 主体探索
5. 新規発見
6. 美

Data Vizの要素
データビジュアライゼーションのデザインパターン20

研究対象としてのData Viz
工学：便利な道具（[ヒト、モノ、カネ]、情報、自然を制御
する方法、理論）を作る
New Comp + New Dataによって
• 新しい「Data Vizの機能（表現）」を作れるように
• 過去の「Data Vizの機能（表現）」をより手軽に、より早
く誰でも使えるように（ライブラリー、プラットホーム）
→世界（広がり）と歴史（深さ）を”体系的”に感覚的に掴ん
でくれたら、Data Vizを研究する基盤となる

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

Treeの世界（広がり）
[Visual Complexity]

Treeの世界（広がり）
[The BOOK OF TREES]

Networkの世界（広がり）
[The BOOK OF TREES]

Tree・Networkの
世界（広がり）と歴史（深さ）
TED マニュエル・リマ :
人類の知識を表す視覚的表現の歴史
0 -> 2 : 50, 6 : 40 -> 8 : 20

Cytoscape
http://www.cytoscape.org/

Data Vizの
世界（広がり）と歴史（深さ）の体系
表現種類 Tree・
Network
チャート
Infograhics
Pictogram
PhotoViz
古代 1 4 7 10
中世 2 5 8 11
現代 3 6 9 12
Gephi
ArcGIS
QGIS
Carto
Tablueau
PowerBI
Plotly
Infogram
E2D3

TO図
8世紀、修道士リエバナのベアトゥス（スペイン）
経験的世界を表す地図
地中海。ナイル川、タナイス川（ロシア）
[https://goo.gl/8PHf63]

メルカトル図法
1569年地理学者ゲラルドゥス・メルカトル（現ベルギー）
経線は平行、緯線は経線に直交、海図・航路
[https://goo.gl/wBhbEa]

モルワイデ図法
1805年天文学者・数学者カール・モルワイデ（ドイツ）
地図上の任意の場所で実際の面積との比が等しい
[https://goo.gl/tAfyQN]

投影法 x 45
[https://goo.gl/gdNvhb]

コラム： 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

André-Michel Guerry (1802-1866, Fr)
フランスの弁護士とアマチュアの統計学者
André-Michel Guerryは、地図に何らかの変数に応
じて、地図の各々の地域を違う色で塗り分けるとい
うアイデアを最初に世に出した人物である。彼は
1829年に、犯罪レベルに応じてフランスの地図の
各地区を影付けをして、初めてのコロプレス (塗り
分け) 地図を作成した。
[The Data Journalism Handbook （DJH） ]

犯罪レベルを示すフランスの
コロプレス(塗り分け)地図

今日、これらの地図は、例えば選挙区ごとに誰が誰
に投票したかや、富の分布、その他の多くの地理的
な要因に結びつく変数を説明するときに使われてい
る。

John Snow (1813-1858, En)
イングランドの医師、疫学の創設者
1854年、 John Snowは今日では有名な「ロンドン
のコレラ地図」を、発症が報告された地域に小さな
黒い棒をつけて作成した。徐々に時間が経つに連
れ、明らかに発症密度が高い地域がわかるように
なり、問題の抑制措置が取ることができた。
[DJH]

John Snow (1813-1858, En)
ロンドンのコレラ地図

地図の歴史（深さ）
TED スティーブ・ジョンソン：感染地図
2 : 40 -> 8 : 40

杉浦康平、時間地図 (1932-, Jpn)
https://goo.gl/Aia2W4

Google Earth (2005-, US)
https://goo.gl/YeCJfg
世界中の衛星写真を、まるで地球儀を回しているかのように閲覧することができる。

William Playfair (1759-1823, Sco)
多言語に通じたスコットランド人技師
William Playfairは、今日でも同じように使われている図
やグラフのほとんど(Line, Bara, Pie)を、たった一人で
世界に送り出した人物である。 1786年の彼の本、
「Commercial and Political Atlas （商業と政治の地
図）」のなかで彼は、棒グラフという全く新しく、視覚
的な手法を用いて、スコットランドの輸出入量を明快に
示したのである。
[DJH]

• 12歳、父死去。兄科学者、数学者が家庭教師
• 14歳：粉挽機設計家に弟子入り：エンジニア
• バックル、馬鉄、スプーン：銀細工
• 雑記しの記事、新聞記者：ライター
• 銀行：投資家
• 投獄
• もう夢は諦めて本を書こう、線・棒・円グラフ：
• ルイ16世→蒸気機関の粉挽機設計許可→フランス革命

初期の頃の線グラフ、 Export and Import of Scotland

初期の頃の棒グラフ、 Export and Import of Scotland

現代の統計グラフ・チャートの機能
• 新しい方法で馴染みのものを見ること
• 時間と共に変化することを示す
• 値の比較
• 繋がりと流れを見せること
• 代替結果を想定する事
in Data Journalism Handbook book 、 slide

1. 新しい方法で馴染みのものを見ること
あなたのような人々のための失業率
(NYT) https://goo.gl/2tEwcT

1. 新しい方法で馴染みのものを見ること
米国の失業率が9%近くでさまよっていると、ユーザ
ーは様々な人口統計や学歴フィルターによって、
米国人口を選別することが出来た。結局のところ、
その内訳は学士号より上の学位を持つ中年女性か
ら高校を卒業していない若い黒人男性の全体の半
分近くで4%未満を占められていて、この格差は真
新しくなかった。それを見終わったあとでさえ、良
いDVは頭の中に入り、事実、傾向またプロセスの
持続的なメンタルモデルが残る。

2. 時間と共に変化することを示す
飛行経路の収束 (NYT) https://goo.gl/DzwM
deregulation:規制撤廃

2. 時間と共に変化することを示す
時系列の変化を示している他の興味深いグラフは、
業界再編の数十年の間についての米国の主要航
空会社の市場占有率を描画したものがある。
Carter政権が旅客飛行を規制緩和した後、 NYTが
描いたこのグラフのように、たくさんの国債融資が
小さな地方航空会社から全国航空会社を作成しま
した。ほとんど全てのカジュアルの読者が図の水
平線「X」軸を時間を表すと見るとするならば、時
には、全てのVizが時系列での変化を表すべきだと
考えることは容易である。

3. 値の比較
戦争の人的コストの計算 (BBC) https://goo.gl/3pIYfy （NG）
Fatality : 死亡者（数）

3. 値の比較
BBCが実施した犠牲者のデータベースとアニメ化さ
れたスライドショーのように、イランとアフガニスタン
の争い（2001-2009）と、ベトナムで殺された何千
人もの命や（1965-1973）、第二次世界大戦で無く
なった何百万もの命（1939-1946）と比較すること
によって、 DVは読者が二つやそれ以上の値の比
較のするのを助ける分野においても輝く。

4. 繋がりと流れを見せること
年棒対パフォーマンス (BenFry) https://goo.gl/hqZdi5
左：日付ことの成績、右：年俸合計

4. 繋がりと流れを見せること
二つに分けられた値を比較するために、メジャーリ
ーグベースボールチーム relative to their payrolls
のパフォーマンスが計算されているBen Fryの図を
見る。左側の列では、チームは日付ことの成績に
よってランク付けされていて、一方右側の列は年俸
の合計である。赤色（標準以下）もしくは青色（標
準以上）で描かれた線は二つの値つなぎ、駄目に
なった年俸の高い選手に後悔しているチームオー
ナの便利な感覚を提供している。

5. 代替結果を想定する事
現実に対する予算見通し (NYT) https://goo.gl/Atym
Surplus ：黒字、 deficit ：赤字

5. 代替結果を想定する事
NYTにおいて、何年にも渡る悲惨なほど楽観的な
米国の赤字予測のAmanda Coxの「ヤマアラシ図」
は起こらなかったことより、面白くないことが起きた
ことがどれほどあるか示している。戦争と減税の十
年の後に財政赤字が急増していることを示している
Coxの熱線は将来の期待が起きることがどれほど
非現実的かを示している。

Data Vizの
世界（広がり）と歴史（深さ）の体系
表現種類 Tree ・
Network
チャート
Infograhics
Pictogram
PhotoViz
古代 1 4 7 10
中世 2 5 8 11
現代 3 6 9 12
Gephi
ArcGIS
QGIS
Carto
Tablueau
PowerBI
Plotly
Infogram
E2D3

Data VizのR&Dとは？
工学：便利な道具（[ヒト、モノ、カネ]、情報、自然を制御
する方法、理論）を作る
New Comp + New Dataによって
• 新しい「Data Vizの機能（表現）」を作れるように
• 過去の「Data Vizの機能（表現）」をより手軽に、より早
く誰でも使えるように（ライブラリー、プラットホーム）

ターゲット
データサイエンティスト
アナリスト
営業、マーケ
非エンジニア
一般事務員
小、中、高生
データ好き
データに触れる
機会多い
データ嫌い、触れない
良い体験がない

よくある数値データ
わかりづらい見たくない

どうやったら、「データって面白い！」
という体験を作れるか？
データ
計測
データ
解析
データ
可視化

研究の目的
Webの技術（Javascript）を使って
• データをわかりやすくグラフ化
• グラフが動く、操作できる
• ユーザーがグラフを通じてデータから
色々発見ができる
• 「データって面白い！」と感じる体験

Data Vizによって
アナリスト
営業、マーケ
非エンジニア
一般事務員
小、中、高生
データって
面白い！

ユーザー数は・・・
Excel

×
Mashup！
E2D3 (Excel to D3.js)

ユーザー数10億人のExcelから
GUIのみで操作可能

Microsoft Office App Store から
誰でも無料に利用可能

現在グラフ数：93個
Twitter, FB share, Web 埋め込み可能
by 市民ハッカソン駆動開発

オープンソース
データビジュアライゼーション
プラットホーム
Win, Mac
npm
html, JS
コミュニティ
アプリ

開発ドキュメント in Github
https://github.com/e2d3/e2d3/wiki/Home_ja

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

E2D3ハッカソンの開催判断、結果として PBL
• 第1回目のハッカソンを除き、全てパートナー団体と一
緒に運営
• 課題を持っているパートナーと、その課題をデータ可
視化によって解決できるか話し合い、解決できる見込
みがあると双方が判断したときのみハッカソンを実施
• 多様な社会課題に対する新しいデータ可視化表現が
開発されることを目的に、できる限り多くのパートナー
団体とハッカソンを開催

て
題名
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

他のData Vizツールとの比較

本当に面白いグラフは、Controlできない
OSS+ハッカソンから産まれてくる
奇跡の瞬間がある！

目指している風景
多様性の海、人類の実験場
https://goo.gl/q75AiA

仕組みと反響
開発期間2014.4〜3年
全エンジニア 41
全メンバー 100人
アクティブメンバー 74人
DL総数：10万 !
月次DL数：5千

Office Store Top Page 2016. 7〜 11ヶ月

縦の役割分担
アナリスト
営業、マーケ
非エンジニア
一般事務員
小、中、高生
データって
面白い！

横の役割分担
in （教科横櫛の）教養

Data Vizがわかる
読者を育てる必要があるの？
アナリスト
営業、マーケ
非エンジニア
一般事務員
小、中、高生
データって
面白い！

第四次産業構造革命
誰もがデータを使って仕事をする時代に！
http://scf.jp/ja/essay/a005.php

ここでデータリテラリー（グラフィカシー）が
高い読者を育てないと、日本経済は復活しない

政府の最優先課題は三つある
トニーブレア
https://goo.gl/3sE2Db

教育と、教育と、教育だ！

Data Viz x オープンデータ x
グラフィカシー教育（社会課題を可視化するハッカソン）
マイクロソフト、NewsPicks (Uzabase)、LIG、Code for 横浜、名古屋、倉敷らと約20回開催

オープンソース
データビジュアライゼーション
プラットホームオープンデータ
x 教育
Mashup！

Yahoo!ニュース x E2D3
Yahoo! 社会課題アイデアソン
https://kumamotojishin.yahoo.co.jp/bousai/

Data Viz x オープンデータ x
グラフィカシー教育（社会課題を可視化するアイデアソン）
Yahoo! みんなの政治、8つの高校・大学、塾で開催、メディア掲載11回

E2D3 ボランティアメンバーの所属例
会社としての公式協力ではありません

朝日新聞 x E2D3
得票率１割台で政権取る可能性グラフで見る衆院選
https://goo.gl/2uZrqZ

E2D3 / Recommended / dot-bar-chart
http://a.e2d3.org/chart.html#dot-bar-chart!js!csv

goo スマホ部 x E2D3
ドコモ圧勝！iPhone 6s発売日に速度調査（大阪環状線）, 2015. 8. 8
https://itlife.oshiete.goo.ne.jp/article/511
独自調査

E2D3 / Recommended / multi-series-radar-chart
http://a.e2d3.org/chart.html#multi-series-radar-chart!js!csv

Yahoo!ニュース x E2D3
検索データから見る熊本地震, 2016. 9. 1（防災の日）
https://kumamotojishin.yahoo.co.jp/bousai/

NHK x E2D3
検索データから見る熊本地震, 2016. 9. 1（防災の日）
https://goo.gl/s9YW5o

Data Vizを通じて
「データって面白い！」と皆が体験（≠知識）
「グラフィカシー」を皆が持っている
「データの力」を皆が活用できる
日本経済がよくなる
私たち（E2D3）が描く未来

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

名古屋工業大学の講義資料

Recommended

Recommended

More Related Content

Similar to 名古屋工業大学の講義資料

Similar to 名古屋工業大学の講義資料 (15)

More from E2D3.org

More from E2D3.org (20)

名古屋工業大学の講義資料