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>`
projection = d3.geoEqualEarth()
path = d3.geoPath(projection)
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;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
world = FileAttachment("countries-50m.json").json()
Plot.plot({
marks: [
Plot.areaY(weather.slice(-365), {x: "date", y1: "temp_min", y2: "temp_max", curve: "step"})
]
})
Plot.plot({
x: {
type: "log"
},
marks: [
Plot.arrow(citywages, {
x1: "POP_1980",
y1: "R90_10_1980",
x2: "POP_2015",
y2: "R90_10_2015",
bend: true
})
]
})
Plot.plot({
facet: {
data: penguins,
x: "species"
},
marks: [
Plot.frame(),
Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"})
]
})
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.
