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

8 Online CSS3 Generatoren Frei nach dem Motto: lieber schnell zusammen geklickt, als falsch selbst gemacht, habe ich mal eine Liste von 10 guten CSS3 Online Editoren erstellt. ...
Interaktive Landkarte mit HTML5 Woran es derzeit bei HTML5 mangelt sind coole Seiten, die wirklich bis ins letzte alle Möglichkeiten ausreizen. Wenn es eine solche Seite gibt, ist di...
jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
Rollenspiele in HTML5 Was waren das noch Zeiten als isometrische Grafiken das neue Ding waren. Während man sich mit Telnet durch MUDs gekämpft hatte, und das erste Ultima a...

Schreibe einen Kommentar