mapfill(d => color(interpolate(d, sources)), d3.geoEqualEarth(), {
N: 10000,
graticule: land
})
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.pow(d3.geoDistance(p, q), -P);
}
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@5")
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
import {slider} from "@jashkenas/inputs"
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.
