D3.jsを使って四国をオーストラリアにしてみた。

最終更新日

四国はオーストラリア

example

最近のテレビでは四国がオーストラリアになっていたりするらしいですね。そういった地図の発注がいつきても困らないようにD3を使って四国をオーストラリアにしてみました。

解説

本州(四国抜き)、四国、オーストラリア、3つのgeojsonを用意し、パスとして描画しています。
詳しいソースコードはbl.ocks.orgの方で見ていただくとして、今回のポイントは四国のポリゴンとオーストラリアのポリゴンの頂点を無理やり同じ数にしているところです。
こうすることで、四国からオーストラリアの形へと遷移(トランジション)させた時に自然なアニメーションに近づきます。

D3のGeo streem機能やattrTweenなどを使うと、もっとスマートに補完する方法があるようなのですが、めんどくさかったので力技で解決しました。
スマートな方法については、理解できたらそのうち書きます。

シェアする