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?
Source: Tips4all
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.
ReplyDeleteYou can take a look at my demo right here:
http://www.patrick-wied.at/static/heatmap/
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.
ReplyDeletePlease send pull requests if you improve it. The pseudo-gaussian smoothing is slooooooooow as hell right now.
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).
ReplyDeleteThe 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