D3.jsでJリーガーの出身地マップを作ってみた

D3.j3でJリーガーの出身地マップを作ってみました。

もっとも多いのは東京都の199人で、もっとも少ないのは…

高知県の1名でした。なかなかおもしろい。

こちらのページで実際に試せます。

出身の選手数が多いほど濃い色で表示され、マウスオーバーすると都道府県名・出身者数・選手名がツールチップで表示されます。

ソースコードはこちらです。プログラム的には、

• TopoJSON形式の地図データ表示
• 複数JSONファイルの扱い(Promise.allを使用)
• 都道府県ごとのツールチップ設定（表示はTippy.jsを使用）
• d3.scaleLinearを用いた表示色の制御

などがトピックスでしょうか（というか、自分が勉強したことですが）

いくつかD3.jsでデータの見える化を試してみましたが、D3に食わせるデータを準備するところ、スクレイピングだったり、クレンジング、データの編集・加工などがいちばん大変かもしれません。（機械学習でも同じような苦しみがありますよね…）

以下は、地図情報の準備手順なのですが、まとまっておらず自分用の覚書です。

地図情報の準備(覚書)

地形ファイルの入手

• 国土数値情報（日本限定、ライセンスに注意）
  • http://nlftp.mlit.go.jp/ksj/index.html
• Natural Earth（世界全体、ライセンスフリー。ただし日本国土の国境の扱いが日本政府の方針と異なるケースがある）
  • http://www.naturalearthdata.com/
    • http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_1_states_provinces.zip

今回はNatural Earthのデータを利用(Admin 1 – States, Provinces)

GeoJSON形式への変換

ShapeFileからGeoJSON形式に変換します。

関連ツールのインストール

npm install -g topojson
brew install gdal
brew install node

Natural EarthからダウンロードしたShapefileは日本以外の情報も含まれており、GeoJSON形式へ変換する際に、データの絞り込みができるogr2ogrを使う。

ogr2ogrが含まれるGDAL: GDAL - Geospatial Data Abstraction Libraryをインストール。

1
2
3

brew install gdal

ogr2ogr -f GeoJSON -where "geonunit='Japan'" temp.geojson ne_10m_admin_1_states_provinces.shp

実行時の演算を減らすため、事前にプロジェクションを適用する。

1
2
3

npm install -g d3-geo-projection

geoproject 'd3.geoMercator().rotate([180, 0]).fitSize([960, 960], d)' < temp.geojson  > japan.json

生成されたjapan.jsonからSVGを生成して表示を確認する。

1

geo2svg -w 960 -h 960 < japan.json > japan.svg

TopoJSON形式への変換

• GeoJSON フォーマット仕様

GeoJSON形式からTopoJSON形式に変換する。

geo2topo -p name -p name_local -p latitude -p longitude -o japan.json pref.json

作成したTopoJSON

• 日本地図(TopoJSON)