Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2017-3-25-科学技術教育フォーラム

464 views

Published on

科学技術教育フォーラムの講演資料
http://www.jsqc.org/q/news/events/index.html#h290325

Published in: Data & Analytics
  • Be the first to comment

2017-3-25-科学技術教育フォーラム

  1. 1. 統計データを楽しむ 「新しいアクティブ・ラーニング教材」の提案 データビジュアライゼーション アプリ E2D3の活用方法 Founder & PJ Leader 五十嵐康伸 2017. 3. 25 第6回科学技術教育フォーラム
  2. 2. 統計データを楽しむ 「新しいアクティブ・ラーニング教材」の提案 データビジュアライゼーション アプリ E2D3の活用方法 Founder & PJ Leader 五十嵐康伸 2017. 3. 25 第6回科学技術教育フォーラム を一緒に開発しませんか? という提案
  3. 3. 「データって面白い!」 と感じている市民が やっているシビックテック 「データって面白い!」 と感じる体験(≠知識)を増やすPJ 行政がやるべきだが、できていない 課題を市民がテクノロジーで解決
  4. 4. 自己紹介:データ大好き 博士 データ 計測 データ 解析 データ 可視化
  5. 5. よくある数値データ
  6. 6. よくある数字のデータ わかりづらい 見たくない
  7. 7. ターゲット データサイエンティスト アナリスト 営業、マーケ 非エンジニア 一般事務員 小、中、高生 データ好き データに触れる 機会多い データ嫌い、触れない 良い体験がない
  8. 8. どうやったら、「データって面白い!」 という体験を作れるか? データ 計測 データ 解析 データ 可視化
  9. 9. データビジュアライゼーション(Data Viz)とは? 本日は、Webの技術(Javascript)を使って • データをわかりやすくグラフ • グラフが動く、操作できる • ユーザーがグラフを通じてデータから 色々発見ができる • 「データって面白い!」と感じる体験
  10. 10. Data Vizの例 under the sea
  11. 11. Data Vizの例 under the sea
  12. 12. Data Vizの例 川上くんの徒競走
  13. 13. Data Vizの例 川上くんの徒競走
  14. 14. Data Vizによって データサイエンティスト アナリスト 営業、マーケ 非エンジニア 一般事務員 小、中、高生 データって 面白い!
  15. 15. Excel
  16. 16. ユーザー数は・・・ Excel
  17. 17. 10億人! Excel
  18. 18. × Mashup! E2D3 (Excel to D3.js)
  19. 19. ユーザー数10億人のExcelから GUIのみで操作可能
  20. 20. Microsoft Office App Store から 誰でも無料に利用可能
  21. 21. 現在グラフ数:93個 Twitter, FB share, Web 埋め込み可能 by 市民 ハッカソン駆動開発
  22. 22. 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
  23. 23. E2D3ハッカソンの開催判断、結果として PBL • 第1回目のハッカソンを除き、全てパートナー団体と 一緒に運営 • 課題を持っているパートナーと、その課題をデータ可 視化によって解決できるか話し合い、解決できる見 込みがあると双方が判断したときのみハッカソンを実 施 • 多様な社会課題に対する新しいデータ可視化表現 が開発されることを目的に、できる限り多くのパート ナー団体とハッカソンを開催
  24. 24. オープンソース データビジュアライゼーション プラットホーム Win, Mac npm html, JS コミュニティ アプリ
  25. 25. オープンデータの利用実績 政府統計データ 総務省:国勢調査 気象庁:平均気温、降水量、風向 国土交通省:国内空港トランジット流動分析 厚生労働省:人口動態調査 経済企画庁:新国民生活指標(住む)データ その他の統計データ 自動車検査登録情報協会:中京地区の自動車関連統計 早稲田大学が提供するマニフェストスイッチDB 平成26年度刊愛知県統計年鑑より平成24年度市町村税決算額 安城市世帯及び人口表〔含外国人〕 岡山県各市の在住外国人の状況 高梁川流域オープンデータ 「ゴオルシェア」に登録されている震災復興に関する目標階層構造 国連の人口統計データ 米国のIPOに関連するデータ New York、San Francisco、Austinの気温の変化
  26. 26. 受賞、記録歴14回
  27. 27. 反響 開発期間2014.4〜3年 全エンジニア 41 全メンバー 100人 アクティブメンバー 51人 DL総数:6.7万 月次DL数:5千
  28. 28. Office Store Top Page 2016. 7〜 8ヶ月
  29. 29. E2D3 ボランティアメンバーの所属例 会社としての公式協力ではありません
  30. 30. 縦の役割分担 データサイエンティスト アナリスト 営業、マーケ 非エンジニア 一般事務員 小、中、高生 データって 面白い!
  31. 31. 横の役割分担 in (教科横櫛の)教養
  32. 32. オープンソース データビジュアライゼーション プラットホーム オープンデータ x 教育 Mashup!
  33. 33. Data Viz x オープンデータ x グラフィカシー教育 (社会課題を可視化するハッカソン) マイクロソフト、NewsPicks (Uzabase)、LIG、Code for 横浜、名古屋、倉敷らと約20回開催
  34. 34. Data Viz x オープンデータ x グラフィカシー教育 (社会課題を可視化するアイデアソン) Yahoo! みんなの政治、8つの高校・大学、塾で開催、メディア掲載11回
  35. 35. Data Vizを通じて 「データって面白い!」と皆が教育の中で体験 「グラフィカシー」を皆が持っている 「データの力」を皆が活用できる 私たち(E2D3)が描く未来
  36. 36. ここまでが 開発の歴史 2014.4-2016.12
  37. 37. ここからが さらに具体的な 今後目指す未来 2017.1-2017.12
  38. 38. 縦の役割分担 データサイエンティスト アナリスト 営業、マーケ 非エンジニア 一般事務員 小、中、高生 データって 面白い!
  39. 39. E2D3の発展段階 1. 過去の表現(Data Viz)を誰もが簡単に、より簡単に、 より早く可能に(ライブラリー、プラットホーム) 2. 新しい表現(Data Viz)の創出(ハッカソン) 3. 実際に、教育現場で子供&教師に使ってもらえる →教材に
  40. 40. 他のData Vizツールとの比較 business non-businessnon-business E2D3 一般的なBIツール
  41. 41. 本当に面白いグラフは ControlできないOSSから産まれてくる business non-businessnon-business E2D3 一般的なBIツール OSS開発には 奇跡の瞬間がある!
  42. 42. 横の役割分担2 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 を参照]
  43. 43. 子供&教師が楽しいと感じる グラフのテーマ 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
  44. 44. Data Vizの例、川上くんの徒競走 スポーツが持つ身体的な楽しさを座学にも
  45. 45. E2D3第1回スポーツデータ なんでも可視化アイデアソン 2017. 2. 18 【E2D3】第一回スポーツxデータ ビジュアライゼーションハッカソン 2017. 3. 4
  46. 46. 何をするの? • 東京オリンピック&パラリンピックの競技種目を中心に、どのよう な可視化表現が楽しいかを一緒に考えて、E2D3に実装します。 • 東京オリンピックの競技種目:水泳、アーチェリー、陸上競技、バド ミントン、野球/ソフトボール、バスケットボール、ボクシング、カ ヌー 自転車競技、馬術、フェンシング、サッカー、ゴルフ、体操、ハ ンドボール、ホッケー、柔道、空手、近代五種、ボート、7人制ラグ ビー、セーリング、射撃、スケートボード、スポーツクライミング、 サーフィン、卓球、テコンドー、テニス、トライアスロン、バレーボー ル、ウエイトリフティング • 東京パラリンピックの独自競技種目:ボッチャ、5人制サッカー、 ゴールボール、シッティングバレーボール 、車椅子バスケットボー ル、 車いすフェンシング、 ウィルチェアーラグビー、車いすテニス
  47. 47. アイデアのヒント Sports Data VizのSample集 https://goo.gl/iDbi6N に38例あるので是非見てみてください
  48. 48. アイデア出しのガイド1 • ◯ 主体:小学生高学年~高校生がData Vizを楽 しく使えるSTORYを考える(正しい可視化<楽し い可視化) • × 主体:大人が見て楽しめるSTORYを考える(知 識の可視化<体験の可視化)
  49. 49. アイデア出しのガイド2 • データ1:自分が、小学生高学年~高校生時代に 学校で測定したことがあるデータ • データ2:現在の小学生高学年~高校生が学校 で先生の助けも借りて、測定できる数値データ (デバイスはスマホの無料アプリまでは使用して OK)
  50. 50. Data Vizを楽しくするTips <Data Vizの基本は情報の比較> - 自分と他人、対象物とその他の比較:多い、少ない、同じ - 過去、現在、未来の比較:増える、減る、同じ <比較の例> 最速の球技は何か? 野球:168 km/h (国内)、170 キューバチャップス テニス:267、卓球:190、ホッケー:170、サッカー:189 <誰も見たことがない新いData Vizを簡単に作る秘訣> - 皆が認知しているボールの図をアイコンにする(コピーライトは気をつけて) - 背景を舞台に変える <UIの設計> Interactiveとは情報を並べる順番を変える(考える)ということ
  51. 51. て 題名 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
  52. 52. ハッカソンの成果物 1 アクアスロン 2 避難経路 3 卓球 4 動物はやさ 5 テニス 6 体力テスト+学力 7 50m x ソフトボール投げ 8 シャトルラン
  53. 53. ハッカソンの成果物1
  54. 54. シャトルランとは? • 新体力テストの1つ • 20mの往復をひたすら繰り返す • 折り返し時間(ドレミファ)がどんどん短くなっていく • https://www.youtube.com/watch?v=7h20reZDDqg に動画 ハッカソンの成果物2
  55. 55. http://www.taishukan.co.jp/sports/science/qa/pdf/shuttle01.pdf Name Count 伊藤 56 遠藤 71 菊池 33 佐藤 25 田中 66 西山 101 前田 43 … … 得られるデータ
  56. 56. イメージ Name Count 伊藤 3 遠藤 1 菊池 1 佐藤 25 田中 2 西山 2 前田 3 … … 1回00:00
  57. 57. イメージ Name Count 伊藤 3 遠藤 1 菊池 1 佐藤 25 田中 2 西山 2 前田 3 … … 2回00:09
  58. 58. イメージ Name Count 伊藤 3 遠藤 1 菊池 1 佐藤 25 田中 2 西山 2 前田 3 … … 3回00:18
  59. 59. イメージ Name Count 伊藤 3 遠藤 1 菊池 1 佐藤 25 田中 2 西山 2 前田 3 … … 4回00:27
  60. 60. イメージ Name Count 伊藤 3 遠藤 1 菊池 1 佐藤 25 田中 2 西山 2 前田 3 … … 1回 伊藤 マウスオーバーで名前が出る 00:00
  61. 61. イメージ Name Count 伊藤 3 遠藤 1 菊池 1 佐藤 25 田中 2 西山 2 前田 3 … … 1回 選択した人だけをフォーカス 00:00
  62. 62. クラス対抗シャトルラン その1 回数 人数 ■:1組 ■:2組 00:0030 96
  63. 63. クラス対抗シャトルラン その1 回数 人数 ■:1組 ■:2組 どれくらいの持久力の子が多いか 平均的に良い? すば抜けてすごい子がいる? →教師向けのデータ分析? 00:00
  64. 64. クラス対抗シャトルラン その2 回数 累積 回数 ■:1組 ■:2組 00:00 981 96
  65. 65. クラス対抗シャトルラン その2 回数 累積 回数 ■:1組 ■:2組 クラスの総戦力で対決! 1人だけすごい子が居ても勝てない →スポーツテストの事前学習時に 対決させることで意欲を増強
  66. 66. 「データって面白い!」 と感じている市民が やっているシビックテック 「データって面白い!」 と感じる体験(≠知識)を増やすPJ 行政がやるべきだが、できていない 課題を市民がテクノロジーで解決
  67. 67. 統計データを楽しむ 「新しいアクティブ・ラーニング教材」の提案 データビジュアライゼーション アプリ E2D3の活用方法 Founder & PJ Leader 五十嵐康伸 2017. 3. 25 第6回科学技術教育フォーラム を一緒に開発しませんか? という提案
  68. 68. 協力のお願い • どのようなData Vizが良いか一緒に考える • 45分授業のマニュアルを作る • クラブ活動や授業で試す https://goo.gl/2MEMb1 のイベントに遊びに来てください!
  69. 69. ご静聴、ありがとうございました。 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 五十嵐康伸

×