GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v3

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

投稿日:

四国はオーストラリア

example

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

解説

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

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

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。