今回は、新潟県の地図を描写してみました。
以前に日本地図にグラフを乗せたりして遊んでいましたが、今回は新潟県のみを表示させてみます。
できたのはこれ。
作成の流れは、おおまかに3ステップ。
- 地図データをダウンロード
- TopoJSONに変換
- D3.jsで描写
「D3.jsとTopoJSONで地図を作る」これに沿ってやってみます。
基本的にこの通りにやればできるので、以下は自分用のメモのつもりで。
1.地図データをダウンロード
国土数値情報ダウンロードサービスから新潟県の地図データをダウンロードします。
政策区域→行政区域→新潟県→N03-150101_15_GML.zip
最新の平成27年のデータをダウンロードしました。
6個くらいファイルがダウンロードされますが、使うのはShapefileだけ。
今回はこれ。「N03-15_15_150101.shp」
2.TopoJSONに変換
TopoJSONは、D3で地理データを扱うために策定されたGeoJSONの拡張形式らしいです。
うーん、あんまよくわかってないw
ダウンロードした「N03-15_15_150101.shp」を、ひとまずGeoJSONに変換し、最終的にTopoJSONに変換します。
まずは、GDALのogr2ogrコマンドで、ShapefileをGeoJSONに変換。
このコマンドが使えるように準備していきましょう。
macであれば、Homebrewでインストール可能とのこと。
インストールしたらターミナルでコマンド入力していきます。
- GDALのインストール
brew install gdal - TopoJSONのインストール
npm install -g topojson - Shapefileの保存先に移動します。
cd /Users/〇〇/Documents/N03-20150101_15_GML - Shapefile→GeoJSON
ogr2ogr -lco “ENCODING=UTF-8” -f geoJSON niigata.geojson N03-15_15_150101.shp
※ここでは、ついでにエンコードをUTF-8に変換しました。
これで、niigata.geojsonが生成されているはずです。
“–where”を使って、いらない情報をフィルタリングできるみたいなんですが、今回は、どの情報を削ればいいのかわからないので、使わずに変換しました。
さて、GeoJSONをTopoJsonに変換していきます。
Node.jsのパッケージとして用意されたものを利用します。
Node.js は Homebrew でインストールがなぜか上手く行かなかったので、公式から。
- GeoJSON→TopoJSON
topojson -o niigata.json niigata.geojson
はい、これでTopoJSONのファイルができました。
完成したniigata.jsonをD3.jsで読み込んでいきます。
3.D3.jsで描写
「D3.jsとTopoJSONで地図を作る」に従えば、地図の描写は、簡単にいくかと思いきや。
引っかかったのはここ。ファイル内のどこを参照すればいいのかわからんかったのです。
1 |
var geoN = topojson.feature(ni, ni.objects.niigata); |
TopoJsonの中のジオメトリオブジェクトを読み込む必要があるらしいのだけど。。。コンソールでオブジェクトを表示して目的のデータを探します。
ni.objects.niigataを読みこめば良いみたい、と判断するのに結構時間がかかっちゃいました。
できた。
ここに棒グラフとか乗っけても面白そうだし、市町村別に塗り分けるのも面白そう。
各地の気温を取得して、ヒートマップ的にしてみるとか。
表示がちと重い気がします。TopoJsonの中身を見て、削れるところは削ってしまったほうが良さげなのかな?
コメントは受け付けていません。