# Heat maps

## Recommended Posts

Does anyone have any good resources for explaining how to generating heat maps? http://en.wikipedia.org/wiki/Heat_map Bonus points for pseudo or C# code. I've sifting through a lot of sites from google that discuss topological implications and click maps, but haven't found any that tie the graphical representation into event systems. Meaning, I have the event and a location, how do I color the image in the appropriate manner?

##### Share on other sites
Nican    100
I made a Heat Map generator in Java a long time ago, and I am unsure that it still works, and it is a mess, but you can take a look at it.

##### Share on other sites
Thanks Nican. I appreciate it.

##### Share on other sites
Hodgman    51323
Every time an event happens at a location, you increment a counter for that location.
When you want to display those counters graphically, you first normalize the data:
* Find the minimum and maximum counter values for all locations
* for each counter, counter = (counter-min)/(max-min)
Now you've got a value for each location in the 0-1 range

Using an interpolation function you can build a gradient(e.g. linear interpolation):
color lerp( color a, color b, float fraction ){ return (1-fraction)*a + fraction*b; }

For a three colour gradient you can partition the range and scale each partition back into the 0-1 range for interpolation. e.g. for a green->blue->red gradient:
if( counter < 0.5 ) display = lerp( green, blue, counter*2 );else display = lerp( blue, red, (counter-0.5)*2 );

##### Share on other sites
Quote:
 Original post by HodgmanEvery time an event happens at a location, you increment a counter for that location.When you want to display those counters graphically, you first normalize the data:* Find the minimum and maximum counter values for all locations* for each counter, counter = (counter-min)/(max-min)Now you've got a value for each location in the 0-1 rangeUsing an interpolation function you can build a gradient(e.g. linear interpolation):color lerp( color a, color b, float fraction ){ return (1-fraction)*a + fraction*b; }For a two colour gradient, you feed in your normalised counter values and your two colours.For a three colour gradient you can partition the range and scale each partition back into the 0-1 range for interpolation. e.g. for a green->blue->red gradient:if( counter < 0.5 ) display = lerp( green, blue, counter*2 );else display = lerp( blue, red, (counter-0.5)*2 );

I see. Almost like how fractals have colors associated with a fixed range of values. I guess fall offs will occur naturally depending on the events. I'm worried about certain locations of the map with just a red dot and no fall off. But if that's the frequency of events then I guess the representation would be accurate. Thanks for the help.

##### Share on other sites
Emergent    982
Quote:
 Original post by GhostDogStudioI guess fall offs will occur naturally depending on the events. I'm worried about certain locations of the map with just a red dot and no fall off.

If that's a concern, you can, instead of incrementing just one pixel, add a several-pixel-radius smooth "bump" to your map whenever there's an event. E.g.,

w(r) = (1 - r^2/R^2)^2 if r < R; 0 if r >= R.

where r is the distance of a pixel in your map from the event and R is the desired bump radius.

This is mathematically equivalent to showing a blurred version of your map.

##### Share on other sites
Krypt0n    4721
Quote:
 * for each counter, counter = (counter-min)/(max-min)

but you need to be careful, sometimes peaks can screw up the whole scale (e.g. the spawn point in an multiplayer game would be the "hottest" place. far more than any other. so you might want to ignore peaks, e.g. processing some median filter over the data.