チュートリアル「D3.jsとTopoJSONで地図を作る」をやってみる

地図を描く

d3.jsを調べていてやってみたかったことの一つとして地図を描くことなので、D3.js と TopoJSON で地図を作るにチャレンジしてみます。

準備

地図を描くためのデータを準備します。

gdalをインストール

GDAL(Geospatial Data Abstraction Library （地理空間データ抽出ライブラリ）) と topojsonを使うために今回は Centos7.1を使います。

gdalはは公式サイトのバイナリダウンロード DownloadingGdalBinaries – GDAL にがあるということなので、ここからリポジトリのページ http://elgis.argeo.org/ に行ってみると RHEL/CentOSは6まででした。バイナリダウンロードのページを見るとFedoraには Fedora, since release 7, includes GDAL binariesと書かれているので、試しにyum searchしてみます。

$ sudo yum search gdal
読み込んだプラグイン:fastestmirror
Loading mirror speeds from cached hostfile
 * base: www.ftp.ne.jp
 * epel: mirrors.hustunique.com
 * extras: www.ftp.ne.jp
 * updates: www.ftp.ne.jp
============================== N/S matched: gdal ===============================
gdal-devel.x86_64 : Development files for the GDAL file format library
gdal-doc.noarch : Documentation for GDAL
gdal-java.x86_64 : Java modules for the GDAL file format library
gdal-javadoc.noarch : Javadocs for gdal
gdal-libs.x86_64 : GDAL file format library
gdal-perl.x86_64 : Perl modules for the GDAL file format library
gdal-python.x86_64 : Python modules for the GDAL file format library
gdal.x86_64 : GIS file format library

どこかのリポジトリに含まれているので今度はyum searchをしてみます。

$ sudo yum list gdal
読み込んだプラグイン:fastestmirror
Loading mirror speeds from cached hostfile
 * base: www.ftp.ne.jp
 * epel: mirrors.hustunique.com
 * extras: www.ftp.ne.jp
 * updates: www.ftp.ne.jp
インストール済みパッケージ
gdal.x86_64                          1.11.2-2.el7                          @epel

EPEL に入っていました。yum install gdalをすると ogr2ogr を使えるようになります。

topojsonをインストール

こちらは node.jsがインストールされていたので、 sudo npm install -g topojson でインストールします。

イギリスを描画する

チュートリアルにそって、HTMLを作っていきます。　 http://ja.d3js.node.ws/blocks/mike/map/#displaying-polygons のシミが表示できました。

「ポリゴンのスタイル設定」ができなかった

イギリスを構成する国にstyleで色をつけられませんでした。デバッガで調べると.attr("class", function(d) { return "subunit " + d.id; })の戻りが「subunit undeifed」でした。undefinedとなってしまうということは、idプロパティが無いためです。実際に「uk.json」を見るとidがありませんでした。

uk.jsonを作る過程を見直しながらjsonの内容を見ていくとidについての説明に行き着きます。

最後に、出来上がった subunits.json と places.json の二つの GeoJSON ファイルを結合して一つの TopoJSON ファイル、uk.json にします。このステップではソースの細かい不一致の修正も行います。 NAME プロパティを name に改め、また、オブジェクトID に su_a3 プロパティを使うようにさせます。

subunits.jsonを見ていくと、su_a3は大文字でした。なのでtopojsonでデータを作り直します。 --id-propertyプロパティの引数を大文字にするとuk.jsonにidが出力されるので国に色をつけられます。

topojson \
    --id-property SU_A3 \
    <b>-p NAME=name</b> \
    -p name \
    -o uk.json \
    subunits.json \
    places.json

「都市名の表示」ができなかった

国に色をつけられたので次は都市名の表示になりました。チュートリアルの従ってソースを変更すれば都市の位置を表す「●」がでてくるはずが駄目でした。国の色と同じで、uk.jsonを見るとplacesがありませんでいた。国の色と同じであれば、places.js が疑わしいので確認してみるとしっかりと大文字でした。uk.jsonを作り直します。

topojson \
    --id-property SU_A3 \
    -p NAME=name \
    -p <b>NAME</b> \
    -o uk.json \
    subunits.json \
    places.json

それに応じて.text()も.text(function(d) { return d.properties.NAME; });に修正しました。

「国ラベルの表示」が表示できませんでした

都市名と同じなので、以下省略。

「はい!。先生。できました!!。」

f:id:huruyosi:20160204232254p:plain

都市の位置を表す「●」が大きいのを除けばチュートリアルどおりの結果になりました。

次は日本地図

チュートリアルをこなしただけなので、確認のために日本地図を作ります。

huruyosi.hatenablog.com

huruyosi’s blog

プログラミングとかインフラとかのメモです。