Creating heatmaps using

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?

Yes, but thanks to Explorer Canvas (ExCanvas), IE has a partial support for the Canvas tag — Fabien Ménager, Jul 12 '09 at 22:11
Well, you can always serve old-fashioned server side generated heatmaps to incapable browsers (rip IE7 and below, I'm pointing at mobile phones, etc) — warpech, Jul 12 '09 at 22:22
You can always add the Adobe SVG viewer addon to IE to view it — sandyiit, Jun 20 '11 at 09:31
Best answer chosen is commercial product??? how does this answer the question. — Muhammad Umer, Jan 05 '15 at 21:56
It is Open Source, MIT license as of now: https://github.com/pa7/heatmap.js . The website kind of blurs the message about it... Anyway, what would be wrong with the best answer being a commercial product? — warpech, Feb 18 '15 at 09:21

score 40 · Accepted Answer · edited Sep 12 '10 at 21:44

40

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/

edited Sep 12 '10 at 21:44

You

22,800
3
51
64

answered Sep 11 '10 at 21:01

Patrick Wied

595
8
14

Hey Patrick. Is it possible to update heatmap.js to work in a separate thread (using web-workers), so if there is a lot of data to be drawn you only tell the worker to calculate an off-screen canvas and send you the canvas when it's done? – XCS Feb 11 '14 at 19:53
Hey Cristy. Unfortunately that's not possible due to tight coupling with the canvas element and web workers don't support canvas. If you're looking for displaying more datapoints I have good news: I'm currently working on heatmap.js v2 and did some major performance optimization. in v2 you can visualize at least 20k datapoints without noticing any performance loss – Patrick Wied Feb 11 '14 at 20:22
1

Source code for heatmap.js is available on GitHub: https://github.com/pa7/heatmap.js (MIT license) – warpech Feb 18 '15 at 09:22

score 4 · Answer 2 · answered Aug 01 '09 at 09:14

4

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.

answered Aug 01 '09 at 09:14

Rifat

49
2

2

can you share what visualization did you use? I don't see heatmaps in the visualization gallery (http://code.google.com/apis/visualization/documentation/gallery.html) What I' like to do is to place a heatmap over Google Maps. I know that I could use this: http://code.google.com/p/gheat/, but GHeat does not use – warpech Aug 02 '09 at 13:38

score 2 · Answer 3 · answered Jun 10 '10 at 08:04

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.

score 2 · Answer 4 · edited Apr 30 '21 at 14:35

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:

_{(source: bitbucket.org)}

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

score 1 · Answer 5 · answered Jul 12 '09 at 22:08

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/

answered Jul 12 '09 at 22:08

Pierre

34,472
31
113
192

2

He is talking about Heatmaps, and not Treemaps :) – Fabien Ménager Jul 12 '09 at 22:19
hopps :-) looks like the same to me :-) – Pierre Jul 12 '09 at 22:30

score 0 · Answer 6 · answered Nov 01 '12 at 21:09

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

Creating heatmaps using

6 Answers6

Linked

Creating heatmaps using element?

6 Answers6

Linked

Creating heatmaps using