In “Selecting a Map Projection” (Sep. 2012), the National Geographic presented an ocean-centric aspect of an interrupted Mollweide projection.
See also Interrupted Homolosine Oceans.
license: gpl-3.0 | |
border: no | |
height: 484 |
In “Selecting a Map Projection” (Sep. 2012), the National Geographic presented an ocean-centric aspect of an interrupted Mollweide projection.
See also Interrupted Homolosine Oceans.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.stroke { | |
fill: none; | |
stroke: #000; | |
stroke-width: 3px; | |
} | |
.fill { | |
fill: #b7ccbb; | |
} | |
.graticule { | |
fill: none; | |
stroke: #777; | |
stroke-width: 0.5px; | |
stroke-opacity: 0.5; | |
} | |
.land { | |
fill: #fff; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: 0.5px; | |
} | |
</style> | |
<svg width="960" height="484"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var lobes = [ | |
[ | |
[[-180, 0], [-130, 90], [-90, 5]], | |
[[-90, 5], [-30, 90], [60, 5]], | |
[[60, 5], [120, 90], [180, 0]] | |
], | |
[ | |
[[-180, 0], [-120, -90], [-60, -5]], | |
[[-60, -5], [20, -90], [90, -5]], | |
[[90, -5], [140, -90], [180, 0]] | |
] | |
]; | |
var projection = d3.geoInterrupt(d3.geoMollweideRaw, lobes) | |
.rotate([-200, 0]) | |
.fitExtent([[10,10], [width-30, height-10]], {type: "Sphere"}); | |
var graticule = d3.geoGraticule(); | |
var path = d3.geoPath() | |
.projection(projection); | |
var defs = svg.append("defs"); | |
defs.append("path") | |
.datum({type: "Sphere"}) | |
.attr("id", "sphere") | |
.attr("d", path); | |
defs.append("clipPath") | |
.attr("id", "clip") | |
.append("use") | |
.attr("xlink:href", "#sphere"); | |
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("clip-path", "url(#clip)") | |
.attr("d", path); | |
var marker = svg.append("path") | |
.attr("fill", "red") | |
svg.on('mousemove', function() { | |
var mouse = d3.mouse(this); | |
marker.attr("d", path({type:"Point", coordinates: projection.invert(mouse)})); | |
}); | |
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/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("clip-path", "url(#clip)") | |
.attr("d", path); | |
svg.insert("path", ".graticule") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "boundary") | |
.attr("clip-path", "url(#clip)") | |
.attr("d", path); | |
}); | |
</script> |