var file = 'natural-earth/california.geojson';

d3.json(file, function(error, mapJson) {

    var projection =
        d3.geo.mercator()
            .center([-122, 38])
            .scale(1960)
            .translate([w / 2, h / 2]);

    var path = d3.geo.path().projection(projection);

    svg.selectAll('.subunit')
        .data(mapJson.features)
        .enter().append('path')
            .attr('d', path)
            .attr('stroke', 'lime');

    var buoys = [];
    buoys.push(projection([-122.634, 37.786]));
    buoys.push(projection([-122.839, 37.755]));
    buoys.push(projection([-122.977, 37.996]));

    svg.selectAll('.buoy')
        .data(buoys)
        .enter().append('circle')
            .attr('cx', function(d) { return d[0]; })
            .attr('cy', function(d) { return d[1]; })
            .attr('r', 5)
            .attr('fill', 'crimson');
});

var w = 450;
var h = 450;

var svg = d3.select("body").append("svg")
    .attr("style", "border:1px solid lime")
    .attr("width", w)
    .attr("height", h);