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

最終更新日

以前、svgで地球儀を描き回転させるという記事を書きましたが、その記事についてお問い合わせいただき、メールにて返信したところmailer-daemonさんに「次の受信者への送達は、恒久的に失敗しました。メールアドレスが存在しません」と言われてしまって返信できなかったのでブログの記事として掲載しておきます。

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

右に23.4度傾けて表示しています。
グループ(g)要素のtransform属性でrotateを指定し全体を傾けています。

サンプル

example

topojsonについて

topojsonはgeojsonに比べると効率のよいデータ形式なのでファイルサイズが小さくて済むのですが、最終的にはtopojson.jsを使ってクライアント側でgeojson形式に戻して使う仕様になっています。
なので、topojsonデータが用意できない時はgeojsonのままでも問題ありません。
featuresプロパティの中身を、パスジェネレータに渡してあげれば後はD3がパスデータに変換してくれます。

Widonws端末しかなくて、それでもgeojson形式のデータをtopojson形式のデータに変換したいときは、mapshaperというWebサービスを使うという方法もあります。