ここではd3を使って日本地図を表示します。
まずはどのような流れになるかを説明します。
日本地図のデータにはtopojsonというデータ形式のものを使います。これを「解凍」してgeojson形式にします。このgeojsonのデータからpath要素で線を描きます。
topojsonからgeojsonに変換するステップは、最初からgeojsonのデータを使っていれば必ずしも必要がありません。でもtopojsonを使うとデータ容量が圧縮されるので、地理情報のような大きいデータをやりとりする時には便利です。
ステップが多いので、まず結果とコードを紹介します。その後に詳しい説明をします。
目次
結果とコード
結果：
データ：
日本地図のデータであるjapan_topojson.jsonはリンク先にあります。保存する時は右クリックから「別名で保存」などで保存できます。
コード：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body { background-color:LightCyan;}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 600,
height = 500;
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(800);
// geojsonからpath要素を作るための設定。
var geopath = d3.geo.path()
.projection(mercator);
// topojsonファイルの読み込み
d3.json("japan_topojson.json", function(error, jp) {
console.log(jp);
// topojsonからgeojsonへの変換。
var geoJp = topojson.feature(jp, jp.objects.ne_10m_admin_1_states_provinces);
console.log(geoJp);
svg.selectAll("path")
.data(geoJp.features) // geojsonのすべての県の座標データを読み込む。
.enter().append("path")
.attr("class", function(d) { return d.id; })
.attr("d", geopath) // geojsonからpath要素に変換する。
.attr("fill", function(d){ return color(d.geometry.coordinates); }); // idがないので、各県の座標リストに基づいて色を変える。
});
</script>
</body>
</html>
では詳しくコードを説明します。
topojsonプラグインを読み込む
普段d3を使うときに読み込むスクリプトタグの下に、topojsonプラグインを使うためのスクリプトタグを書いて読み込みます。
<script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script>
地図の投影図法を設定する
地球は丸いので、平らなモニターに映すには何かの方法で歪めたり切り取ったりする必要があります。いろいろな投影法がありますが、ここではおなじみのメルカトル図法を使います。やり方は以下の通り。
var mercator = d3.geo.mercator()
.center([ 136.0, 35.6 ])
.translate([width/2, height/2])
.scale(800);
- d3.geo.mercator()でメルカトル図法を選択。
- .center([経度,緯度])で、地図としての中心を決める。[ 136.0, 35.6 ]はおおまかな日本の中心部なので、ここが地図上の中心として計算してくれます。
- .translate([x.y])で、画面上の中心を決める。ここでは横幅widthの半分、縦幅heightの半分なので、真ん中に位置させます。
- .scale()でどれくらい拡大して表示するかを決める。これは表示される結果を見ながらお好みで調節すると良いと思います。
geojsonからpathを作るためのpathジェネレータを設定する
まだtopojsonからgeojsonに変換していませんが、後で使うために、pathジェネレータの設定を作ります。後にこれにgeojsonを入れると、線を描くpathの情報が作られることになります。
var geopath = d3.geo.path() .projection(mercator);
- d3.geo.path()が本体。
- .projection()の中に、先ほど作ったメルカトル図法の設定を入れる。これで、地図データからpathを作る時の投影法が決まります。
日本地図のtopojsonファイルを読み込む
さていよいよデータを読み込みます。と言ってもtopojsonというのは結局はjsonファイルなので、d3.jsonを使って読み込むだけです。
topojsonのデータ内容は若干入り組んでいるので、読み込んだら最初にconsole.log()などで、データがどうなっているか確かめると良いでしょう。
d3.json("japan_topojson.json", function(error, jp) {
console.log(jp);
}
また、これより下のコードはd3.json(“”,function{ ~~ }) の ~~ 内に入れることに注意してください。この関数の外では、直接にはこのデータが使えないからです。
topojsonからgeojsonに変換する
さて、読み込んだtopojsonファイルをconsole.log()で確かめてみると、下のようなデータ構造になっています。
いろいろな情報がありますが、geometriesというオブジェクトの中に、地理情報が入っています。したがって、このオブジェクトの一段上のキーである”ne_10m_admin_1_states_provinces”を使います。
topojsonのこの部分をgeojsonに変換するには、topojson.feature()の中に、以下のようにデータを入れます。
var geoJp = topojson.feature(jp, jp.objects.ne_10m_admin_1_states_provinces);
geojsonに変換した結果であるgeoJpをconsole.log(geoJp);で見てみると、以下のように、featuresというオブジェクトの中にオブジェクトがたくさん入っています。それぞれのオブジェクトのtypeはfeatureになっています。
featuresオブジェクトが入れ物、その中のfeatureオブジェクトは各県を表しています。featureのgeometriesの中のcoordinatesに、各県の境界線を示す座標がまとめられています。
geojsonを使って日本地図のpathを描く
pathにデータをバインドするために、.data(geoJp.features)で、日本全国の県の境界線を含んだfeaturesをデータに入れます。
あとはほぼ普通のpath要素の作成ですが、attr(“d”, geopath)で、先ほど作ったgeojsonからpathを作るpathジェネレータのgeopathを入れます。これによって、取り入れたgeojsonのデータをメルカトル図法で投影したpathデータに変換できます。
さらにオプションとして、境界線の座標の違いによって色を変えています。この座標リストは県によって異なるので、県ごとに色が変わります。
svg.selectAll(".subunit")
.data(geoJp.features)
.enter().append("path")
.attr("class", function(d) { return d.id; })
.attr("d", geopath)
.attr("fill", function(d){ return color(d.geometry.coordinates); }); // idがないので、各県の座標リストに基づいて色を変える。