contours = d3
.contours()
.size([n, m])
.smooth(true)
.thresholds(new Array(5).fill(null).map((_, i) => 55 + i * 20))
contoursWithThresholds = contours(values)
function reproject(shape) {
let reprojectedShape = { ...shape };
reprojectedShape.coordinates = reprojectedShape.coordinates.map((polygon) => {
return polygon.map((rings) => {
return rings.map((coordinate) => {
return pixelToGeo(coordinate);
return projection.invert(coordinate);
});
});
});
return reprojectedShape;
// return projections.geoStitch(reprojectedShape);
// return projections.geoQuantize(reprojectedShape, 4);
// return projections.geoStitch(projections.geoQuantize(reprojectedShape, 2));
}
values = {
let image = await imagePromise();
let values = [];
const data = image.data;
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // R
data[i + 1] = 255 - data[i + 1]; // G
data[i + 2] = 255 - data[i + 2]; // B
let r = 255 - data[i];
let g = 255 - data[i + 1];
let b = 255 - data[i + 2];
let color = `${r}-${g}-${b}`;
let value = colors[color] || 0;
values.push(value);
}
// return values;
return d3.blur2({ data: values, width: n }, 0.5).data;
}
m = image.naturalHeight
n = image.naturalWidth
// https://aviationweather.gov/wafs/ [-75.940536, -179.983902], [75.940536, 179.983902]
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
d3 = require("d3@7.6.0/dist/d3.min.js") // d3.blur was introduced in d3-array@3.2 and d3@7.6
projections = require("d3-geo-projection@2")
png = require("pngjs@5.0.0/browser.js")
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.
