Interrupted sinusoidal map, each hemisphere split in nine lobes.
D3 v4.
Inspired by Futuri's Interrupted Maps.
forked from mbostock's block: Interrupted Boggs Eumorphic
license: mit | |
border: yes |
Interrupted sinusoidal map, each hemisphere split in nine lobes.
D3 v4.
Inspired by Futuri's Interrupted Maps.
forked from mbostock's block: Interrupted Boggs Eumorphic
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
background: #fcfcfa; | |
} | |
.stroke { | |
fill: none; | |
stroke: #000; | |
stroke-width: 3px; | |
} | |
.fill { | |
fill: #fff; | |
} | |
.graticule { | |
fill: none; | |
stroke: #777; | |
stroke-width: .5px; | |
stroke-opacity: .5; | |
} | |
.land { | |
fill: #222; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var projection = d3.geoInterrupt(d3.geoSinusoidalRaw, | |
[[ // northern hemisphere | |
[[-180, 0], [-160, 90], [-140, 0]], | |
[[-140, 0], [-120, 90], [-100, 0]], | |
[[-100, 0], [ -80, 90], [ -60, 0]], | |
[[ -60, 0], [ -40, 90], [ -20, 0]], | |
[[ -20, 0], [ 0, 90], [ 20, 0]], | |
[[ 20, 0], [ 40, 90], [ 60, 0]], | |
[[ 60, 0], [ 80, 90], [ 100, 0]], | |
[[ 100, 0], [ 120, 90], [ 140, 0]], | |
[[ 140, 0], [ 160, 90], [ 180, 0]] | |
], [ // southern hemisphere | |
[[-180, 0], [-180, -90], [-160, 0]], | |
[[-160, 0], [-140, -90], [-120, 0]], | |
[[-120, 0], [-100, -90], [ -80, 0]], | |
[[ -80, 0], [ -60, -90], [ -40, 0]], | |
[[ -40, 0], [ -20, -90], [ 0, 0]], | |
[[ 0, 0], [ 20, -90], [ 40, 0]], | |
[[ 40, 0], [ 60, -90], [ 80, 0]], | |
[[ 80, 0], [ 100, -90], [ 120, 0]], | |
[[ 120, 0], [ 140, -90], [ 160, 0]], | |
[[ 160, 0], [ 180, -90], [ 180, 0]] | |
]]) | |
.scale(116) | |
.translate([width / 2, height / 2]) | |
.precision(.1); | |
var path = d3.geoPath() | |
.projection(projection); | |
var graticule = d3.geoGraticule(); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
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); | |
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); | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |