Creating heatmaps using <canvas> element?

Question

Are there any JavaScript libraries out there that allow you to create heatmaps using in-browser graphic rendering features such as <canvas> or SVG?

I know about HeatMapAPI.com, but their heat maps are generated on the server side. I think that in the era of <canvas> element we don't need that anymore!

If there is nothing like this yet, are there any volunteers to participate in creating such a tool?

Answer 1

I created a demo including a real-time heatmap with the <canvas> element and javascript. I also added the documented code next to the heatmap sample. The heatmap generation process is based on an alpha map in the canvas element which depends on the users mouse movement. You can take a look at my demo right here: http://www.patrick-wied.at/static/heatmap/

Answer 2

I created a hit map with the help of Google Visualization API [http://code.google.com/apis/visualization/documentation/]. It uses SVG & VML, and also cross browser compatible. Hope it'll help.

Answer 3

I have some js/canvas/web worker code here though there's plenty of work that could be done with it. It's also pushed online at http://heatmapthing.heroku.com/. Your browser needs to support web workers for this.

Please send pull requests if you improve it. The pseudo-gaussian smoothing is slooooooooow as hell right now.

Answer 4

I also gave it a try, but without doing the Gaussian smoothing my self, I let canvas do that for me. Basically I draw a radial gradient for every point in gray scale and then colorize this gray scale image (see "Creating Heat Maps with .NET 2.0 (C#)" for a detailed explanation, my implementation differs a bit).

The result looks like this:

The rendering time isn't that bad on Chrome/Chromium. I think the most time consuming part is the colorizing, because I am looping over every pixel.

You can find the code here: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Answer 5

I played with heatmap a few years ago. See http://www.urbigene.com/treemapphp/, the algorithm came from here: http://www.cs.umd.edu/hcil/treemap-history/

Answer 6

Heatcanvas looks quite good. It also has a leaflet extension to run on top of openstreetmaps https://github.com/sunng87/heatcanvas

It runs quite well on few points (< 200) or so, but gets a bit slow on many thousands of points. I think it might also recalculate more often than necessary after pan and zoom, and I had some problems with changing the heatmap on the fly (replacing heatmap with another using javascript), guess I need to experiment a bit more with it, or contact the author