DEMO PAGE
ウェブサイトで地図を扱うときgoogle mapカスタマイズしたり、leaflet.jsを使ったりしてたのですが、
データビジュアルで地図をよりインタラクティブなものにしたいという思いもあり、
今回はd3.jsを使って地図を作ってみました。
Let’s make mapを参考に、地図を作ってみました。
今回使ったライブラリー:
1. データをダウンロードする
Natural Earthという無料で世界地図に関する様々なデータをダウンロードできます。
今回は北海道、本州などと色分けする日本地図を作りたいので、「1:10m Cultural Vectors」から「Admin 0 – Details」にある
Download map subunitsからデータをダウンロードします。
2.データをjsonに書き換える。
JavaScriptでデータを読み込むためにダウンロードしたデータのフォーマットをjsonファイルに書き換えます。
ダウンロードしたデータは以下のようになっています。
.shpファイルを書き換えます。
書き換えのためにはGeospatial Data Abstraction Library.
というライブラリを使います。
ターミナルで以下のことを実行します。
ogr2ogr \
-f GeoJSON \
-where "adm0_a3 IN ('JPN')" \
subunits.json \
ne_10m_admin_0_map_subunits.shp
日本地図のデータをGeoJsonとしてsubunits.jsが出力されます。
出力したJsonファイルはファイルサイズが大きいので、TopoJsonというJsonファイルに書き換えます。
フォーマットはjsonと変わりませんが、ファイルサイズは320KBから53KBと80%以上と削減されます。
ターミナルで以下のことを実行します。
topojson \ --id-property su_a3 \ -p name=NAME \ -p name \ -o jpn.json \ subunits.json
jpn.jsonというファイルが出力されます。
3. javascriptを作成する。
headerに以下のようにしてd3.jsライブラリとtopoJsonライブラリを読み込みます。
<script src="bower_components/d3/d3.js"></script> <script src="bower_components/topojson/topojson.js"></script>
jsonファイルを読み込み, 地図を作成する。
var width = window.innerWidth,
height = window.innerHeight;
if(height < 700){
height = 700
}
var projection = d3.geo.mercator()
.center([130, 40.5])
.scale(1800);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select('body').append("svg")
.attr("width", width)
.attr("height", height);
d3.json('scripts/jpn.json', function(error, output){
svg.selectAll('.subunit')
.data(topojson.feature(output, output.objects.subunits).features).enter().append("path")
.attr('class', function(d){
return 'subunit ' + d.properties.name;
})
.attr('d', path);
});
作成したままだと黒地図になるので、cssで日本地図に色分けをする。
.subunit.Hokkaido {
fill: #0F6177;
}
.subunit.Honshu {
fill: #0B8389;
}
.subunit.Shikoku {
fill: #1BA39C;
}
.subunit.Kyushu{
fill: #16A086;
}
.subunit.Japan{
fill: #1BBC9B;
}
書いたものをブラウザで見ると以下のようになります。
DEMO PAGE
D3.jsではsvgとして出力されるので、jsを付け加えれば、よりインタラクティブにできます。
今回作成し、使用したプログラムファイルはgithub上にアップしているので確認ください。
kenjispecial.wordpress.com 