Public
Edited
Jul 19, 2024
Plot.plot({
inset: 60,
width,
height: width / 1.6,
projection: {
type: "stereographic",
domain,
rotate: [30, 0, 0]
},
marks: [
Plot.graticule(),
Plot.geo(land, {
fill: "bisque",
stroke: "currentColor",
strokeWidth: 0.5
}),
Plot.sphere(),
...(en_route
? [
Plot.geo(ports.at(-1), {
r: 9,
fill: "none",
stroke: "#ec247c",
strokeWidth: 2
}),
Plot.geo(navigations.slice(-1), {
stroke: "#ec247c",
strokeWidth: 2
}),
Plot.geo(navigations.slice(0, -1), {
stroke: "navy",
strokeWidth: 2,
strokeDasharray: "2 6"
})
]
: [
Plot.geo(navigations.toReversed(), {
stroke: (_, index) => (index % 2 === 0 ? "#ec247c" : "navy"),
strokeWidth: 2
})
]),
...(ports.length > 1
? [
Plot.geo(ports, {
r: 3,
fill: "currentColor",
stroke: "white",
strokeWidth: 1
}),
Plot.text(
ports.toReversed(),
Plot.geoCentroid({
text: (d) => d.properties.name,
fontSize: 12,
textAnchor: "start",
dx: 9,
fill: "currentColor",
stroke: "white"
})
)
]
: [])
]
})
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.
