You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.0 KiB
39 lines
1.0 KiB
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);
|
|
|