This interrupted homolosine projection is available as d3.geoInterruptedHomolosine in d3-geo-projection.
Working on the "condensed" version used by Herbert Bayer and the CCA in The World Geographical Atlas.
Will need much more :) See https://github.com/rveciana/d3-composite-projections/tree/master/src
Forked from mbostock's block: Interrupted Homolosine
forked from Fil's block: Interrupted Homolosine Condensed
xxxxxxxxxx
<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;
}
</style>
<svg width="960" height="484"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-geo.js"></script>
<script src="d3-geo-projection.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var projections = [
d3.geoInterruptedHomolosine()
.clipPolygon({type: "Polygon", coordinates: [[[-20,0], [-30,0], [-30,45],[-70,45],[-70,89.9], [180,89.9], [180,0], [180,-89.9], [-20,-89.9], [-20, 0]]]})
.clipExtent([[480,0],[960, 500]])
,
d3.geoInterruptedHomolosine()
.lobes([[[[-180,0],[-100,90],[90,0]]],[[[-180,0],[-160,-90],[-100,0]],[[-100,0],[-60,-90],[-20,0]],[[-20,0],[20,-90],[80,0]],[[80,0],[140,-90],[180,0]]]])
.clipPolygon({type: "Polygon", coordinates: [[[-179,0], [-179,89], [-10,89],
[-10, 60], [-40, 60], [-40,10],
[-30,10],
[-30,-89], [-180,-89], [-180, 0]]]})
//.clipExtent([[0,0],[480, 500]])
];
var paths = projections.map(p => d3.geoPath(p));
var projection = {};
projection.invert = function(p) {
for( var i = 0; i < projections.length; i++) {
var k = projections[i].invert(p);
if (k && paths[i]({type:"Point", coordinates: k}))
return k;
}
}
var graticule = d3.geoGraticule();
var path = function(d) {
return paths.map(p => p(d))
.filter(d => !!d)
.join("") || null;
}
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-110m.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>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js