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 & Canvas anstatt Visio Das Canvas-Element kann schön zeichnen und die Entwicklung geht klar vom Desktop weg hin zur Cloud, was dann fehlt sind die entsprechenden Lösungen. N...
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...
HTML5 Canvas in einfach – KineticJS Ich bin immer wieder erstaunt darüber was mit dem Canvas-Element alles möglich ist, meistens bin ich auch erstaunt darüber welcher Aufwand dazu betrie...
Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...

Schreibe einen Kommentar

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