Creating a heatmap based on averaged point values, not count or sum

I have a geojson dataset of lat/lon points where each point has an assigned value between 0 and 1. I’d like to plot these on a map, using something akin to a heatmap, but where the colour gradient is defined by the average value, rather than than the number of points, or the sum of the value at a given location.

It’s not this actual use-case, but for simplicity, imagine a map of factories creating pollution, where the point represents the factory and the value is how much pollution it produces. Each factory pollutes over a certain area, so any overlapping areas should be shaded to the average value for all the factories in that area, rather than summed.

I’ve looked through the various heatmap plugins available for leaflet but can’t see any which seem to offer this easily. Has anyone else done this and can point to the library they used and how to tweak it?

Or alternatively is there a different alternative to visualise this kind of data?

1 Like

A classic way of doing this is by taking averages (or sums, in the case of polluting factories) over units of a spatial grid. The grid can be made of hexagons, squares etc. Make sure you divide each unit’s total by the unit’s (geographic) area if you want to comparisons to be “fair”.

Here are a few examples with hexbins:

Just a few examples—there are many other ways to approach the problem!

Thanks for your reply. I have actually got a rough hexbin approach worked out, using H3 hexagons. For this implementation I’d like to scale the averaging as the map zooms in and out, and unfortunately with the hexbin approach neighbouring small hexagons may ‘belong’ to different larger hexagons, so the averaging ‘jumps’ about as the zoom changes.

I was hoping that a more ‘fluid’ approach using something more akin to a heatmap might work, but wasn’t sure if this was achievable without some reimplementation of the existing libraries.

My fallback is to continue using a hexbin, but also provide the option to draw a circle/polygon on the map and then average the points within that circle to allow the user to choose which points to include.

I’ve tried implementing nearly a dozen spatial interpolation approaches; a quick summary in Spatial interpolation toolbox / Fil / Observable (unpublished, unfinished, comments welcome!)

1 Like

Thanks - there are some great visualisations there!

I’m now thinking I might attempt to create something using clustering - that is to cluster neighbouring points and generate polygons for each cluster which can then be coloured. How this looks will probably depend on how the points are distributed, but it might create useful regions which are easy to understand.


Hey @mrichar1, here’s a few examples I made using spatial data and a hierarchically clustered heatmap (NBA and spatial transcriptomics data) NBA Shot Chart Clustergrammer-GL / Nicolas Fernandez / Observable and Clustergrammer-GL Visium Example / Nicolas Fernandez / Observable

They’re both effectively hexbinned data, but out of lazyness I just plotted them as a scatterplot.

1 Like