Public
Edited
Jan 13, 2023
import { walmarts } from "@observablehq/plot-mapping"
import { nation } from "@observablehq/plot-projections"
import { statesMesh } from "@observablehq/plot-projections"
import { us } from "@observablehq/plot-projections"
import { land } from "@observablehq/plot-projections"
import { world } from "@observablehq/plot-projections"
import { states48 } from "@observablehq/plot-projections"
globe = Plot.marks([
Plot.graticule(),
Plot.geo(land, { fill: "currentColor" }),
Plot.sphere()
])
Plot.plot({
width: 320,
height: 200,
projection: "albers",
marks: [
Plot.geo(statesMesh, { strokeOpacity: 0.5 }), // see appendix for statesMesh and nation
Plot.geo(states48, { strokeWidth: 1.5 })
]
})
globe.plot({
height: 640,
inset: 1,
projection: { type: "orthographic", rotate: [100, -30] }
})
Plot.plot({
width: 960,
height: 150,
marginLeft: 0,
marginRight: 0,
projection: "albers",
fx: { tickFormat: (d) => `${d}’s`, padding: 0 },
facet: {
data: walmarts,
x: (d) => Math.floor(d.date.getUTCFullYear() / 10) * 10
},
marks: [
Plot.geo(statesMesh, { clip: "frame", strokeOpacity: 0.1 }),
Plot.dot(walmarts, {
x: "longitude",
y: "latitude",
r: 1,
fill: "currentColor"
}),
Plot.geo(nation, { clip: "frame" })
]
})
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.
