Maps — and other representations of the world.
Public
Edited
May 13, 2023
4 forks
23 stars
show = (projection, frame) => compose === "side by side" ?
htl.html`<div style="display:flex; justify-content: space-between">
${planar(projection, frame)}
${spherical(projection, frame)}
`
:
htl.html`
${mix(projection, frame)}
`
planar = (projection, frame) =>
Plot.plot({
width: 0.49 * width,
height: 0.49 * width * (projection === "equal-earth" ? 0.5 : 1),
projection,
marks: [
Plot.voronoiMesh(points, {
clip: "sphere",
strokeOpacity: 1,
strokeWidth: 0.5
}),
Plot.dot(points, { r: 1, fill: "black" }),
frame ? Plot.frame({ strokeWidth: 1.5 }) : Plot.sphere()
],
caption: "Planar"
})
spherical = (projection, frame) =>
Plot.plot({
width: 0.49 * width,
height: 0.49 * width * (projection === "equal-earth" ? 0.5 : 1),
projection,
marks: [
Plot.geo(d3.geoVoronoi().cellMesh(points), {
clip: "sphere",
strokeOpacity: 1,
strokeWidth: 0.5
}),
Plot.dot(points, { r: 1, fill: "black" }),
frame ? Plot.frame({ strokeWidth: 1.5 }) : Plot.sphere()
],
caption: "Spherical"
})
mix = (projection, frame) =>
Plot.plot({
width: 0.49 * width,
height: 0.49 * width * (projection === "equal-earth" ? 0.5 : 1),
projection,
marks: [
Plot.voronoiMesh(points, {
clip: "sphere",
strokeOpacity: 1,
strokeWidth: 0.5,
stroke: "red"
}),
Plot.geo(d3.geoVoronoi().cellMesh(points), {
clip: "sphere",
strokeOpacity: 1,
strokeWidth: 0.5,
stroke: "blue"
}),
Plot.dot(points, { r: 1, fill: "black" }),
frame ? Plot.frame({ strokeWidth: 1.5 }) : Plot.sphere()
],
caption: htl.html`<span><span style="color: red">Planar</span> — <span style="color: blue">Spherical</span>`
})
d3 = require("d3-geo-voronoi@2")
import {points} from "@d3/world-airports-voronoi"
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.
