map = html`<svg width=${width} height=${height} viewBox="0 0 ${width} ${height}" style="display:block;">
<path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
<path d="${path(land)}"></path>
<path d="${path(outline)}" stroke="#000" fill="none"></path>
<g font-size="10" font-family="sans-serif">
${d3.range(-180, 180 + 1, 90).map(x => svg`
<text text-anchor="middle" transform="translate(${projection([x, 90]) + ""})" y="-6">${formatLongitude(x)}</text>
<text text-anchor="middle" transform="translate(${projection([x, -90]) + ""})" dy="0.71em" y="6">${formatLongitude(x)}</text>`)}
${d3.range(-80, 80 + 1, 10).map(y => svg`
<text text-anchor="start" transform="translate(${projection([180, y]) + ""})" dy="0.35em" x="6">${formatLatitude(y)}</text>
<text text-anchor="end" transform="translate(${projection([-180, y]) + ""})" dy="0.35em" x="-6">${formatLatitude(y)}</text>`)}
</g>
</svg>`
formatLatitude = y => `${Math.abs(y)}°${y < 0 ? "S" : "N"}`
formatLongitude = x => `${Math.abs(x)}°${x < 0 ? "W" : "E"}`
path = d3.geoPath(projection)
projection = d3.geoMiller()
margin = ({top: 30, right: 40, bottom: 30, left: 40})
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dx = x1 - x0;
const k = (dx - margin.left - margin.right) / dx;
const dy = (y1 - y0) * k + margin.bottom + margin.top;
projection.scale(projection.scale() * k);
projection.translate([(dx + margin.left - margin.right) / 2, (dy + margin.top - margin.bottom) / 2]);
projection.precision(0.2);
return Math.round(dy);
}
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-array@2", "d3-geo@2", "d3-geo-projection@3")
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.
