D3.jsで地図の描画
データのビジュアライゼーションで地図にのせたいところがあったので、
D3.jsを使って地図をかいてみた。
参考、というよりも以下の内容をそのままやってみた感じです。
書いたコードはGitHubに。
shimpeiws/d3-map@GitHub
データの用意
データは国土数値情報のものを使います。
国土数値情報
今回は広島県のデータを使います。
GeoJSONへの変換
ダウンロードしてきたフォルダ内の、.shpのファイルをGeoJSONに変換します。
GDALというライブラリをHomebrewでインストール。
ogr2ogrコマンドを使います。
$ brew install gdal
インストールが終わったら...
$ which ogr2ogr /usr/local/bin/ogr2ogr
パスも通っているようなので、使ってみます。
$ ogr2ogr -f GeoJSON hiroshima.json N03-13_34_130401.shp
「hiroshima.json」ができました!
中身は緯度・経度情報が頂点座標のように並んでいるようなかんじでしょうか。
D3.jsで描画
コードは参考サイトそのまま。
1つだけ細かくはまったのは、
5行目で変数のgに空オブジェクトを追加しておかないと、
JavaScriptにコンパイルしても、varがつかなくなってしまうところ。
できあがりはこんなかんじ
GitHub Pages
静的なものはGitHub Pagesで見れるようにしておくのがイマドキな気がするので、
GitHub Pagesを使ってみた。
「gh-pages」というブランチを作って、pushすれば良いみたい。
$ git checkout -b "gh-pages" $ git push -u origin gh-pages
今回の出来上がりはこちらで見れます。
しかし、自分の環境からだと、
FireFoxとSafariでは見れるけど、Chromeで見れない…
[参考]
GutHub Pagesの使い方
