geoContours
This visualization uses a geoContour layer to turn weather-station temperatures into smooth, colored bands across a map. The page loads a GeoJSON-style array of [longitude, latitude, temperature] points from points.json, then projects them with an equal-Earth projection and renders them on a canvas. `d3.geoContour()` from the d3-geo-voronoi plugin computes isobands between user-defined thresholds (here a fixed threshold of 40), and each contour band is filled with a sequential blue-red scale mapping temperature. The semi-transparent black dots mark the station locations. The map uses the Equal Earth projection and is drawn with d3.geoPath and a canvas context; no other visual encodings are shown. This example demonstrates the geoContour API for gridded or scattered geographic data in d3.# geoContours
**geoContours** demonstrates `d3.geoContour()` from the d3-geo-voronio plugin, which computes isobands (filled contour regions) for irregularly spaced geographic data. The example visualizes weather station temperature readings across Africa and surrounding regions.
## Visualization Details
The visualization uses a **Equal Earth projection** to render temperature contours on a canvas. Weather stations appear as black dots, with each station's position determined by [longitude, latitude] and its temperature used as the contour value.
**Key implementation:**
- **Data**: ~120 weather stations across Africa with temperature readings
- **Contour generation**: `d3.geoContour()` with 40 evenly-spaced threshold values creates filled isobands between temperature levels
- **Color encoding**: A sequential RdBu (red-blue) scale maps temperature, with red for warmer and blue for cooler values
- **Rendering**: Canvas-based with semi-transparent fills, allowing overlapping contour bands to blend visually
- **Overlay**: Black dots mark the original station locations
The visualization creates a smooth temperature surface across the African continent by interpolating irregularly-spaced point data into nested contour bands, using a custom geoContour implementation from the d3-geo-voronoi library.
The projection is Equal Earth, and the contours are computed on the sphere (not projected), giving smooth geographic temperature isolines. The points are geographic [longitude, latitude] coordinates; each has a temperature value in °C.
The example demonstrates d3.geoContour() from the d3-geo-voronoi library (which uses d3-delaunay and d3-tricontour under the hood). The data represents African weather stations, but the contouring algorithm works for any irregularly-spaced XYZ dataset.
</textarea>
PPhilippe Rivière
76% match