{
const context = DOM.context2d(width, 500),
path = d3.geoPath().context(context);
const projection = d3.geoEquirectangular();
function draw() {
context.clearRect(0, 0, width, 500);
const A = d3.geoProject(land, projection.reflectX(false).rotate([0, 0, 0])),
B = d3.geoProject(
land,
projection.reflectX(true).rotate([mutable r0, 0, 180])
);
context.beginPath();
path(A);
context.fillStyle = "steelblue";
context.fill();
context.beginPath();
path(B);
context.fillStyle = "lightblue";
context.fill();
context.beginPath();
path({
type: "MultiPolygon",
coordinates: clip.intersection(
A.features[0].geometry.coordinates,
B.features[0].geometry.coordinates
)
});
context.fillStyle = "red";
context.fill();
}
return d3
.select(context.canvas)
.on("mousemove", function (event) {
mutable r0 = d3.pointer(event)[0] * (360 / 960);
draw();
})
.call(draw)
.node();
}