Code and stories for ABC News and other experiments online
chart = html`<svg style="width: 100%; height: auto; display: block;" viewBox="0 0 ${imageWidth} ${imageHeight}">
${Array.from(
contours(values),
(d) => svg`<path d="${path(d)}" fill="${color(d.value)}" />`
)}
</svg>`
path = d3.geoPath()
contours = d3
.contours()
.size([imageWidth, imageHeight])
.smooth(false)
.thresholds(20)
color = d3.scaleSequential(d3.extent(values), d3.interpolateMagma)
image = tiff.getImage()
values = (await image.readRasters())[0]
imageWidth = image.getWidth()
imageHeight = image.getHeight()
tiff = FileAttachment("out.tiff")
.arrayBuffer()
.then((buffer) => GeoTIFF.fromArrayBuffer(buffer))
computedContours = contours(values)
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.
