1. E2D3に学ぶ
データビジュアライゼーションアプリの
アイデア発想法
DV作品を作りたいという
気持ちのおこしかた
2016年8月9日
オープンデータを活用したアプリケーション開発セミナー
#E2D3
Founder & PJ Leader 五十嵐康伸

2. まとめとお詫び
【前編】
1. E2D3とは（10%）
– 皆でデモ → エンドユーザーとしてE2D3は簡単に作れるよ
– STAT DASHグランプリ2016 →E2D3が目指しているのは人類のデータリテラシーの向上
【中編】 （今の自分と比較しながら聞いてほしい）
2. E2D3以前（5%）
– どのようにアプリ（スマホ/Web）を作りたい気持ちを初期に持続できたか
3. なぜE2D3？（10%）
– JS全くわからない、でもD3.jsカッコいいから使いたい
【後編】
4. E2D3以後（75%）
– アイデアソン/ハッカソンの参加者にDV）品を作る気をおこしてもらう工夫
想定以上にハンズオンと質疑が盛り上がったので
用意したスライドの¼で発表時間が終わってしまいました
発表した部分のスライドまで公開し
残りはまた別の機会にお話しします
また著作権上、割愛している画像・写真がございます

3. 自己紹介：E2D3 Founder & PJ Leader
PM、研修
解析
シミュレーション
筑波大学、奈良先端：一人
計測
東北大学：自分＋学生
オリパスソフトウェアテクノロジー：社内チーム
可視化 E2D3：OSSチーム
人と組織
インテリジェンス
ハッカソン
ギブリー
データ技術開発
人
脳
体
心臓、手

4. 話す/話したいこと
【前編】
1. E2D3とは（10%）
– 皆でデモ
– STAT DASHグランプリ2016
【中編】 （今の自分と比較しながら聞いてほしい）
2. E2D3以前（5%）
– どのようにアプリ（スマホ/Web）を作りたい気持ちを初期に持続できたか？
3. なぜE2D3？（10%）
– JS全くわからない、でもD3.jsカッコいいから使いたい
【後編】
4. E2D3以後（75%）
– アイデアソン/ハッカソンの参加者にDV作品を作る気をおこしてもらう工夫

5. 話す目的
1. オープンデータとDVは相性がよい、面白い
2. DV作品（アプリ、Web>スマホ）を作ってみたいと思う
3. DV作品作りの発想法を持って帰る
4. 海外の成功事例を学ぶ
5. ご飯を食べているときや、お風呂に入っているときに「どんなDVアプリを作りたいか」妄想する
6. 「ＫＡＮＡＺＡＷＡオープンデータアプリコンテスト」やその他のコンペ、研究、仕事で活用する
7. こういう理由でデータ出して欲しいと公共に伝える
市と連携できるのはすごい、フィードバックループをまわすのが大事
初めから市に課題をヒアリングする
8. 市民も公共も幸せになる

6. DVとは？
• データの可視化
• パターンや関係性や構造を発見
• データを理解する手法の一つ
• 課題（悪いこと、良いこと）の見える化→提案、行動
• 本当に大事なのは問題解決→ ex. オープンガバメント

7. DVとは？
読み手が主体的に動いて主体的な発見をする

8. 話す/話したいこと
【前編】
1. E2D3とは（10%）
– 皆でデモ
– STAT DASHグランプリ2016
【中編】 （今の自分と比較しながら聞いてほしい）
2. E2D3以前（5%）
– どのようにアプリ（スマホ/Web）を作りたい気持ちを初期に持続できたか？
3. なぜE2D3？（10%）
– JS全くわからない、でもD3.jsカッコいいから使いたい
【後編】
4. E2D3以後（75%）
– アイデアソン/ハッカソンの参加者にDV作品を作る気をおこしてもらう工夫

9. 1. E2D3とは -1
皆でデモ

10. OSSにすることでグラフが進化する
http://a.e2d3.org/chart.html#japan-color!js!csv
→
http://a.e2d3.org/chart.html#tokyomap-koganei!js!csv
→
http://a.e2d3.org/chart.html#yamaguchi-map!js!tsv
→
http://a.e2d3.org/chart.html#ishikawa_map!js!tsv
画面の解像度は最大に
デモ１

11. デモ２
http://a.e2d3.org/chart.html#InfiniteElementMethod_E2D3-LIG_03!js!csv
→
http://a.e2d3.org/chart.html#kurashiki-landmark-chart!js!csv
→
http://a.e2d3.org/chart.html#ishikawa-biparite-graph!js!csv

12. エンジニアの方へのお願い（宿題）
Uncategorized / ishikawa-bipartite-graph(2部グラフ)
http://a.e2d3.org/chart.html#ishikawa-biparite-
graph!js!csv
を
Recommendedカテゴリーに移す

13. エンジニアの方へのお願い（宿題）
3. 各カテゴリーに置くグラフがリスト化されています
4. ishikawa-bipartile-graphを
tags.ymlのrecommendedのリストに
追加してpull reqしてください
2. どのグラフをどのカテゴリーに置くかを決める
設定ファイルは、tags.ymlです
1. e2d3-contribのrepositoryをfolkして
以下の修正をして、Pull reqください

14. 全員へのお願い
• バグ
• 改善提案
• 新規グラフ作成
はGithub Issueで受付中！
クリック２
クリック１

15. 話す/話したいこと
【前編】
1. E2D3とは（10%）
– 皆でデモ
– STAT DASHグランプリ2016
【中編】 （今の自分と比較しながら聞いてほしい）
2. E2D3以前（5%）
– そもそも、なぜアプリ（スマホ/Web）を作ろうと思ったのか？
3. なぜE2D3？（10%）
– JS全くわからない、でもD3.jsカッコいいから使いたい
【後編】
4. E2D3以後（75%）
– アイデアソン/ハッカソンの参加者にDV作品を作る気をおこしてもらう工夫

16. 1. E2D3とは -2
統計データ利活用アプリケーション・アイデ
アコンテスト STAT DASHグランプリ2016
Founder & PJ Leader 五十嵐康伸

17. オープンデータのための
オープンソース
データビジュアライゼーション
プラットホーム
E2D3（Excel to D3.js）の開発と
E2D3を用いた
データリテラシー教育事業の創造
Founder & PJ Leader 五十嵐康伸

18. Founder & PJ Leader 五十嵐康伸
「データって面白い！」
と言う人を増やすPJ

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

20. でも、数値データは
画像割愛
• わかりづらい
• 見たくない

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

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

23. データビジュアライゼーションとは？
• データをわかりやすくグラフ化
• グラフが動く、操作できる
• ユーザーがグラフを通じてデータか
ら色々発見ができる
• 「データって面白い！」という体験

24. データビジュアライゼーションの例
川上くんの徒競走
https://www.youtube.com/watch?v=6DejCo9OiyA

25. データビジュアライゼーションの例
under the sea
https://www.youtube.com/watch?v=TnaZaabjrMQ

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

28. Excel

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

30. 10億人！
Excel

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

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

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

34. 現在グラフ数：62個
Twitter, FB share, Web 埋め込み可能

35. オープンソース
データビジュアライゼーション
プラットホーム
Win, Mac
npm
html, JS

36. 受賞歴13回

37. 反響
DL総数：2,3000
月次DL数：2,000
開発期間2年
開発メンバー
30（100）名

38. オープンデータの利用実績
政府統計データ：５件
平成２２年国勢調査
都道府県・市区町村別主要統計表（平成22年）
国土数値情報
新国民生活指標（住む）データ：経済企画庁が策定した新国民生活指標の
「住む」ことに関する平成11年の発表データ．
気象庁の過去の気象データ
その他の統計データ：８件
早稲田大学が提供するマニフェストスイッチDB
平成26年度刊愛知県統計年鑑より平成24年度市町村税決算額
安城市世帯及び人口表〔含外国人〕
岡山県各市の在住外国人の状況
高梁川流域オープンデータ
「ゴオルシェア」に登録されている震災復興に関する目標階層構造
国連の人口統計データ
米国のIPOに関連するデータ
New York、San Francisco、Austinの気温の変化

39. オープンソース
データビジュアライゼーション
プラットホーム
オープンデータ
×
Mashup

40. データ
（数値）
課題を
決める
見つ
ける
整理
する
分析
する
表現
する
読み
解く
データリテラシー

41. 言う必要あるの？
データサイエンティスト
アナリスト
営業、マーケ
非エンジニア
一般事務員
小、中、高生
データって
面白い！

42. 21世紀にはギャップがある！
ビジネスチャンス
（新幹線、リニアモーターカー
iPS細胞、東京オリンピック）
vs
経済不況
このギャップを乗り越えて、経済成長する方法は？

43. 個人の力を活用する
オープンイノベーション x 選挙
データリテラシーで改善できる！
画像割愛

44. オープンデータを用いて
国民全員の思考力を高めることが重要
データサイエンティスト
アナリスト
営業、マーケ
非エンジニア
一般事務員
小、中、高生
データって
面白い！

45. オープンデータを用いて
我々は何をするべきか？
政府の最優先課題は三つある
それは教育と、教育と、教育だ！
英国元首相 トニーブレア
画像割愛

46. オープンソース
データビジュアライゼーション
プラットホームオープンデータ
x 教育
Mashup
画像割愛

47. オープンデータ x データビジュアライゼーション x
データリテラシー教育 （社会課題を可視化するハッカソン）
マイクロソフト、NewsPicks (Uzabase)、LIG、コードフォー横浜、名古屋、倉敷らと約20回開催

48. オープンデータ x データビジュアライゼーション x
データリテラシー教育 （アイデアソン）
Yahoo! みんなの政治、8つの高校・大学、塾で開催、メディア掲載11回
画像割愛
http://seiji.yahoo.co.jp/youth/ideathon/

49. 2020年大学入試改革
試験問題
５教科
↓
合教科（科目横断）
＆総合型
グラフの読み方が重要
文科省の方向性とも合致

50. オープンデータのための
オープンソース
データビジュアライゼーション
プラットホーム
E2D3（Excel to D3.js）の開発と
E2D3を用いた
データリテラシー教育事業の創造
政府統計の総合窓口（e-Stat）
データ利活用啓発部門への提案

51. 「データって面白い！」と皆が言う
「データリテラシー」を皆が持っている
「データの力」を皆が活用できる
私たちが描く未来

52. 私たちE2D3は、ソースもノウハウも
全てをオープンにします
一緒に日本を良くしませんか？
私たちが描く未来

53. ご静聴、ありがとうございました。
Founder & PJ Leader 五十嵐康伸

54. 参考資料

55. 他のデータビジュアライゼーション
ツールとの比較

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