I’ve seen a number of heatmap web tools, before, but this one really got my attention.
This may simply be the result of HTML5 coming on the scene, since it’s so much more powerful and really aids in bringing good looking junk onto the screen.
None the less, I think you’re going to want to get your hands on this JavaScript library!
This is heatmap.js:
heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you’re adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate.
Here’s an example of what the heatmap.js website looks like when the heatmap is displayed:
Now, the result would be far more impressive on a site with more traffic.
Heatmaps are a great way to see where people are clicking. Sure, you can look at analytics, but the visual representation can really clue you in, and even give you an idea as to how well your design is working, too. If you want more of an explanation, check Wikipedia.
The heatmap.js heatmaps are fully customizable. You can choose your own color gradient, change it’s opacity, datapoint radius and much more. The JavaScript library is dual-licensed under the MIT and the Beerware license, so you can freely use it in all your projects.
Finally, I really like how they used heatmap.js together with Google Maps and the Ajax Push Engine to build a realtime website traffic heatmap:
I like it!
The heatmap.js library is currently supported in Firefox 3.6+, Chrome 10, Safari 5, Opera 11 and IE 9+, so you should be good-to-go.
You can look at the documentation and grab the code from GitHub on the heatmap.js website.
Speak your mind...