読者です 読者をやめる 読者になる 読者になる

rioRESERVoir

Allajah/Rioの個人ブログ

#kosen10s メンバーが卒業した高専のある都道府県をマッピングしてみる

この記事は #kosen10s Advent Calendarの18日目の記事です。

書きながら実装

この記事ではやったことを書くのではなく、書く内容を先に決めて実装しながら記事を書いていくという手法を取ることにしました。
実装を終わらせてから書き始めると「あ〜あの過程のスクショ撮っておけばよかった〜〜」って思うことが多々あり、 その過程を再現するのが面倒だからです。

解決する問題

#kosen10s には個性豊かな高専生が、全国各地から参加しています。
ふと、「どの地方の高専から来てる人が多い(少ない)んだろう」と気になった時、現在それをスッと確認する手段はありません。
今回は日本地図に「#kosen10sのメンバーが卒業した高専」をマッピングすることにより、「kosen10sには◯◯地方(◯◯高専)の知見がない!」
ということを明らかにしようと思います。

この記事のゴール

高専ごとにマッピングすると、日本地図を市区町村ごとに区切らなくてはいけないので、 今回のゴールは「 kosen10sメンバーがどの都道府県にある高専を卒業していて、どの地方が多くどの地方が少ないのか視覚的に分かりやすくする。」 とします。

注意点

  • この記事では高専別ではなく都道府県別でマッピングしています。たとえば、「神戸高専」と「明石高専」は「兵庫県」、「函館」「苫小牧」「釧路」「旭川」は「北海道」 としてまとめています。
  • 「kosen10sメンバー」という言葉は、便宜上「kosen10sのSlackチームに参加していて、かつ自己紹介シートを記入している人」という意味で用います。

用いる技術

僕のスキルセットの都合上、今回はHTMLとCSSとJS、それからお馴染みのD3.jsを用います

実装

参考記事

日本地図の描画

まずは日本地図を描画します。

1. 地図データの用意

http://www.naturalearthdata.com/downloads/10m-cultural-vectors/ からデータをダウンロード。

2. GDALをインストール

brewで入ります。
$ brew install gdal

3.gdalパッケージに入ってるogr2ogrで sharp ファイルを GeoJSON ファイルに変換

$ ogr2ogr -f GeoJSON -where "adm0_a3 = 'JPN'" pref.json ne_10m_admin_1_states_provinces.shp

4. htmlとjsをザクっと書きます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
var width = 1200,
    height = 1000;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var color = d3.scale.category20();

var mercator = d3.geo.mercator()
    .center([136.0,35.6])
    .translate([width/2, height/2])
    .scale(1200);

var geopath = d3.geo.path()
    .projection(mercator);

d3.json("pref.json", function(error, jp) {
    svg.selectAll("path")
            .data(jp.features)
            .enter().append("path")
            .attr("class", function(d) { return d.id; })
            .attr("d", geopath)
            .attr("fill", function(d){ return color(d.geometry.coordinates); });
});

5.ローカルサーバーを起動します

$ python -m http.server 5000

6.ブラウザで開きます

f:id:Allajah:20161218231940p:plain

日本地図が表示されました

出身高専データの用意

ここからが本番です。都道府県各地の色を、kosen10sメンバーの人数によって変えたいので、

1.メンバーが卒業した高専と、

2.その高専がどの都道府県に所在しているか

という情報が必要になります。幸い、kosen10sのGoogle Driveに自己紹介シートと言うものが存在しているので、 1は解決します。問題は2です。
高専がどの都道府県にあるのかまとめられたデータがJSONなりCSVなりXMLなりで何処かにあれば嬉しいんですけど、そんなものはないと思ったのと探すのもめんどくさかったので自分で作ります。

f:id:Allajah:20161218232537p:plain

自己紹介シートは、上の画像のように xx高専xx を各々書いていっている形になっています。(これ見た感じ結構偏ってる・・・?)

本当は各高専都道府県の対応表をもっておいて、自己紹介シートを読んで自動でjsonを吐き出すようにしたかったんですが、今回は時間がないので手でやります。

努力の結果こんなjsonができた

{
  "items": [
    {
      "name": "明石",
      "pref": "兵庫県",
      "population": 4
    },
    {
      "name": "津山",
      "pref": "岡山県",
      "population": 2
    },
    {
      "name": "サレジオ",
      "pref": "東京都",
      "population": 2
    },
    {
      "name": "茨城",
      "pref": "茨城県",
      "population": 5
    },
    {
      "name": "福井",
      "pref": "福井県",
      "population": 1
    },
    {
      "name": "産技荒川",
      "pref": "東京都",
      "population": 2
    },
    {
      "name": "松江",
      "pref": "島根県",
      "population": 1
    },
    {
      "name": "群馬",
      "pref": "群馬県",
      "population": 1
    },
    {
      "name": "大阪府大",
      "pref": "大阪府",
      "population": 1
    },
    {
      "name": "沖縄",
      "pref": "沖縄県",
      "population": 2
    },
    {
      "name": "木更津",
      "pref": "千葉県",
      "population": 1
    },
    {
      "name": "久留米",
      "pref": "福岡県",
      "population": 1
    },
    {
      "name": "小山",
      "pref": "栃木県",
      "population": 1
    },
    {
      "name": "金沢",
      "pref": "石川県",
      "population": 2
    },
    {
      "name": "長岡",
      "pref": "新潟県",
      "population": 2
    },
    {
      "name": "鈴鹿",
      "pref": "三重県",
      "population": 1
    },
    {
      "name": "奈良",
      "pref": "奈良県",
      "population": 1
    },
    {
      "name": "米子",
      "pref": "鳥取県",
      "population": 1
    }
  ]
}

温かみのあるkosen10s.jsonができました。茨城多くね?

地図にマッピング

マッピングと言っても、今回は「その都道府県にある高専を卒業して、kosen10sの自己紹介シートを記入した人数」によって色を変えるだけなので、 ここはJSをゴリゴリ書きます。

var kosen10sJson = $.getJSON("./kosen10s.json");

var width = 1200,
    height = 1000;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var color = d3.scale.category20();

var mercator = d3.geo.mercator()
    .center([136.0, 35.6])
    .translate([width / 2, height / 2])
    .scale(1200);

var geopath = d3.geo.path()
    .projection(mercator);

d3.json("pref.json", function (error, jp) {

    for (let i = 1; i < jp.features.length; i++) {
        jp.features[i]["kosen10s_count"] = 0;
        kosen10sJson.responseJSON.items.forEach(item => {
            if (jp.features[i].properties.name_local == item.pref) {
                jp.features[i]["kosen10s_count"] += item.population;
            }
        });
    }

    svg.selectAll("path")
        .data(jp.features)
        .enter().append("path")
        .attr("class", function (d) {
            return d.id;
        })
        .attr("d", geopath)
        .attr("fill", function (d) {
            return `rgb(255,${240 - d.kosen10s_count * 40},${240 - d.kosen10s_count * 40})`
        });
});

結果

こうなりました

f:id:Allajah:20161219002847p:plain

https://allajah.github.io/kosen10s_japan_map/

東北地方・北海道・四国は0ですね。(新潟は東北ではありません)

自己紹介シートに記載してあったところのみカウントしているので、もしかしたらいるかもしれません。 Google DriveAPI叩いて、自己紹介シート読んできてマッピングするとこまでやったら、 http://kosen10s.net に組み込もうかなと思ってます。

さいごに

この記事20:00くらいに書き始めて、23:00くらいには余裕で終わるだろ〜と思ったら、全然終わらなくて結局担当日を過ぎてしまいました。ごめんなさい :bow:
明日はうなすけです!どんな油田ドパドパ話が出てくるのか!お楽しみに!
と書きたかったんですが、今Adventarを見たらうなすけは優秀なので既に記事をあげていました。

qiita.com