Public
Edited
Feb 17, 2023
Insert cell
Insert cell
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>`
Insert cell
Insert cell
projected = d3GeoProjection.geoProject(geojson, d3.geoIdentity().scale([-0.5]))
Insert cell
geojson = ({
type: "FeatureCollection",
features: contours(values).map((f) => ({
type: "Feature",
properties: { value: f.value },
geometry: f,
})),
})
Insert cell
contours = d3.contours()
.size([n, m])
.smooth(false)
.thresholds(20)
Insert cell
color = d3.scaleSequential(d3.extent(values), d3.interpolateMagma)
Insert cell
image = tiff.getImage()
Insert cell
values = (await image.readRasters())[0].map(v => v === 255 ? null : v)
Insert cell
n = image.getWidth()
Insert cell
m = image.getHeight()
Insert cell
tiff = FileAttachment("all_median_median_0.0.tif").arrayBuffer()
.then(buffer => GeoTIFF.fromArrayBuffer(buffer))
Insert cell
GeoTIFF = require("geotiff@1.0.0-beta.13")
Insert cell
d3GeoProjection = require("d3-geo-projection")
Insert cell

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.
Learn more