mapfill(d => color(interpolate(d, sources)), d3.geoAirocean(), {
N: 10000,
graticule: land,
interval: 1000,
})
nn = 100 // in this case nn is high; the limiting factor being R
R = 0.1 // geoDistances are in radians
color = d3.scaleSequential(d3.interpolatePRGn).domain([-1, 1])
function interpolate(p, sources) {
let value = 0,
weight = 0;
tree.nearest(p, nn, R).forEach(([q, dist]) => {
const k = kernel(dist);
value += k * q[2];
weight += k;
});
return value / weight;
}
function kernel(dist) {
return Math.pow(dist, -P);
}
sources = Array.from({ length: 5000 }, () => {
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", "d3-geo-polygon@1")
kd = require("kd-tree-javascript@1")
distance = d3.geoDistance
tree = new kd.kdTree(sources, distance, [0, 1])
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.
