projection = d3.geoAirocean()
map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.translate(width / 2, height / 2);
context.rotate(Math.PI / 2);
context.translate(-height / 2, -width / 2);
context.save();
context.beginPath(), path(outline), context.clip(), context.fillStyle = "#fff", context.fillRect(0, 0, width, height);
context.beginPath(), path(graticule), context.strokeStyle = "#ccc", context.stroke();
context.beginPath(), path(land), context.fillStyle = "#000", context.fill();
context.restore();
context.beginPath(), path(outline), context.strokeStyle = "#000", context.stroke();
return context.canvas;
}
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitHeight(width, outline)).bounds(outline);
const dx = Math.ceil(x1 - x0);
const dy = Math.ceil(y1 - y0), l = Math.min(dx, dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dx;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3-geo@2", "d3-geo-polygon@1")
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.
