The Mercator projection is available as d3.geoMercator in d3-geo.
forked from mbostock's block: Spherical Mercator
forked from anonymous's block: Spherical Mercator
license: gpl-3.0 | |
height: 960 | |
border: no |
The Mercator projection is available as d3.geoMercator in d3-geo.
forked from mbostock's block: Spherical Mercator
forked from anonymous's block: Spherical Mercator
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.stroke { | |
fill: none; | |
stroke: #000; | |
stroke-width: 3px; | |
} | |
.fill { | |
fill: #fff; | |
} | |
.graticule { | |
fill: none; | |
stroke: #777; | |
stroke-width: 0.5px; | |
stroke-opacity: 0.5; | |
} | |
.land { | |
fill: #222; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: 0.5px; | |
} | |
.circle { | |
stroke: red; | |
fill: red; | |
fill-opacity: 0.2; | |
} | |
</style> | |
<svg width="960" height="960"></svg> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="https://unpkg.com/topojson-client@2"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var projection = d3.geo.mercator() | |
.scale((width - 3) / (2 * Math.PI)) | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path() | |
.projection(projection); | |
var graticule = d3.geo.graticule(); | |
var EARTH_RADIUS = 3959; // mean radius in miles | |
var radiusMi = 50; // radius to be drawn in miles | |
var radiusDeg = radiusMi / EARTH_RADIUS * 90; // radius in degrees for circle generator | |
var circle = d3.geo.circle().angle(radiusDeg).origin(d => d); | |
var centerPoints = d3.merge(d3.range(-180, 180, 10).map(lon => | |
d3.range(-80, 90, 10).map(lat => [lon, lat]))); | |
console.log(centerPoints); | |
svg.append("defs").append("path") | |
.datum({type: "Sphere"}) | |
.attr("id", "sphere") | |
.attr("d", path); | |
svg.append("use") | |
.attr("class", "stroke") | |
.attr("xlink:href", "#sphere"); | |
svg.append("use") | |
.attr("class", "fill") | |
.attr("xlink:href", "#sphere"); | |
svg.append("path") | |
.datum(graticule) | |
.attr("class", "graticule") | |
.attr("d", path); | |
svg.selectAll(".circle") | |
.data(centerPoints) | |
.enter().append("path") | |
.datum(circle) | |
.attr("class", "circle") | |
.attr("d", path); | |
d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) { | |
if (error) throw error; | |
svg.insert("path", ".graticule") | |
.datum(topojson.feature(world, world.objects.land)) | |
.attr("class", "land") | |
.attr("d", path); | |
svg.insert("path", ".graticule") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "boundary") | |
.attr("d", path); | |
}); | |
</script> |