map = html`<svg width=${width} height=${height} viewBox="0 0 ${width} ${height}" style="display:block;">
<path d="${path(sphere)}" fill="${colors[0]}"></path>
<path d="${path(graticule)}" stroke="${colors[3]}" fill="none"></path>
<path d="${path(land)}" stroke="${colors[2]}" fill="${colors[1]}"></path>
<path d="${path(sphere)}" stroke="#000" fill="none"></path>
</svg>`
path = d3.geoPath(projection)
projection = d3[proj]()
.rotate(rotate)
.fitWidth(width, sphere)
.precision(0.1)
height = {
const [[, y0], [, y1]] = d3.geoPath(projection).bounds(sphere);
return y1 - y0;
}
sphere = ({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")
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.
