昨年末(と言っても一週間前)に D3.js のバージョン3 がリリースされたのはお伝えした通りですが、作者 Mike Bostock 自身による “Let’s Make a Map”という、D3.js (ver 3.0)と TopoJSON を使った地図製作方法のチュートリアルがアップされましたので、翻訳の上、下記の通り掲載いたします。



「D3.js と TopoJSONで地図を作る」

訳文中では何点か脚注を追加したほか、マイク氏が説明を端折り過ぎてわかりにくい点(正確に言うと私が理解に苦労した点)の捕捉説明を加筆した箇所もあります(特に後半部分)。そのため冗長になった面もあるとは思いますがご容赦願います。訳文にわかりにくい点、不正確な点などありましたらご指摘ください。

下の表が全体構成と各節のあらましです。目次代わりに使ってください。

  1. データを探す

    地図の元となるデータの探し方を解説。 Natural Earthの紹介とデータダウンロード。

  2. ツール類のインストール

    必要なツールの説明とそのインストール方法。gdal / node.js / TopoJSON 等のインストール方法の説明。

  3. データの変換

    1でダウンロードしたデータから、2でインストールしたツールを使って二つの GeoJSON ファイルを生成する。次に二つの GeoJSON ファイルを結合して一つの TopoJSON ファイル を作る。

  4. データの読込み

    空のテンプレートファイルを作成し、3で生成した uk.json を読み込む。
    この単元までの成果:step-1.html

  5. ポリゴンの表示

    デフォルトの状態の地図ポリゴンの表示。
    ここまでの成果: step-2.html

    いくつかメソッドを適用し、形を整えた地図ポリゴンの表示。
    この単元までの成果: step-3.html

  6. ポリゴンのスタイル設定

    スタイルを設定して国別に色分け。
    この単元までの成果:step-4.html

  7. 境界線の表示

    国境線と海岸線の表示。
    この単元までの成果:step-5.html

  8. 都市名の表示

    都市名(居住地域名)の表示。
    この単元までの成果:step-6.html

  9. 国ラベルの表示

    最後に国ラベルを表示して完成。
    最終的な成果:step-7.html

D3.js がグラフや地図を簡単に作れるツール、という理解でこのチュートリアルを読み始めると、若干戸惑うことになるかもしれません。D3.js は、むしろ「グラフや地図を簡単に作れるツール」を作るためのツール、と理解したほうが良いと思います。

もちろん今回のように一つの地図を作るためにも使えますが、本来的にはローレベルのところから高度な、あるいは多種多様なデータ視覚化を行うための汎用ライブラリと位置づけるべきでしょう。

そのため、D3.jsをフルに活用するためには、HTML、CSS、JavaScriptに対してある程度突っ込んだ理解が必要になります。また、結構膨大な量の API も把握しておかなければなりません。

・・・と脅すようなことを書いてしまいましたが、チュートリアル自体は順を追って作業していけば必ず最後の地図が表示できるとこまで進むように作られています。わかりにくいところは、とりあえずそのままコピペして先に進み、何度か読み直しつつ理解していく、という学習方法でもよいと思います(私自身がそうでした)。

ただし、このチュートリアルは D3.js を使って地図を作るためのチュートリアルですので、D3.js (および TopoJSON )についてはすでに知っている、という前提で書かれています。したがってそうでない人の場合、王道の学習スタイルは、まず以下の順番で基本を身につけた上で本チュートリアルに進むことです。

  1. D3.js公式トップ(日本語)
  2. D3.js基本的概念の習得(三つの小円)(日本語)
  3. 各種チュートリアル(英語/随時日本語翻訳予定)
  4. API解説(英語/日本語翻訳中)
  5. TopJSON概要(日本語)
  6. TopoJSON仕様(日本語)

もちろん上に書いたとおり、ぶっつけで動かしながら、わからないところを調べながら理解していく、というスタイルも当然アリでしょう。その場合は API解説のページが一番役に立つと思います。

なお、本チュートリアルを始める前提として、

  • ローカルPCに node.js がインストールされていること
  • ローカルPCに webサーバがインストールされていること

の二点を満たさなければ例題が動作しません(もちろん、ローカルでなくとも、node.js と webサーバがインストールされていればどこかのサーバ上で作業しても問題ありません)。

Webサーバは、Apache (XAMP含む)でも IIS でも、作者マイク氏お好みのPythonによるサーバでもなんでもかまいません。たぶん node.js でも大丈夫でしょう。フォルダの *.htmlファイルを直接クリックしてブラウザで開いても動作しないことだけはご注意ください。

node.jsは、ネットから落としたジオデータをJavaScript( D3.js )で読み込める json ファイルに変換するために必要です。node.js といっても、REPL で TopoJSON をインストールして簡単な操作をするだけですので特別な知識は必要ありません。linuxだけでなく、Mac や Windows にも簡単にインストールできます。Mac でのインストール方法はチュートリアル内に記載されています。Windowsへのインストールは、たとえば ここあたりをご参照ください(「node.js インストール windows」で適当に検索してみつけたサイトです)。

ただ、中には「D3.js と TopoJSON だけでも大変なのに、この上 nodeも憶えないといけないの?」とか、「俺はとりあえず jsonデータから地図を表示させる仕組みだけを知りたいんだよ!」という人もいるかもしれません。




キューピー三分クッキングではないですが、下記URLに、すでに出来上がったJSONファイル(uk.json)がありますので、これをダウンロードして最初の目次の「4.データの読み込み」のところからスタートすることも可能です。その場合も、目次の「1.データを探す」~「3.データの変換」はざっと目を通しておいた方が良いでしょう( 1~3は、この uk.json を作るための章とも言えます)。

[uk.json] http://ja.d3js.node.ws/blocks/mike/map/uk.json