Public
Edited
Feb 10, 2024
Fork of D3 world map
1 fork
Insert cell
Insert cell
Insert cell
map = htl.html`<svg viewBox="0 0 ${width} ${height}" style="display: block;">
<path d="${path(outline)}" fill="#fff"></path>
<path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
<path d="${path(land)}"></path>
<path d="${path(borders)}" fill="none" stroke="#fff"></path>
<path d="${path(outline)}" fill="none" stroke="#000"></path>
</svg>`
Insert cell
projection = d3.geoEqualEarth()
Insert cell
Insert cell
path = d3.geoPath(projection)
Insert cell
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
Insert cell
outline = ({type: "Sphere"})
Insert cell
graticule = d3.geoGraticule10()
Insert cell
land = topojson.feature(world, world.objects.land)
Insert cell
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
Insert cell
Insert cell
world = FileAttachment("countries-50m.json").json()
Insert cell
map1 = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([37.774, -122.423], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell

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.
Learn more