1. 統計データを楽しむ
「新しいアクティブ・ラーニング教材」の提案
データビジュアライゼーション アプリ
E2D3の活用方法
Founder & PJ Leader 五十嵐康伸
2017. 3. 25 第6回科学技術教育フォーラム

2. 統計データを楽しむ
「新しいアクティブ・ラーニング教材」の提案
データビジュアライゼーション アプリ
E2D3の活用方法
Founder & PJ Leader 五十嵐康伸
2017. 3. 25 第6回科学技術教育フォーラム
を一緒に開発しませんか？
という提案

3. 「データって面白い！」
と感じている市民が
やっているシビックテック
「データって面白い！」
と感じる体験（≠知識）を増やすPJ
行政がやるべきだが、できていない
課題を市民がテクノロジーで解決

4. 自己紹介：データ大好き 博士
データ
計測
データ
解析
データ
可視化

5. よくある数値データ

6. よくある数字のデータ
わかりづらい 見たくない

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

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

9. データビジュアライゼーション（Data Viz）とは？
本日は、Webの技術（Javascript）を使って
• データをわかりやすくグラフ
• グラフが動く、操作できる
• ユーザーがグラフを通じてデータから
色々発見ができる
• 「データって面白い！」と感じる体験

10. Data Vizの例
under the sea

11. Data Vizの例
under the sea

12. Data Vizの例
川上くんの徒競走

13. Data Vizの例
川上くんの徒競走

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

16. Excel

17. ユーザー数は・・・
Excel

18. 10億人！
Excel

19. ×
Mashup！
E2D3 (Excel to D3.js)

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

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

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

23. 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

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

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

26. オープンデータの利用実績
政府統計データ
総務省：国勢調査
気象庁：平均気温、降水量、風向
国土交通省：国内空港トランジット流動分析
厚生労働省：人口動態調査
経済企画庁：新国民生活指標（住む）データ
その他の統計データ
自動車検査登録情報協会：中京地区の自動車関連統計
早稲田大学が提供するマニフェストスイッチDB
平成26年度刊愛知県統計年鑑より平成24年度市町村税決算額
安城市世帯及び人口表〔含外国人〕
岡山県各市の在住外国人の状況
高梁川流域オープンデータ
「ゴオルシェア」に登録されている震災復興に関する目標階層構造
国連の人口統計データ
米国のIPOに関連するデータ
New York、San Francisco、Austinの気温の変化

27. 受賞、記録歴14回

28. 反響
開発期間2014.4〜3年
全エンジニア 41
全メンバー 100人
アクティブメンバー 51人
DL総数：6.7万
月次DL数：5千

29. Office Store Top Page 2016. 7〜 8ヶ月

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

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

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

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

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

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

36. Data Vizを通じて
「データって面白い！」と皆が教育の中で体験
「グラフィカシー」を皆が持っている
「データの力」を皆が活用できる
私たち（E2D3）が描く未来

37. ここまでが
開発の歴史
2014.4-2016.12

38. ここからが
さらに具体的な
今後目指す未来
2017.1-2017.12

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

40. E2D3の発展段階
1. 過去の表現（Data Viz）を誰もが簡単に、より簡単に、
より早く可能に（ライブラリー、プラットホーム）
2. 新しい表現（Data Viz）の創出（ハッカソン）
3. 実際に、教育現場で子供＆教師に使ってもらえる
→教材に

41. 他のData Vizツールとの比較
business non-businessnon-business
E2D3
一般的なBIツール

42. 本当に面白いグラフは
ControlできないOSSから産まれてくる
business non-businessnon-business
E2D3
一般的なBIツール
OSS開発には
奇跡の瞬間がある！

43. 横の役割分担２
in グラフィカシー
Tree・Network 地図 統計グラフ
チャート
インフォグラフィックス
ピクトグラム
フォトビズ
古代 1 4 7 10
中世 2 5 8 11
現代 3 6 9 12
ツール Cytoscape
Gephi
ArcGIS
QGIS
Carto
PowerBI
Tablueau
Plotly
E2D3
Infogram
[配布資料 or https://www.slideshare.net/YasunobuIgarashi/2016-1220nagoyatech を参照]

44. 子供＆教師が楽しいと感じる
グラフのテーマ by リーン
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

45. Data Vizの例、川上くんの徒競走
スポーツが持つ身体的な楽しさを座学にも

46. E2D3第1回スポーツデータ
なんでも可視化アイデアソン
2017. 2. 18
【E2D3】第一回スポーツxデータ
ビジュアライゼーションハッカソン
2017. 3. 4

47. 何をするの？
• 東京オリンピック＆パラリンピックの競技種目を中心に、どのよう
な可視化表現が楽しいかを一緒に考えて、E2D3に実装します。
• 東京オリンピックの競技種目：水泳、アーチェリー、陸上競技、バド
ミントン、野球／ソフトボール、バスケットボール、ボクシング、カ
ヌー 自転車競技、馬術、フェンシング、サッカー、ゴルフ、体操、ハ
ンドボール、ホッケー、柔道、空手、近代五種、ボート、7人制ラグ
ビー、セーリング、射撃、スケートボード、スポーツクライミング、
サーフィン、卓球、テコンドー、テニス、トライアスロン、バレーボー
ル、ウエイトリフティング
• 東京パラリンピックの独自競技種目：ボッチャ、5人制サッカー、
ゴールボール、シッティングバレーボール 、車椅子バスケットボー
ル、 車いすフェンシング、 ウィルチェアーラグビー、車いすテニス

48. アイデアのヒント
Sports Data VizのSample集
https://goo.gl/iDbi6N に38例あるので是非見てみてください

49. アイデア出しのガイド１
• ◯ 主体：小学生高学年～高校生がData Vizを楽
しく使えるSTORYを考える（正しい可視化＜楽し
い可視化）
• × 主体：大人が見て楽しめるSTORYを考える（知
識の可視化＜体験の可視化）

50. アイデア出しのガイド２
• データ１：自分が、小学生高学年～高校生時代に
学校で測定したことがあるデータ
• データ２：現在の小学生高学年～高校生が学校
で先生の助けも借りて、測定できる数値データ
（デバイスはスマホの無料アプリまでは使用して
OK）

51. Data Vizを楽しくするTips
＜Data Vizの基本は情報の比較＞
- 自分と他人、対象物とその他の比較：多い、少ない、同じ
- 過去、現在、未来の比較：増える、減る、同じ
＜比較の例＞
最速の球技は何か？
野球：168 km/h （国内）、170 キューバチャップス
テニス：267、卓球：190、ホッケー：170、サッカー：189
＜誰も見たことがない新いData Vizを簡単に作る秘訣＞
- 皆が認知しているボールの図をアイコンにする（コピーライトは気をつけて）
- 背景を舞台に変える
＜UIの設計＞
Interactiveとは情報を並べる順番を変える（考える）ということ

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

53. ハッカソンの成果物
1 アクアスロン
2 避難経路
3 卓球
4 動物はやさ
5 テニス
6 体力テスト＋学力
7 50m x ソフトボール投げ
8 シャトルラン

54. ハッカソンの成果物１

55. シャトルランとは？
• 新体力テストの１つ
• 20mの往復をひたすら繰り返す
• 折り返し時間（ドレミファ）がどんどん短くなっていく
• https://www.youtube.com/watch?v=7h20reZDDqg に動画
ハッカソンの成果物２

56. http://www.taishukan.co.jp/sports/science/qa/pdf/shuttle01.pdf
Name Count
伊藤 56
遠藤 71
菊池 33
佐藤 25
田中 66
西山 101
前田 43
… …
得られるデータ

57. イメージ
Name Count
伊藤 3
遠藤 1
菊池 1
佐藤 25
田中 2
西山 2
前田 3
… …
1回00:00

58. イメージ
Name Count
伊藤 3
遠藤 1
菊池 1
佐藤 25
田中 2
西山 2
前田 3
… …
2回00:09

59. イメージ
Name Count
伊藤 3
遠藤 1
菊池 1
佐藤 25
田中 2
西山 2
前田 3
… …
3回00:18

60. イメージ
Name Count
伊藤 3
遠藤 1
菊池 1
佐藤 25
田中 2
西山 2
前田 3
… …
4回00:27

61. イメージ
Name Count
伊藤 3
遠藤 1
菊池 1
佐藤 25
田中 2
西山 2
前田 3
… …
1回
伊藤
マウスオーバーで名前が出る
00:00

62. イメージ
Name Count
伊藤 3
遠藤 1
菊池 1
佐藤 25
田中 2
西山 2
前田 3
… …
1回
選択した人だけをフォーカス
00:00

63. クラス対抗シャトルラン その１
回数
人数
■：１組
■：２組
00:0030
96

64. クラス対抗シャトルラン その１
回数
人数
■：１組
■：２組
どれくらいの持久力の子が多いか
平均的に良い？
すば抜けてすごい子がいる？
→教師向けのデータ分析？
00:00

65. クラス対抗シャトルラン その２
回数
累積
回数
■：１組
■：２組
00:00
981
96

66. クラス対抗シャトルラン その２
回数
累積
回数
■：１組
■：２組
クラスの総戦力で対決！
１人だけすごい子が居ても勝てない
→スポーツテストの事前学習時に
対決させることで意欲を増強

67. 「データって面白い！」
と感じている市民が
やっているシビックテック
「データって面白い！」
と感じる体験（≠知識）を増やすPJ
行政がやるべきだが、できていない
課題を市民がテクノロジーで解決

68. 統計データを楽しむ
「新しいアクティブ・ラーニング教材」の提案
データビジュアライゼーション アプリ
E2D3の活用方法
Founder & PJ Leader 五十嵐康伸
2017. 3. 25 第6回科学技術教育フォーラム
を一緒に開発しませんか？
という提案

69. 協力のお願い
• どのようなData Vizが良いか一緒に考える
• 45分授業のマニュアルを作る
• クラブ活動や授業で試す
https://goo.gl/2MEMb1 のイベントに遊びに来てください！

70. ご静聴、ありがとうございました。
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
Founder & PJ Leader 五十嵐康伸