Question

I’m looking for some documentation on a heat map algorithm. I’ve found some implementations but they don’t calculate the gradient the way I’m looking. Instead of calculating by “hits” I want to associate the data points with a value.

The only reasource I’ve found is the source-code from openheatmap.com. This is some great stuff but I’m looking to create the gradients on the fly rather than from a historical data set .

I’m looking to create a real-time heatmap similar to a world of tweets.

Answer 1

From the answers I’ve received I’ve gathered my own conclusion, please comment on its accuracy.

So for a heat map based on “hits” you have a matrix of pixels with value of 0:

[ 0 0 0 ]
[ 0 0 0 ]
[ 0 0 0 ]

When you have a hit you increment the corresponding element.

[ 1 3 2 ]
[ 4 1 2 ]
[ 0 3 5 ]

If you have values though instead of hits you add the value to the matrix. For example lets use dollar amounts which give this example matrix:

[ $20.34 $42.42 $55.23 ]
[ $45.87 $00.87 $03.75 ]
[ $08.99 $32.05 $88.65 ]

We then normalize the data. This yields:

[ .897 .973 .984 ]
[ .977 .087 .351 ]
[ .669 .959 .994 ]

Now you can spread or blur this using your algorithm of choice. Like the Gaussian Blur.

You can then apply what ever gradient you want to these values.