Heatmap

Heatmap ist eine Visualisierungsform, die numerische Werte in einer Matrix durch Farbintensität kodiert, sodass Muster, Häufungen und Ausreißer auf einen Blick erkennbar werden.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Infografik & Datenvisualisierung · Niveau: Einsteiger

Was ist eine Heatmap?

Eine Heatmap (deutsch: Wärmekarte) ordnet Datenwerte in einem zweidimensionalen Raster an und kodiert jeden Zellwert durch Farbe. Je nach verwendeter Farbpalette bedeutet eine dunklere oder wärmere Farbe typischerweise einen höheren Wert – daher der Name „Wärme"-Karte.

Heatmaps existieren in zwei Hauptformen:

• Matrix-Heatmap: Eine tabellenartige Darstellung mit Kategorien auf X- und Y-Achse. Jede Zelle entspricht einem Datenpunkt.
• Geographische Heatmap: Datenpunkte werden räumlich auf einer Karte eingezeichnet, und der Bereich um viele nahegelegene Punkte wird „aufgeheizt" (Kerndichte-Schätzung). Diese Form zeigt Dichte, nicht diskrete Werte.

Erklärung

Farbpaletten in Heatmaps:

Heatmaps erfordern eine sorgfältige Farbwahl (→ siehe Farbwahl in Datenvisualisierungen). Für Daten mit einem sinnvollen Mittelpunkt (z. B. Abweichung vom Durchschnitt) eignet sich eine divergierende Palette (z. B. Rot–Weiß–Blau). Für einseitige Werte (z. B. Häufigkeiten, immer ≥ 0) ist eine sequenzielle Palette (z. B. Weiß–Dunkelblau) besser.

Wichtig: Viele Standard-Heatmaps verwenden die Regenbogen-Farbpalette (Rot–Orange–Gelb–Grün–Blau). Diese ist für Datenvisualisierungen ungeeignet, weil sie kein gleichmäßiges Helligkeitsspektrum aufweist und für farbenblinde Personen unlesbar ist. Cairo (2016) und Wilke (2019) empfehlen perceptuell-uniforme Paletten wie Viridis, Plasma oder Cividis.

Kalender-Heatmap:

Die Kalender-Heatmap ordnet Tage als X-Achse und Wochentage (Mo–So) als Y-Achse an. Jede Zelle entspricht einem Tag, die Farbe zeigt einen Wert (z. B. Anzahl Veröffentlichungen, Schrittzahl, Niederschlag). Das berühmteste Beispiel ist der GitHub-Aktivitätsgraph, der Commit-Häufigkeiten über ein Jahr zeigt.

GitHub-Heatmap als Inspiration:

GitHub verwendete zunächst eine grüne Farbskala für die Aktivitätsheatmap – inzwischen ist sie auch in Farbenblind-freundlichen Varianten verfügbar. Dieser Graph hat das Konzept der Kalender-Heatmap für eine breite Öffentlichkeit popularisiert und zeigt, wie ein scheinbar technisches Werkzeug als Kommunikations- und Motivationsinstrument funktioniert.

Korrelationsmatrizen:

Eine häufige Anwendung der Matrix-Heatmap ist die Darstellung von Korrelationskoeffizienten. Für n Variablen entsteht eine n×n-Matrix, in der jede Zelle die Stärke der Korrelation zwischen zwei Variablen farblich kodiert (z. B. dunkelrot = starke positive Korrelation, dunkelblau = starke negative Korrelation). Das ermöglicht einen schnellen Überblick über alle paarweisen Beziehungen.

Clusterung:

In wissenschaftlichen Heatmaps (z. B. in der Bioinformatik) werden Zeilen und Spalten häufig durch hierarchisches Clustering neu angeordnet, sodass ähnliche Zeilen und Spalten benachbart erscheinen. Das macht Muster und Gruppen sichtbar, die in der ursprünglichen Reihenfolge verborgen bleiben.

Wann einsetzen / wann nicht

Einsetzen, wenn:

• Muster in einer zweidimensionalen Matrix gezeigt werden sollen (Tage × Wochentage, Kategorien × Kategorien).
• Dichte oder Häufigkeit an geographischen Orten visualisiert werden soll (räumliche Heatmap).
• Korrelationen zwischen vielen Variablen auf einmal dargestellt werden.
• Tages- oder Wochenmuster in Zeitreihen erkannt werden sollen (wann ist etwas besonders häufig?).

Nicht einsetzen, wenn:

• Präzise Zahlenwerte verglichen werden sollen – Farben erlauben nur grobe Schätzungen. Tabellen oder Balkendiagramme sind präziser.
• Nur wenige Datenpunkte vorhanden sind (eine 3×3-Matrix ist als Tabelle klarer).
• Die Zielgruppe Schwierigkeiten mit Farbkodierungen hat (z. B. starke Farbenblindheit in der Leserschaft). Dann zumindest auf barrierefreie Paletten achten.
• Kausale Erklärungen gefragt sind – eine Heatmap zeigt Muster, nicht Gründe.

Beispiele (5 konkrete)

1. GitHub-Aktivitätsgraph: 52 Wochen × 7 Wochentage als Kalender-Heatmap. Grüne Intensität zeigt Anzahl der Commits pro Tag. Auf einen Blick erkennbar: Wann wurde viel, wann wenig programmiert?
2. Webseitentraffic nach Stunde und Wochentag: Welche Stunden an welchen Wochentagen haben die meisten Seitenaufrufe? Heatmap mit 7 Zeilen (Mo–So) × 24 Spalten (0–23 Uhr). Zeigt Primetime für Content-Veröffentlichungen.
3. Wetterdaten: Kalender-Heatmap für Tageshöchsttemperaturen eines Jahres. Zeigt Sommer-Hitzephasen und Winterkälteeinbrüche als farbige Streifen.
4. Korrelationsmatrix in der Finanzanalyse: Korrelationskoeffizienten zwischen 10 Aktien-ETFs als 10×10-Heatmap mit divergierender Rot-Weiß-Blau-Palette. Zeigt, welche Fonds stark korrelieren (hohes Klumpenrisiko).
5. Sportlermüdigkeit: Heatmap für Fehlschussquoten eines Basketballteams über Spielminuten und Spieltage. Zeigt, in welchen Phasen die Trefferquote systematisch sinkt.

In der Praxis

Datawrapper: Datawrapper bietet keine native Heatmap als eigenen Chart-Typen, aber über den Typ „Tabelle" lassen sich Zellen durch bedingte Formatierung einfärben – ein einfacher Ersatz für kleine Matrizen. Für Kalender-Heatmaps eignet sich ein anderes Tool besser.

Flourish: Flourish bietet ein Heatmap-Template, das sowohl für Matrix-Heatmaps als auch für Kalender-Heatmaps nutzbar ist. Hover-Tooltips zeigen den genauen Wert, was die unpräzise Farbkodierung ergänzt.

D3.js: Heatmaps sind ein klassisches D3-Anwendungsfall. Mit d3.scaleBand() werden die Achsen diskretisiert, d3.scaleSequential() oder d3.scaleDiverging() kodieren Werte in Farben. Die D3-Bibliothek bietet eingebaute Farbskalen wie d3.interpolateViridis oder d3.interpolateRdBu. Für Kalender-Heatmaps gibt es fertige D3-Templates und Bibliotheken wie Cal-Heatmap.

Vergleich & Abgrenzung

Der Unterschied zur Choropleth-Karte: Beide nutzen Farbkodierung, aber die Choropleth färbt geographische Gebiete (mit Grenzen), während die räumliche Heatmap eine kontinuierliche Dichteschätzung über den Raum zeigt.

Häufige Fragen (FAQ)

Warum ist die Regenbogenskala (Jet-Farbpalette) schlecht? Die Regenbogenskala springt in der Helligkeit ungleichmäßig: Gelb und Cyan erscheinen viel heller als Rot und Blau. Das verzerrt die Wahrnehmung – manche Bereiche wirken dramatisch hervorgehoben, nicht wegen der Datenwerte, sondern wegen der Farbe. Außerdem ist sie für Menschen mit Rot-Grün-Schwäche unlesbar. Perceptuell uniforme Alternativen wie Viridis oder Magma sind immer vorzuziehen.

Was ist der Unterschied zwischen Heatmap und Choropleth-Karte? Die Choropleth-Karte färbt definierte administrative Einheiten (Länder, Bundesländer, Wahlkreise) entsprechend einem Wert. Die räumliche Heatmap zeigt dagegen eine kontinuierliche Dichteschätzung basierend auf Punkten – ohne vordefinierte Grenzen. Eine Choropleth braucht Grenzdaten (Shapefiles), eine räumliche Heatmap nur Koordinaten.

Verwandte Einträge

• Choropleth-Karte — Geografische Daten mit Grenzen einfärben
• Farbwahl in Datenvisualisierungen — Sequenzielle und divergierende Paletten
• Accessibility in Data Viz — Barrierefreie Farbpaletten für Heatmaps

Weiterführend

• Wilke, C. O. (2019). Fundamentals of Data Visualization, Kap. 4 (Color scales). O'Reilly Media.
• Cairo, A. (2016). The Truthful Art. New Riders.
• Few, S. (2012). Show Me the Numbers (2. Aufl.). Analytics Press.
• Nunez, J. R. et al. (2018). Optimizing Colormaps with Consideration for Color Vision Deficiency. PLOS ONE, 13(7).