chart = {
const r = width / height;
const context = DOM.context2d(width, wide ? height : width * r);
if (!wide) {
context.translate(width / 2, height / 2);
context.rotate(Math.PI / 2);
context.translate(-height / 2, -width / 2);
context.scale(r, r);
}
const path = d3.geoPath(null, context);
context.scale(scale, scale);
context.lineWidth = 0.5 / scale;
context.strokeStyle = "#fff";
while (true) {
const t = (performance.now() / duration) % 1;
for (const [a, b] of d3.pairs(thresholds)) {
const d = a * (1 - t) + b * t;
context.beginPath();
path(contours.contour(data.values, d));
context.fillStyle = color(d);
context.fill();
context.stroke();
}
yield context.canvas;
}
}
contours = d3.contours().size([data.width, data.height]).smooth(smooth)
height = Math.round(data.height / data.width * width)
scale = width / data.width
duration = 2000
wide = Generators.observe(notify => {
let wide;
function resized() {
let w = innerWidth > 640;
if (w !== wide) notify(wide = w);
}
resized();
addEventListener("resize", resized);
return () => removeEventListener("resize", resized);
})
color = d3.scaleSequential(d3.interpolateGreys).domain(d3.extent(data.values)).nice()
thresholds = color.ticks(20)
data = FileAttachment("volcano.json").json()
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.
