Tricontour labelsTricontoursHexagotriangulationSpherical contoursManhattan Voronoi IIGraph VoronoiH3 odditiesH3 hexagons & geoContoursd3-hexbin & tricontours heatmapTricontour iteratorVolcano TricontoursBlurry contoursSpherical contours iteratorSpherical contours as a gradientReusing a Tricontour triangulationMapfillSpherical isobandsPlanar tricontours on geo data (bad!)Tricontour flowerUK TricontoursTricontour isobands
Modified Shepard’s method II (with geoContour)
Also listed in…
Interpolation
mapfillContours(d => interpolate(d, sources), d3.geoAirocean(), {
// N: 10000,
// color,
thresholds: 40,
graticule: land
})
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(cartesian([p[0] * radians, p[1] * radians]), nn, R)
.forEach(([q, dist]) => {
const k = kernel(dist);
value += k * q[3];
weight += k;
});
return weight ? value / weight : 0;
}
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, mapfillContours} from "@fil/mapfill"
d3 = require("d3@5", "d3-geo-polygon@1")
kd = require("kd-tree-javascript")
distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]) // d3.geoDistance
tree = new kd.kdTree(
sources.map(d => [...cartesian([d[0] * radians, d[1] * radians]), d[2]]),
distance,
[0, 1, 2]
)
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
import {slider} from "@jashkenas/inputs"
import {cartesian} from "@fil/cartesian"
import {radians} from "@fil/math"
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.
