Heatmap mit dem HTML5 Canvas Element

Heatmaps sind sinnvolle kleine Helferlein bei der Analyse einer Webpage. Ich habe schon darüber berichtet wie man mit der Open Source Clickheat eine feine Auswertung erstellt, trotzdem nochmal eine kleine Erinnerung: Heatmaps basieren auf den Klicks einer Seite. Je mehr Leute in einen bestimmten Bereich klicken, desto heisser wird er. Dies kann man dann in einem feinen Overlay darstellen in dem man die heissen (roten) Bereiche sieht, und die Bereiche, die niemanden interessieren. Benutzt wird das Ganze oft dazu, um Elemente zu verschieben und näher an einen heissen Bereich zu bringen, damit er besser auffällt.

Heatmap mit HTML5 Canvas

Das JavaScript heatmap.js erstellt aufgrund verschiedenster Datenquellen Heatmaps mittels HTML5 Canvas. Das an sich ist schon ziemlich cool, aber das Teil kann noch mehr: die Heatmap kann während der Anzeige verändert werden. Mit etwas Aufwand könnte man so zum Beispiel eine Animation über die Aktionen der letzten 24 Stunden erstellen, oder wie in diesem Beispiel Mausbewegungen visualisieren.

Das Ganze erfolgt ziemlich schnell und flüssig und zeigt (mal wieder) wohin die Reise gehen wird mit HTML5. Auch lustig ist dieses Beispiel, das mit relativ wenig Aufwand auf einer Google Map die Besucher einer Webseite visualisiert. Zusammenfassend kann man sagen, dass heatmap.js das bisher beste Skript zum Thema Heatmap ist, und vor allem das Skript, das einen am wenigsten einschränkt.

Ähnliche Beiträge

JavaScript Markdown Editor Markdown ist nichts nerdiges (mehr) sondern durchaus eine sinnvolle Sache, auf der viele Dienste inzwischen setzen (so zum Beispiel auch GitHub). Waru...
30 Pixel Art Tutorials inkl. Isometrie Nachdem ich ja gestern bereits über die Animation von Charakteren geblogt habe, kommt man nun sehr schnell in den Zustand in dem man auch komplette We...
Cookies sind ja so was von 2012 … Sagen wir mal so: die Intention von Cookies ist ganz nett, die Tatsache wie sie heute genutzt werden eher nicht. Ein Cookie ist immer an eine Domain g...
Isotope – Next Generation Website Layout dank jQue... Das letzte Plugin für jQuery was mich nachhaltig beeindruckt hatte, war Masonry. Das kleine Tool macht gerade auf Community-Seiten oder in Drupal rech...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.