md`## Contour map After some (soul) searching, we decided that a map of the U.S. with states represented in a usual geographic layout would be more comfortable to read than a ‘crazy map’ positioned in a virtual (and arbitrary) multidimensional topic space. But we still wanted it to be a ‘topic map’ and not a geographic map. The design idea was to use a contour layout, creating “blobs” in high-interest regions. The reader would be able to parse this map, see how it evolves in time, and compare it by switching the topic.

${await FileAttachment("hexmap.png").image()}

States organized on an hexagonal grid

The first implementation used [density contours](https://observablehq.com/@d3/density-contours). We put each state in a certain position on the map (on an hexagonal grid), and gave it a weight equal to the value (for the given date and topic).

${await FileAttachment("density-contours.png").image()}

Density contours

Visually this made overall sense, but the mathematician was not happy: density contours are for… densities, and we were using them for spatial interpolation. A consequence was that States that had a low value, but were surrounded by states with a high value, had a high “density” and showed with a high value. Conversely, states that were isolated geographically, such as Alaska or Hawaii, or which were alone with a high value and surrounded by low-value states, did not emerge much—they needed to have a much higher value to register visually. We tried to tweak the weights based on the number of neighbours of each data point—it was looking a bit better but it was still “too wrong”. And once we showed the actual numbers on the map, the discrepancy between the value and its representation was unbearable. So, while the graphics were nice, they were not accurately representing our values. A review of the available spatial interpolation algorithms was underwhelming: most of them tend to result in (very subjectively) ‘ugly’ shapes, and are quite slow. We ended up creating a new layout for D3, dedicated to contours of spatially interpolated data. The concept, in a few words, uses the voronoi diagram of the data points: each pixel is associated to the closest data point, and painted with a level of gray that corresponds to its value. By blurring the resulting image with a blur radius that corresponds to our data’s granularity, the level of gray is interpolated (averaged) naturally between neighboring points—we can finally compute the contours, which result in natural-looking blobs, like density contours, but with the correct values on the control points.

Voronoi to contours

${await FileAttachment("greyscale.png").image()}

Underlying greyscale field of blurred values

This approach doesn’t have a definite name yet, and there are a few settings to adjust, but we’re happy to share an early release and explain it [in this specific notebook](/@fil/spatial-interpolation-voronoi-blur). Looking at the maps in the final product, we are really happy we went the extra mile here!

${await FileAttachment("minimum-wage.png").image()}

Minimum Wage islands

As a final addition, in order to animate with the timeline, we turned the values for each state and topic (a vector of values for 2004, 2005… 2020) into a continuous interpolator (with [d3.piecewise](https://observablehq.com/@d3/d3-piecewise)). So querying a map for “year 2004 + 0.3” (somewhere between 2004 and 2005) would work, and give an interpolation of the maps for respectively 2004 and 2005. Interpolating the values also means we can avoid doing slow and awkward path interpolation.

Voronoi to contours

Purpose-built for displays of data