[ACCEPTED]-Creating heatmaps using <canvas> element?-heatmap
I created a demo including a real-time heatmap 6 with the <canvas> element and javascript. I also 5 added the documented code next to the heatmap 4 sample. The heatmap generation process is 3 based on an alpha map in the canvas element 2 which depends on the users mouse movement.
You 1 can take a look at my demo right here:
http://www.patrick-wied.at/static/heatmap/
I created a hit map with the help of Google 3 Visualization API [http://code.google.com/apis/visualization/documentation/]. It uses SVG & VML, and 2 also cross browser compatible. Hope it'll 1 help.
I have some js/canvas/web worker code here though 6 there's plenty of work that could be done 5 with it. It's also pushed online at http://heatmapthing.heroku.com/. Your 4 browser needs to support web workers for 3 this.
Please send pull requests if you improve 2 it. The pseudo-gaussian smoothing is slooooooooow 1 as hell right now.
I also gave it a try, but without doing 10 the Gaussian smoothing my self, I let canvas 9 do that for me. Basically I draw a radial 8 gradient for every point in gray scale and 7 then colorize this gray scale image (see 6 "Creating Heat Maps with .NET 2.0 (C#)" for a detailed explanation, my implementation 5 differs a bit).
The result looks like this:
(source: bitbucket.org)
The 4 rendering time isn't that bad on Chrome/Chromium. I 3 think the most time consuming part is the 2 colorizing, because I am looping over every 1 pixel.
You can find the code here: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
I played with heatmap a few years ago. See 1 http://www.urbigene.com/treemapphp/, the algorithm came from here: http://www.cs.umd.edu/hcil/treemap-history/
Heatcanvas looks quite good. It also has 10 a leaflet extension to run on top of openstreetmaps https://github.com/sunng87/heatcanvas
It 9 runs quite well on few points (< 200) or 8 so, but gets a bit slow on many thousands 7 of points. I think it might also recalculate 6 more often than necessary after pan and 5 zoom, and I had some problems with changing 4 the heatmap on the fly (replacing heatmap 3 with another using javascript), guess I 2 need to experiment a bit more with it, or 1 contact the author
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.