Heatmap.js just got an Animation Package

Estimated reading time: 2 minutes ( save for later )

First of all: Happy Easter ;)
Due to several people who have asked me whether this would be possible with heatmap.js, I started implementing an animation package for heatmap.js.

Why an animation package?

Because static heatmaps lack of one important component. Time. In some cases it could be okay to ignore time, but mostly, e.g. when you’re doing usability studies, you want to know how the heatmap changed over time. Though the final data can let you recognize trends too, the changes over time are more important to understand why and how it came to it.

How the heatmap.js animation package works (right now)

The main concept behind the animation are CSS sprites. What are CSS sprites? CSS sprites are big images, containing several other images with known positions. This big image will be used as background image for an element (which is smaller than the big image). If you want to display a single image of it you just have to set the background-position property correctly and it will only show this image. And that’s how I solved it for heatmap.js. At first I create a new canvas with a width of a single heatmaps width multiplied by the dataset entries count. For each dataset entry it generates a new heatmap, a new frame for the animation. Then each frame gets drawn on the big canvas. When it’s finished I create an element with the size of a single heatmap and set the canvas’ dataURL as background-image. And now we’re ready to cycle the heatmap animation. By changing the x-value of the background-position by the width of a single heatmap it will show the next frame.

Known drawbacks with this concept

It takes some time to generate the big image containing all the frames (especially if you’re having lots of frames). I haven’t tested it with extremely long sessions, but I’d love to hear about your experiences. I know there’s a maximum image size a browser can handle. If this gets a serious problem for this implementation I thought about animating heatmap tiles instead of the fullsize heatmap. But though the slow generation process it performs good at the animation.

In order to test the functionality I also created a project called Heatmap Animator. This is a web application where you can record a heatmap session and also show recorded sessions. You can either set a specific framerate for your animation or click on seperate frames (from a frames list) to have a closer look at it.

Future prospects

– Optionally passing differences of data (delta) instead of full datasets per frame in order to reduce animation data.

Do you know a better solution for an animation package for heatmap.js?
I would love to hear some feedback regarding this concept / implementation.

PS: The animation package isn’t on github yet. I will add it to the heatmap.js github repository as soon as I’ve finished it (I’m hoping for some feedback to make it better), which will most likely be somewhere around next week.