d3.js - D3.js での地理座標のスケーリング

Question

各座標に円を描くのが好きです。width、height、およびのみを使用しcoordinatesて、座標をスケーリングするにはどうすればよいですか? 私は D3.js に非常に慣れていないので、プロジェクション部分で何か間違っていると思います。

var width = 200,
    height = 200;
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var coordinates = [ [43.08803611,-79.06312222], 
                    [43.09453889,-79.05636667] ];

var group = svg.append('g');

var projection = d3.geo.mercator()
                        .translate([width,height]);

var projectedCoordinates = [];
for (var i=0; i<coordinates.length; i++) {
    projectedCoordinates[i] = projection(coordinates[i]);
}

group.selectAll("circle")
    .data(projectedCoordinates)
    .enter()
    .append("circle")
    .attr("r",4)
    .attr("cx", function(d){ return d[0]; })
    .attr("cy", function(d){ return d[1]; });