Yesterday I've received an email from Reinvigorate.net, telling that their new stats system is available. I was surprised of one of their new features: Heatmaps. They record all the clicks your visitors have done in your website and they show you all of them in that gorgeous way (you can see an example clicking the fourth image in their homepage).

I've tried!, FSM knows it... but I could'n manage the urge for trying it by myself:

This is the very rough and fast attempt. You can play with it here: 

It's not the same stuff as reinvigorate, but similar. Instead of getting the clicks per page of many visitors, it gets many clicks from one visitor, and renders the information using metaballs, like reinvigorate (although my colors are not so nice :_(

Also, It records the movement of the mouse, showed in white tracks.

The thing uses the html5 canvas element. I tried to do a progressbar, but it's no possible*, the DOM is not refreshed until the whole computation is done. I've tried with a Worker, but sadly, it seems that Workers don't have access to the DOM, so time wasted (well, not exacly, I've learnt how to use them ;)

The script is very slow! At first I've did it using ALL the page viewport, but it was too slow, so I've moved the rendering to only the image area. Reinvigorate doesn't have this problem, since their render is surely done in the server (and using a native -and faster- code), but the fun thing of this little experiment was doing it at the client ;)

Sorry, the code is really ugly, unoptimized and undocumented :P

*Well, I think that using Timers and using a renderRow() function it could be done, but I think it would be too ugly, it doesn't worth it :P

NOTE: Upps, It seems It only works in Safari, I'll try to correct it these days. FIXED! (great performance in Chrome, as usual :)