heatmap.js

 Tweet

About 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. The heatmaps are fully customizable - you're welcome to choose your own color gradient, change its opacity, datapoint radius and many more. The library is dual-licensed under the MIT and the Beerware license, feel free to use it in your projects.
Contributions on github and feedback is very appreciated. If you have any questions or suggestions, please let me know.
If you'd like to know how heatmap.js works here is an article about the inner life of heatmap.js

What is a heatmap?

You've never heard of heatmaps? No problem! In short: a heatmap is a graphical representation of datapoints with different frequency, usually red spots on a heatmap are highly frequent spots and blue ones are less frequent spots. For a more detailed explanaition check wikipedia

Usage demonstrations

• Heatmap based on static data
• Realtime heatmap based on mouse movement data
• Realtime heatmap based on click data
• Google Maps Heatmap Layer [ new! works now ]
• OpenLayers Heatmap Layer [ new! works now ]
• Realtime website traffic heatmap | APE-server down
• Keyboard Heatmap - Visualizing Character Distribution [ new! ]
• Realtime Heatmap Visualizing Mouse Movement of all current website visitors | APE-server down.

Documentation and Browser Support

Right now heatmap.js is only inline documented, have a look at the src, but I'll release a docco made documentation as soon as possible.
If anything is unclear, just ask me (@patrickwied). The heatmap.js library is currently supported in Firefox 3.6+, Chrome 10, Safari 5, Opera 11 and IE 9+.

Release Log

• 2011-04-22: Release 1.0 of the heatmap library containing data store, basics of dynamically redrawing and gradient customization.