Simple demo for d3.geoContour() — available in d3-geo-voronoi.
The dots denote the weather stations, each with [longitude, latitude, temperature].
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/d3-delaunay@5"></script>
<script src="https://unpkg.com/d3-tricontour@0.1"></script>
<script src="https://unpkg.com/d3-geo-voronoi@1.5"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
const canvas = d3.select("body").append("canvas")
.attr("width", 960)
.attr("height", 500),
context = canvas.node().getContext("2d"),
projection = d3.geoEqualEarth(),
path = d3.geoPath(projection).context(context).pointRadius(1),
contour = d3.geoContour(),
color = d3.scaleSequential(d3.interpolateRdBu).domain([40, -20]);
(async function() {
const points = await d3.json("points.json");
for (const c of contour.thresholds(40).isobands(points)) {
context.beginPath();
path(c);
context.fillStyle = color(c.value);
context.fill();
context.lineWidth = 0.5;
context.stroke();
}
context.beginPath();
path({type:"MultiPoint", coordinates:points})
context.fillStyle="#00000095";
context.fill();
})();
</script>
</body>