Realtime heatmap with canvas & js

#1

Post by dgarner » Sat, Apr 02, 2011, 9:58 PM UTC

Realtime heatmap with canvas & js
patrick-wied.at

Re: Realtime heatmap with canvas & js

#2

Post by hammock » Sat, Apr 02, 2011, 10:19 PM UTC

Very cool - I was totally surprised and delighted when I clicked Demo and saw what happened after.

Couple notes- it's not a true "heatmap" since it only works when the mouse is moving. If I two-finger scroll to another place, it doesn't register that the mouse has been over a new spot until I move it again. Likewise, if I hover over a spot for a long time then quickly move it somewhere else, it doesn't turn red, only registers a small blue dot because the mouse was not moving (only works when mouse is moving).

Then again I think the applications for this tech/visual effect are much wider than an analytical heatmap.

Re: Realtime heatmap with canvas & js

#3

Post by udp » Sun, Apr 03, 2011, 12:21 AM UTC

hammock wrote: post #2

Very cool - I was totally surprised and delighted when I clicked Demo and saw what happened after. Couple notes- it's not a true "heatmap" since it only works when the mouse is moving. If I two-finger scroll to another place, it doesn't register that the mouse has been over a new spot until I move it again. Likewise, if I hover over a spot for a long time then quickly move it somewhere else, it doesn't turn red, only…

It definitely has some cool potential applications - what about tracking where the user moves their mouse and how long it stays there on a regular web page, to judge what grabs their attention more (or less)?

Re: Realtime heatmap with canvas & js

#4

Post by metaprinter » Sun, Apr 03, 2011, 12:46 AM UTC

This looks like my drag and drop fake heatmap generator, which wasn't my original code either, just a mashup. http://www.robertivan.com/fakeHeatMap.html

Re: Realtime heatmap with canvas & js

#5

Post by troels » Sun, Apr 03, 2011, 3:02 AM UTC

udp wrote: post #3

hammock wrote: post #2

Very cool - I was totally surprised and delighted when I clicked Demo and saw what happened after. Couple notes- it's not a true "heatmap" since it only works when the mouse is moving. If I two-finger scroll to another place, it doesn't register that the mouse has been over a new spot until I move it again. Likewise, if I hover over a spot for a long time then quickly move it somewhere else, it doesn't turn red, only…

It definitely has some cool potential applications - what about tracking where the user moves their mouse and how long it stays there on a regular web page, to judge what grabs their attention more (or less)?

sort of what mouseflow.com does

Re: Realtime heatmap with canvas & js

#6

Post by meinhimmel » Sun, Apr 03, 2011, 6:51 AM UTC

That's really fun to draw with. I'll have to take a look at the source and put in some different color options and such.

Re: Realtime heatmap with canvas & js

#7

Post by pa7 » Sun, Apr 03, 2011, 10:10 AM UTC

metaprinter wrote: post #4

This looks like my drag and drop fake heatmap generator, which wasn't my original code either, just a mashup. http://www.robertivan.com/fakeHeatMap.html

There are too many guys out there who don't take license headers seriously or just don't know what licenses mean.

You are the first one who kept the license header in my code - thank you for that!

Re: Realtime heatmap with canvas & js

#8

Post by pencilcode » Tue, Apr 05, 2011, 5:30 PM UTC

this post uses his script + nodejs to display a multiuser realtime heatmap (on click event not on mousemove): http://onesandzeros.posterous.com/multi-user-realtime-heatma...