function interpolate(I, width, height, X, Y) {
const L = new Float32Array(width * height);
const W = new Float32Array(width * height);
for (const i of I) L[(X[i] | 0) + width * (Y[i] | 0)]++;
for (let g = 1; g <= 7; ++g) {
d3.blur2({ data: L, width, height }, 2 ** (g - 1));
for (let i = 0; i < L.length; ++i) W[i] += L[i] * g * g;
}
const n = 1 / d3.max(W);
for (let i = 0; i < W.length; ++i) W[i] *= n;
return W;
}
map = ({ points, scheme = "viridis" }) =>
Plot.plot({
width: 490,
height: 943,
inset: 20,
insetTop: 5,
projection: { type: "reflect-y", domain: land[0] },
color: { domain: [0, 1], scheme, reverse: true, type: "sqrt" },
marks: [
Plot.frame({ fill: "oklch(90% 0.03 180deg)" }),
Plot.geo(land, { stroke: "oklch(95% 0.02 180deg)", strokeWidth: 18 }),
Plot.raster(points, {
interpolate,
x: "x",
y: "y",
fill: 0,
clip: land[0]
}),
Plot.contour(points, {
interpolate,
x: "x",
y: "y",
value: 0,
stroke: "oklch(20% 0.03 180deg)",
strokeWidth: 0.5,
clip: land[0]
}),
Plot.geo(land, { strokeWidth: 1.5 }),
Plot.dot(points, {
x: "x",
y: "y",
r: 0.1,
opacity: 0.1,
stroke: "black"
})
]
})
import { archaeology, roman, tumuli, land } from "@jwolondon/tdmc2024_day20"
Plot = require(await FileAttachment("plot.umd.js").url()) // https://github.com/observablehq/plot/pull/2243
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.
