D3.jsでJリーガーの出身地マップを作ってみた
D3.jsで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を使う。