Public
Edited
Jun 23, 2024
17 stars
clip = require("polygon-clipping@0.15.7")
mutable r0 = 248.25
{
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])
/* note to self: projection.reflectX has a bug and the polygons' winding order is bad,
resulting in a clipping error when the inverted Caspian crosses South America */
);
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();
}
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
d3 = require("d3@7", "d3-geo-projection@4")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
