gennei's blog

IT、読書、日記、メモ

D3.jsでJリーグのスタジアムを日本地図にマッピングしてみた

いまさらながら D3.js が面白そうだったので遊んでみた。

D3.jsとは

d3js.org D3.js - 日本語ドキュメント

D3jsとはデータを可視化するためのライブラリ。折れ線グラフや、ネットワーク図なども簡単に描画できる。

日本地図を描く

f:id:gennei:20151115224633p:plain www.tam-tam.co.jp

tactosh.com

dataisfun.org

サンプルとしては上記のようにたくさんあるのでコピペしていけば作れる。ローカルサーバーが必要になるが、pythonがインストールされていれば 「python -m SimpleHTTPServer」で簡単にローカルサーバーをたてることができる。

Jリーグのスタジアムをマッピングする

書いた日本地図にスタジアムをマッピングしてみた。 f:id:gennei:20151115224622p:plain

これはスタジアムの緯度と経度の情報から円の中心を決めて、指定した半径の円を描画している。

d3.json("stadium.json", function(data) {
  // 円を描く
  d3.select("#geo")
        .append("g").attr("id","circle-g").selectAll("circle")
        .data(data)
        .enter()
        .append("circle");
  // draw red
  d3.selectAll("#circle-g circle")
        .attr("fill", "red")
        .attr("opacity", 1)
        .attr("transform", function(d) {
            var coord = mercator([d["経度"], d["緯度"]]);
      console.log(coord);
            return "translate(" + coord.join(",") + ")";
        })
        .attr("r", 5/scale);
});

スタジアムの緯度、経度のデータはGoogleMaps 日本全国サッカースタジアム ツアー V3のデータをCSVでダウンロードし、Jsonデータに変換して使用している。

ソースコード

github.com

感想

日本地図を画像ではなく描画するのがこんなにも簡単にできるなんて。javascript もほぼ書いたことがないのでコピペだけでこのようなものが作れるのはハードルがかなり下がっているんだなと実感。もう少し動きのあるようなものを作ってみたいので勉強したい。
そして、関東はチームが多いのもあるけどスタジアムたくさんあるんだなとひと目見てわかった。そして地元の島根県Jリーグのチームがないのでスタジアムがないんだなと改めて思った。Jリーグのチームができてもライセンス降りるのかなあ…