preclip = {
// Pre-clipping happens independently of the projection's rotate.
// If we want it to happen at the correct location (given in “Earth coordinates”)
// we need to rotate the polygon manually
var rotate = d3.geoRotation(projection.rotate());
var P1rotated = {type: "Polygon", coordinates: [ P1.coordinates[0].slice().map(rotate) ]};
return d3.geoClipPolygon(P1rotated);
}
P1 = ({type:"Polygon", coordinates:[ [ [ 30, 60 ], [ 90, 60 ], [ 90, 30 ], [ 30, 30 ], [ 30, 60 ] ] ]})
P2 = ({type:"Polygon", coordinates:[ [ [ 45, 75 ], [ 75, 75 ], [ 75, 15 ], [ 45, 15 ], [ 45, 75 ] ] ]})
function map(projection) {
const height = width / 2;
const context = DOM.context2d(width, height);
projection.preclip(preclip);
projection.fitExtent([[width/6,height/6],[width*5/6, height*5/6]], {type:"Sphere"});
var path = d3.geoPath(projection, context);
context.clearRect(0,0,width, width/2);
context.beginPath(), path(P1), context.fillStyle = "lime", context.fill();
context.beginPath(), path(P2), context.fillStyle = "cyan", context.fill(), context.stroke();
projection.preclip(d3.geoClipAntimeridian)
context.globalAlpha = 0.3;
context.beginPath(), path(P1), context.fillStyle = "lime", context.fill();
context.beginPath(), path(P2), context.fillStyle = "cyan", context.fill();
context.beginPath(), path(d3.geoGraticule()()), context.strokeStyle = "#ccc", context.stroke();
context.globalAlpha = 1;
return context.canvas;
}
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.
