【D3.js】 SVGで地球儀を描く

最終更新日

回転させるのも簡単、そうD3ならね。
d3glob

example

データはNaturalEarthの「Admin 0 – Countries」から。
見づらくなるので南極大陸には消えていただいた。
消し方は、ダウンロードしたsahpeデータを Quantum GISに取り込んで、メニューの「レイヤー」から「属性テーブルのオープン」を選択。
属性テーブルの中から「sovereignt」の値が「Antractica」になっている行を選択し、下のほうにあるアイコンから「選択部分を反転する」をクリック。
qgisdelete
南極大陸以外が選択されているのを確認して「レイヤー」から「選択部分をベクタファイルとして保存する」をクリック→「Geo JSON」形式で保存。
一応topojsonに変換して軽量化。

以上で、地図データ作成終了。
あとは、D3の「Geo Projections」機能を使って表示するだけ。
この辺のデータ作成については、過去の記事に詳細を載せているので興味ある方はこちらを。

サンプルコード

関連

地軸を傾けながらSVGで地球儀を表示する