chart = html`<svg style="width: 100%; height: auto; display: block;" viewBox="0 0 ${n} ${m}">
${Array.from(contours(values), d => svg`<path d="${path(d)}" fill="${color(d.value)}" />`)}
</svg>`
path = d3.geoPath()
contours = d3.contours()
.size([n, m])
.smooth(false)
.thresholds(20)
color = d3.scaleSequential(d3.extent(values), d3.interpolateMagma)
image = tiff.getImage()
values = (await image.readRasters())[0]
n = image.getWidth()
m = image.getHeight()
tiff = FileAttachment("sfctmp.tiff").arrayBuffer()
.then(buffer => GeoTIFF.fromArrayBuffer(buffer))
GeoTIFF = require("geotiff@2")
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.
