E2D3で「小学生が楽しいと思うグラフ」を作るぞ！ （ハッカソンレポート）

2015年5月10日(日)、株式会社サイバードにて[「小学生が楽しいと思うグラフを作るぞハッカソン organized by GreenHack & E2D3」](https://www.facebook.com/events/832550883466083/)が行なわれました。

[GreenHack](http://greenhack.azurewebsites.net/)は、プログラミングにはじめて触れる方が、プログラミングの一歩目を楽しんで貰うイベント。本イベントの開催経緯をGreenHack・代表の垣内朋子さんが、キャラクターのかっきーを使って説明してくれました。

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/e2146795-e417-b38f-35f7-2a0f235463b8.png)

「世の中はビッグデータ時代。もう小学生からPCでデータに触れた方が良いのでは？でも、データ解析って言うと数式が出てきて小学生には難しいのかも。それなら楽しいグラフ（データ可視化）で、もっと楽しくデータと触れ合えないかな？そこでGreenHackは[E2D3（Excel to D3.js）](http://e2d3.org/?lang=ja)と出会いました。E2D3は、Excelから様々なWeb系グラフィックライブラリーを呼び出すためのオープンソースのプラットホームです。E2D3を使って新しいグラフテンプレートを作る、そしてそれをシェアして小学生に楽しくグラフを作ってもらう、それがこのハッカソンの目的です。」

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/18b170f2-b3c1-9c59-957f-ba240bff11d0.png)
当日はE2D3の解説もありました。詳細はスライドをご覧ください。

<iframe src="//www.slideshare.net/slideshow/embed_code/key/4aq96ve5U32vyG" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/takashiiki1/d3e2-d3-20150510" title="D3とE2D3の概要説明(20150510小学生が楽しいと思うグラフを作るぞハッカソン)" target="_blank">D3とE2D3の概要説明(20150510小学生が楽しいと思うグラフを作るぞハッカソン)</a> </strong> from <strong><a href="//www.slideshare.net/takashiiki1" target="_blank">Takashi Iki</a></strong> </div>

その後はチームビルディング。
ですが、初対面の方も多いのでまずはアイスブレイクを実施。

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/0c115cb9-8ddd-1b67-2af9-c4a3d4345504.png)


![image](https://qiita-image-store.s3.amazonaws.com/0/24276/0f568626-548c-904b-4b5b-6eece6b4eb86.png)

少し打ち解けたところで、早速ブレストにうつりました。
ブレスト後はアイデアを発表し合い、関心が近い方々同士でチームを組みました。

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/2bd53d5d-b023-9e29-8bde-2a8d2afd9278.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/21c2a69e-ed02-7641-018e-e45da97a47fc.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/3b08ed40-1127-2319-c0e3-5da9f0c97c0a.png)

ここで午前中が終わり、お昼休憩。少しの休憩を挟んで、午後は各チームそれぞれが作業に取り掛かりました。

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/d9dbe479-9008-cab4-16fd-bf0fa8b84e2e.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/5e3ac01e-a9f6-a539-f6cb-b550e80081cf.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/0ecd9609-01e2-e186-e6ce-ae8e11a5dba4.png)

夕方からチームの発表がありました。下記７チームです。
・戦国時代（sengoku）
・チーム適当（単位ゲーム）
・チーム向日葵（比べてみよう、私のみんなの生活時間）
・アイドルコンテスト（先生評価）
・チーム他力本願（pig）
・チーム後藤（マップ上にビジュアライズ）
・チームエース（川上君の徒競走）

・戦国時代（sengoku）
![image](https://qiita-image-store.s3.amazonaws.com/0/24276/c9994933-d148-1bb2-d3a5-a6eaf4bccc7f.png)

戦国武将のデータを用いて、戦力をグラフにしました。

・チーム適当（単位ゲーム）
![image](https://qiita-image-store.s3.amazonaws.com/0/24276/e4afef0a-b92a-021c-7757-3a2044afa6cb.png)

ひよこやショートケーキなどを選択し、選んだものの重さの合計をグラフで見ることができます。

![hiyoko@2x.png](https://qiita-image-store.s3.amazonaws.com/0/24276/91acb1f5-40d4-632f-8228-b1cffca1e815.png)

![home2@2x.png](https://qiita-image-store.s3.amazonaws.com/0/24276/e5102a34-57ff-4c0c-ee11-fa9d15cef5a1.png)

![home6@2x.png](https://qiita-image-store.s3.amazonaws.com/0/24276/10a5a03c-b1e1-bd4f-97ec-a9747c313474.png)

・チーム向日葵（比べてみよう、私のみんなの生活時間）
![image](https://qiita-image-store.s3.amazonaws.com/0/24276/649354e7-133f-a6b8-05a1-ce014318c3a6.png)

自分の生活時間をみんなと比較できるサービスです。

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/a3516273-942e-0ae7-4480-88be21d9eea4.png)

・アイドルコンテスト（先生評価）
![image](https://qiita-image-store.s3.amazonaws.com/0/24276/03b26520-c572-748c-4e01-1653bfd7825d.png)

生徒が先生を評価し、ランキング付けをします。

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/eea34a90-6f43-5b80-e6ab-7ceb90f74eed.png)

・チーム他力本願（pig）
![image](https://qiita-image-store.s3.amazonaws.com/0/24276/25a2aa7d-f429-088a-b5d3-17904c967096.png)

節約額がブタ、支出を狼で表現します。

・チーム後藤（マップ上にビジュアライズ）
![image](https://qiita-image-store.s3.amazonaws.com/0/24276/73c1af9d-cec3-9f65-6162-ae7ac75075ef.png)

テーマをマップに表現します。
今回は子供の貧困率、幸福度をマッピングしました。

・チームエース（川上君の徒競走）
![image](https://qiita-image-store.s3.amazonaws.com/0/24276/8436c889-feba-1b69-9574-e59b0c69ea93.png)

各ランナーに数値を入力し、それをもとに徒競走が行われます。

![image](https://qiita-image-store.s3.amazonaws.com/0/24276/0c7d245c-d396-4bb5-86a2-ce7dc69106ea.png)

最後はみんなで集合写真。小学生が喜んでくれる作品がたくさんできました。

E2D3はこれまで「政治」「教育」をテーマにハッカソンを開催し、次のハッカソンのテーマは「経済」、 6月14日（日）[NewsPicks & SPEEDA Smart Data Experience Hackathon powered by E2D3](http://e2d3.connpass.com/event/14868/)」を開催します。

また、Githubに興味はあるけど全然使ったことないプログラム初心者に「なるほどGithubって，こうなってたのか！」と言ってもらえることを目指して[「非プログラマでもGithubの仕組みが理解できる超初心者コース」](http://e2d3.connpass.com/event/15492/)も開催します。

E2D3はオープンなコミュニティーですので、興味ある方は誰でも運営に参加できます。[Facebook](https://www.facebook.com/e2d3project?fref=ts)、[Twitter](https://twitter.com/e2d3org)等で是非ご連絡ください！

（文章：浜崎 正己，撮影：澤 紀彦）