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

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

解説

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

    var tmp = australia.features[0].geometry.coordinates[1][0];
    var ausPointLength = tmp.length;
    australia.features[0].geometry.coordinates = [[tmp]];

    tmp = [];
    shikoku.features[0].geometry.coordinates[0][0].forEach(function(d, i){
        tmp.push([d[0]-0.00001,d[1]-0.00001]);
        tmp.push([d[0]+0.00001,d[1]+0.00001]);
        
        if(i%3==0){
            tmp.push([d[0]-0.00001,d[1]-0.00001]);
            tmp.push([d[0]+0.00001,d[1]+0.00001]);
        }
    });
    
    while(tmp.length != ausPointLength){
            tmp.push(tmp[tmp.length-1]);
    }
    
    shikoku.features[0].geometry.coordinates = [[tmp]];

var tmp = australia.features[0].geometry.coordinates[1][0];

var ausPointLength = tmp.length;

australia.features[0].geometry.coordinates = [[tmp]];

tmp = [];

shikoku.features[0].geometry.coordinates[0][0].forEach(function(d, i){

tmp.push([d[0]-0.00001,d[1]-0.00001]);

tmp.push([d[0]+0.00001,d[1]+0.00001]);

if(i%3==0){

tmp.push([d[0]-0.00001,d[1]-0.00001]);

tmp.push([d[0]+0.00001,d[1]+0.00001]);

}

});

while(tmp.length != ausPointLength){

tmp.push(tmp[tmp.length-1]);

}

shikoku.features[0].geometry.coordinates = [[tmp]];

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

解説

投稿者: shimizu