geoContours

Simple demo for d3.geoContour() — available in d3-geo-voronoi.

The dots denote the weather stations, each with [longitude, latitude, temperature].

<!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>

https://d3js.org/d3.v5.min.js

https://unpkg.com/d3-delaunay@5

https://unpkg.com/d3-tricontour@0.1

https://unpkg.com/d3-geo-voronoi@1.5