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.

Schreibe einen Kommentar

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