Contours

Now that I’ve got a heightmap, I can start generating contours at regular intervals. Fortunately, d3 already has a built-in contour generator! I’m going to use the density estimator version, since I think the regular mode will give too discrete results, and would involve me generating lots of data points.

The density contour generator takes an array of points, and generates an area where the density of the points is similar. For each polygon in my heightmap, I can take the centroid (the red dots) and then pass that point into the generator multiple times, based on the height of that polygon.
That will effectively set the density equal to the height, so I should get some decent contours out! A few lines of code later…

…well, it’s a start.

I’m guessing the issue is since the density is so spiky around the centroids of the polygons, this leads to large variations of density around the heightmap points. I could pick a random point within the polygon instead, which would hopefully reduce the variation.
Picking a random point within a polygon isn’t trivial, so instead I’m just going to pick a point within the bounding box of the polygon, and simply try again if that point turns out not to be in the polygon.

That definitely seems better, but I can see a problem here. My polygons are not all the same size, so smaller polygons naturally have a higher density than larger ones. I can fix this by scaling the number of points I pick for each cell by the area of the polygon.

Perfect! That’s looking pretty good to me. OS map contours have a slightly thicker stroke every 5 intervals, so I can put that in pretty easily as well. The final version: