Vektordaten als Heatmap rendern – so funktioniert die JavaScript-Heatmap-Implementierung
Kommentare

Daten lassen sich auf vielfältige Arten visualisieren. Eine besonders eindrucksvolle Möglichkeit dafür ist zum Beispiel die Darstellung von Analysedaten als Heatmap, in der jeder Wert einer Datenmatrix mit einer anderen Farbe angezeigt wird. Allerdings kann die Implementierung einer solchen Heatmap die Performance der Seite deutlich verringern.

Antonio Santiago erklärt, wie mit OpenLayers3 Vektordaten als Heatmap gerendert werden können, ohne die Seitenperformance negativ zu beeinflussen.

Heatmaps beeinflussen Seitenperformance

Heatmaps finden an vielen Stellen im Web Verwendung, etwa bei der Darstellung von Analysedaten. So können zum Beispiel die Regionen mit den meisten Zugriffen auf die eigene Website in unterschiedlichen Farben und mit unterschiedlichen Gewichtigkeiten dargestellt werden.

Während solche Heatmaps zwar nützliche Werkzeuge zur Website-Analyse sind, ist deren Implementierung allerdings nicht immer unproblematisch. Insbesondere die Performance der Website wird oft negativ beeinflusst, da jeder Pixel der Karte aus einem Set bekannter Werte berechnet werden muss, um diese in unterschiedlichen Farben in der Heatmap abbilden zu können. Um dieses Problem zu lösen, erlaubt die JavaScript-Library OpenLayers3 mit der Klasse ol.layer.Heatmap das Rendern von Vektordaten als Heatmap.

Rendern von Vektordaten als Heatmap mit OpenLayers3

Der Einsatz von Vektordaten bietet einige Vorteile für Webdesigner, insbesondere, was die Seitenperformance angeht. So nutzt das ol.layer.Heatmap-Layer von OpenLayers3 eine Annäherung an den für das Rendern von Heatmaps genutzten Algorithmus und produziert die Ergebnisse so möglichst schnell.

Dabei wird im ersten Schritt ein Farbgradient als 1x256px-großes Bild erstellt. Jeder bekannte Wert wird dann in einem Canvas zunächst als unscharfer, grauer Punkt gerendert, wobei sich die verschiedenen Punkte überschneiden können. Abschließend erhält man aus dem Canvas ein Bild, in dem jedem Pixel anhand des grauen Farbwerts eine Farbe zugeschrieben wird.

Gleichzeitig ermöglicht OpenLayers3 auch den Einsatz verschiedener Properties, die auf die Heatmap angewandt werden können, etwa um einzelnen Punkten unterschiedliche Wichtigkeiten zuzuweisen. So lassen sich leichter Heatmaps erstellen, mit denen sich zum Beispiel Analyseergebnisse visuell anschaulich präsentieren lassen, ohne durch einen aufwändigen Renderprozess für eine schlechtere Seitenperformance zu sorgen.

Aufmacherbild: Colored heat map for temperature von Shutterstock / Urheberrecht: Claudio Divizia

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -