D3で地図を描こう!

地理情報を用意する

※注意

地理情報を扱うために必要な技術や知識は、あまりに膨大でとても短時間では説明できません

今回は、D3.jsで地図を表示する際に必要な内容に絞って説明することになります。

いろいろすっ飛ばして説明しますので、詳しく知りたい方はキーワード「GIS」や「地理空間情報」などでググってください

地理(空間)情報

空間上の特定の位置を示す情報とセットになった情報

位置を示す情報を持ったデータはほぼすべて地理空間情報と呼べる。
狭義には、地図・空中写真・統計などのデータや研究者や専門家らがGPS等を用いて取得したデータを地理空間情報という。

参照:Wikipedia:地理空間情報

地理(空間)情報の種類

地理(空間)情報のフィル形式

SHAPE形式 ちょっとだけ詳細

SHAPE形式の地理情報は3つのファイルからなる

それぞれのファイルに保存されているデータは以下

この他にも 投影法についての情報を管理する .prjファイルが付属することもあります

GeoJSON形式 例


{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [102.0, 0.5]}, //点(ポイント)情報
      "properties": {"prop0": "value0"} //属性情報
      },
    { "type": "Feature",
      "geometry": {
        "type": "LineString", //線(ライン)情報
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
          ]
        },
      "properties": { //属性情報
        "prop0": "value0",
        "prop1": 0.0
        }
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon", //面(ポリゴン)情報
         "coordinates": [
           [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
             [100.0, 1.0], [100.0, 0.0] ]
           ]
       },
       "properties": { //属性情報
         "prop0": "value0",
         "prop1": {"this": "that"}
         }
       }
     ]
   }

SHAPEファイルはどこで手にいれる?

オープンデータとして様々な地理情報データが公開されているので、それを使わせてもらいましょう

オープンデータのまとめ」の「GISデータ」の項目に、GISデータを配布しているサイトのリンクを集めているので活用してください。

今回使用するデータ

上記2つのデータをD3で使えるようにGeoJSON,CSV形式にそれぞれ変換します。

今回使用するデータセットを作成

まずは、地形データを作成します

都道府県境データをgeoJSONに変換します

変換にはオープンソースのGISソフト「QGIS」を使います

GIS(Geographic Information System)

地理情報システム

コンピュータ上に地図情報やさまざまな付加情報を持たせ、作成・保存・利用・管理し、地理情報を参照できるように表示・検索機能をもったシステム

SHAPEをgeoJSONに変換

  1. QGISにSHAPEファイルを読み込みます
  2. 読み込んだSHAPEファイルの属性情報などを確認
    レイヤパネル→右クリック→属性テーブルを開く
  3. 必要なら簡素化等を行う
    ベクタ→ジオメトリツール→ジオメトリを簡素化する
  4. geoJSON形式で出力
    レイヤ→名前を付けて保存→形式でgeoJSONを選択して保存
  5. 文字コード変換
    出力したgeoJSONファイルをエディタ等で開きUTF8に変換上書きします

作成したgeoJSONデータのチェック

GeoJSON Lint

ブラウザ上でGeoJSONデータをGoogle Map上にプロットしデータの内容を確認できるサービス

データがズレている場合は?

元データ(shapeファイル)をQGISに読み込む際に測地系の指定を間違っていないか確認

geoJSONファイル作成
DEMO

都道府県の人口データを作成します

HTMLからコピペでcsvへ

  1. サイトから人口ランキングのテーブルをコピー
  2. Excelに貼り付け
  3. 不要な要素等を削除、人口セルの書式を数値に変換してcsvで保存
  4. 文字コード変換
    出力したcsvファイルをエディタ等で開きUTF8に変換上書きします

泥臭い作業ですが、最終的に必要なcsvが作れればどんな方法でもOKです

csvファイル作成
DEMO

必要なデータセットが完成しました!

D3で地図を描こう2へ続く

/

#