data
d3.json("../data/world110.json", function(err, world) {
console.log("data", world)
var countries = topojson.feature(world, world.objects.land);
console.log("countries", countries)
})
projections
var width = 420
var height = 400
var projection = d3.geo.orthographic()
//var projection = d3.geo.albers()
//var projection = d3.geo.mercator()
.scale(170)
.rotate([100,0,0])
.translate([width/2, height/2])
.clipAngle(90);
paths
var path = d3.geo.path()
.projection(projection);
svg.append("path")
.attr("d", path(countries))
.classed("land", true);
graticule
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule()
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
points
var lonlat = [-100, 37.7833];
var xy = projection(lonlat)
svg.append("circle")
.attr({
cx: xy[0],
cy: xy[1],
r: 10
})
navigator.geolocation.getCurrentPosition(function(pos){
console.log(pos);
var coords = [pos.coords.longitude, pos.coords.latitude]
var xy = projection(coords)
svg.append("circle")
.attr({
cx: xy[0],
cy: xy[1],
r: 15,
}).style("stroke", "blue");
})
Top