map = {
const vx = 0.001, vy = -0.001;
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.canvas.style.width = "100%";
while (true) {
const t = performance.now();
projection.rotate([vx * t, vy * t]);
context.save();
context.beginPath();
projection.precision(0.2);
path(graticule);
context.globalAlpha = 0.1;
context.stroke();
context.beginPath();
projection.precision(0);
path(land);
context.globalAlpha = 1;
context.fill();
context.beginPath();
context.lineWidth = 2;
context.arc(width / 2, height / 2, width / 2 - inset, 0, 2 * Math.PI, false);
context.stroke();
context.restore();
yield context.canvas;
context.clearRect(0, 0, width, height);
}
}
projection = d3.geoOrthographic().fitExtent([[inset, inset], [width - inset, height - inset]], outline)
inset = 20
width = 960
height = 960
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
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.
