mapfill(d => color(interpolate(d, sources)), d3.geoEqualEarth(), {
N: 10000,
graticule: land
})
sigma = 0.15
color = d3.scaleSequential(d3.interpolatePRGn).domain([-1, 1])
function interpolate(p, sources) {
let value = 0,
weight = 0;
sources.forEach(q => {
const k = kernel(p, q);
value += k * q[2];
weight += k;
});
return value / weight;
}
function kernel(p, q) {
return Math.exp(-Math.pow(d3.geoDistance(p, q) / sigma, 2));
}
sources = Array.from({ length: 500 }, () => {
const lon = 360 * (Math.random() - 0.5),
lat = 90 * (Math.random() - Math.random()),
t = (d3.geoContains(land, [lon, lat]) ? 1 : -1) * (0.3 + Math.random());
return [lon, lat, t];
})
import {mapfill} from "@fil/mapfill"
d3 = require("d3@7")
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
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.
