D3.jsを使って地図をcanvasに描画する

TopoJSONデータを読み込んで、地図をcanvasに描画します。

//topojson（地理）データ読み込み
d3.json("ken.topojson", function(json) {
    draw(json);
});


function draw(json){
    //geoデータ
    var topo = json.objects.ken;


    //プロジェクション設定
    var projection = d3.geo
        .mercator()     //投影法の指定
        .scale(2000)    //スケール（ズーム）の指定
        .translate([500,450]) //表示位置調整
        .center([139.0032936, 36.3219088]); //中心の座標を指定


    //コンテキストを取得
    var context = d3.select("canvas")
        .attr({
            width:"900px",
            height:"900px",
        })
        .node().getContext("2d");

    //パスジェネレーターの生成  
    var path = d3.geo.path()
        .projection(projection)
        .context(context) //コンテキストを指定


    //canvasに地図を描画する
    path(topojson.feature(json, topo));
    context.stroke();


}

example