5 ms·

Realtime heatmap with canvas & js

• hammock 16y ago
  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.
  • udp 16y ago
    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)?
    • troels 16y ago
      sort of what mouseflow.com does
• metaprinter 16y ago
  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 http://www.robertivan.com/fakeHeatMap.html
  • pa7 16y ago
    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!
• meinhimmel 16y ago
  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.
• pencilcode 16y ago
  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-heatmap-using-nodejs http://onesandzeros.posterous.com/multi-user-realtime-heatma...