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

Webflow – komplettes CSS3 für Seiten online ... CSS3 Online-Editoren gibt es ja einige in der Cloud. Meistens sind diese für spezialisierte Anwendungen wie zum Beispiel Gradients oder Buttons. Will ...
HTML5 Validierung mit jQuery HTML5 besitzt eine eingebaute Validierung für Formular-Elemente, das dumme ist nur, diese funktioniert derzeit nur auf Webkit-Browsern und nicht auf F...
HTML5 Audio mit Buzz HTML5 Audio ist ein nerviges kleines Biest! Das liegt nicht an der Umsetzung, sondern daran das jeder Browser sein eigenes Süppchen hinsichtlich Codec...
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...

Schreibe einen Kommentar

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