JS Heatmaps, anyone?

Heatmap.js is an open source JavaScript library that can be used for generating realtime heatmaps.
It uses the power and flexibility of the HTML5 canvas element to draw heatmaps based on your data.


Activate Website Heatmap Download latest build

What is a heatmap?

A heatmap is a visualization used for visualizing three dimensional data. Two dimensions represent cartesian coordinates (x and y values) and the third dimension is used for showing the intensity of a datapoint in relative comparison to the absolute maximum of the dataset. The intensity is shown as a color, usually red (hot) is used for the maxima and blue (cold) for minima.

heatmap.js' purpose

heatmap.js lets you easily create web heatmaps with JavaScript. The heatmaps are fully customizable - feel free to choose your own color gradient, change the opacity, datapoint radius and many more. Use it for A/B testing, visualizing map data or for whatever pops into your mind :)

Examples Showcases

Browser Support

heatmap.js works on modern web browsers that support HTML5 canvas (including mobile web browsers). It's been tested on the following browsers:

  • Firefox
  • Chrome
  • Safari
  • IE 9+
  • Opera
  • ...

Latest News

2012-12-20: We're currently looking for showcases.
You've created a nice project, prototype or whatever with heatmap.js?
We'd love to hear about it! Send us a screenshot, small description, and a link to your project and we'll feature it on our showcases section. Message us!

2012-11-xx: VSauce mentioned the heatmap keyboard in his Youtube Episode
VSauce just created an interesting youtube video containing fun facts about keyboard usage. Check it out: "You don't type alone"


Wanna be a partner or sponsor? Contact us

Fork me on GitHub