Animated Javascript Heatmaps.js

October 2013 ยท 2 minute read

I’ve been working on a crime heatmap animation lately and these are some tips for anyone else building something similar.

Heatmap.js

For my animation I used a version of heatmap.js that was tweeked for animation by alastair.is. The tweek slightly changes the look of the heatmaps but achieves a much better frame rate.

The Animation

If you new to Javascript based animation you will want to read up on window.requestNextAnimationFrame().

For a heatmap animation you need to push the current set of geo coardinates to the heatmap which corrispond with the the current animation progress.

Since the heatmaps are generated by overlaying all out points on a canvas and then colorizing them add and delete operations are slow since partial rendering isn’t supported and also because when adding new points you may result in a new maximum(darkest point) which would force an entire redraw. Because of this we set all our points at once.

For a smooth fade in effect I used a simple exponential curve algorithim using distance from cut off dates and current postion as inputs.

I was seeing errors with panning/zooming using Google Maps v3 and Heatmaps.js.

The Data

Since these animations usually cover a lot of data you will want to keep the syntax for each geo point minimal. In my case I compromised between readability and size buy using arrays rather then objects. I also converted my timestamps to just the day of the year since thats all the data was accurate to and then randomized the hour portion to distribute the data over the day.

Beautifying Data

I think this idea gets missed when people build heatmaps since mostly all you are doing is making data pretty. More features wont help if the whole package isn’t beautiful.