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 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 2

I would be interested to participate to such a project, I made or have worked on a few libs using Canvas (canvas-text, Flotr) but I have never worked on heatmaps related software.

Answer 3

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 4

RaphaelJS is a great library for working with canvas/svg and is used with jQuery. Not sure if it does heatmaps, but it's a great tool: http://raphaeljs.com/

Answer 5

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 6

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 7

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/