D3.j3でJリーガーの出身地マップを作ってみました。
もっとも多いのは東京都の199人で、もっとも少ないのは…
高知県の1名でした。なかなかおもしろい。
こちらのページで実際に試せます。
出身の選手数が多いほど濃い色で表示され、マウスオーバーすると都道府県名・出身者数・選手名がツールチップで表示されます。
ソースコードはこちらです。プログラム的には、
などがトピックスでしょうか(というか、自分が勉強したことですが)
いくつかD3.jsでデータの見える化を試してみましたが、D3に食わせるデータを準備するところ、スクレイピングだったり、クレンジング、データの編集・加工などがいちばん大変かもしれません。(機械学習でも同じような苦しみがありますよね…)
以下は、地図情報の準備手順なのですが、まとまっておらず自分用の覚書です。
今回はNatural Earthのデータを利用(Admin 1 – States, Provinces)
ShapeFileからGeoJSON形式に変換します。
npm install -g topojson
brew install gdal
brew install node
Natural EarthからダウンロードしたShapefileは日本以外の情報も含まれており、GeoJSON形式へ変換する際に、データの絞り込みができるogr2ogrを使う。
ogr2ogrが含まれるGDAL: GDAL - Geospatial Data Abstraction Libraryをインストール。
|
|
実行時の演算を減らすため、事前にプロジェクションを適用する。
|
|
生成されたjapan.jsonからSVGを生成して表示を確認する。
|
|
GeoJSON形式からTopoJSON形式に変換する。
geo2topo -p name -p name_local -p latitude -p longitude -o japan.json pref.json
このサイトはオープンソースの静的サイトジェネレーターHugoで制作しています。