Treemap

Treemap ist eine Visualisierungsform für hierarchische Daten, bei der Elemente als verschachtelte Rechtecke dargestellt werden, deren Fläche proportional zu einem numerischen Wert ist.

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

Was ist eine Treemap?

Die Treemap wurde 1992 von Ben Shneiderman an der University of Maryland entwickelt, um die Größenverteilung von Dateien auf Festplatten intuitiv darzustellen. Das Grundprinzip: Ein Rechteck wird rekursiv in kleinere Rechtecke unterteilt. Jedes Rechteck repräsentiert ein Element der Hierarchie; seine Fläche entspricht einem quantitativen Wert (z. B. Größe, Umsatz, Anzahl).

Die Hierarchie (der Baum) ist die eigentliche Datenstruktur dahinter: Es gibt Kategorien (Eltern) und Unterkategorien (Kinder). Eltern-Rechtecke umschließen alle zugehörigen Kind-Rechtecke. Die Farbe kann eine zweite Variable kodieren (z. B. Wachstumsrate, Kategorienzugehörigkeit).

Erklärung

Algorithmen für die Rechteckanordnung:

Die Herausforderung bei Treemaps ist das sogenannte Squarified Layout: Rechtecke sollten möglichst quadratisch sein, damit ihre Fläche intuitiv wahrnehmbar ist. Sehr lange, schmale Rechtecke erschweren die Flächenschätzung. Algorithmen wie der „Squarified"-Algorithmus (Bruls et al., 1999) optimieren das Seitenverhältnis. Datawrapper und D3.js nutzen diesen Algorithmus standardmäßig.

Farbkodierung einer zweiten Variable:

Oft wird die Farbe der Rechtecke genutzt, um eine zweite Variable zu kodieren. Klassisches Beispiel: Im Aktienmarkt-Treemap zeigt die Fläche die Marktkapitalisierung, die Farbe (Grün/Rot) den Kursveränderung am aktuellen Tag. So sieht man auf einen Blick, welche großen Unternehmen heute steigen oder fallen.

Lesbarkeit bei vielen kleinen Elementen:

Das größte Problem der Treemap: Wenn viele Elemente mit kleinen Werten vorhanden sind, entstehen winzige Rechtecke, die kaum noch beschriftet werden können. Strategien:

• Kleine Elemente in einer „Sonstige"-Kategorie zusammenfassen.
• Interaktive Treemaps (Drill-Down) erlauben es, hineinzuzoomen.
• Zoomable Treemaps in D3.js ermöglichen Klick-Navigation durch die Hierarchie.

Flächenwahrnehmung:

Menschen schätzen Flächen weniger präzise als Längen (Balkendiagramm) oder Positionen (Scatter Plot). Cleveland und McGills Rangliste der visuellen Wahrnehmungsgenauigkeit (1984) zeigt: Fläche ist ein schwächerer Kanal als Länge oder Position. Das bedeutet: Treemaps kommunizieren grobe Größenordnungen gut, aber kleine Unterschiede zwischen ähnlich großen Rechtecken sind schwer zu erkennen.

Alternativen:

Wenn die Hierarchie selbst (die Struktur) kommuniziert werden soll (wer gehört zu wem), sind Sunburst-Diagramme (zirkuläre Baumstrukturen) oder klassische Baumdiagramme besser. Wenn nur ein Hierarchie-Level vorhanden ist (alle Kategorien gleichrangig), können Balkendiagramme präziser sein.

Wann einsetzen / wann nicht

Einsetzen, wenn:

• Hierarchische Daten mit zwei Ebenen (Kategorien + Unterkategorien) und quantitativen Werten vorhanden sind.
• Auf einen Blick erkennbar sein soll, welche Elemente dominieren (proportionale Flächenwahrnehmung genügt).
• Zwei Variablen gleichzeitig kodiert werden sollen (Fläche + Farbe).
• Eine große Anzahl von Elementen effizient im Raum dargestellt werden soll.

Nicht einsetzen, wenn:

• Präzise Zahlenvergleiche zwischen ähnlich großen Elementen nötig sind – Balkendiagramm wählen.
• Die Hierarchiestruktur selbst kommuniziert werden soll – Baumdiagramm wählen.
• Die meisten Elemente winzig sind und keine sinnvolle Beschriftung erlauben.
• Keine Hierarchie vorhanden ist – einfacher Scatter Plot oder Balkendiagramm.

Beispiele (5 konkrete)

1. Aktienmarkt-Übersicht: Finanzmedien wie Bloomberg oder Finviz nutzen Treemaps, um börsennotierte Unternehmen nach Marktkapitalisierung (Fläche) und Kursveränderung (Farbe: Grün/Rot) zu zeigen. Auf einen Blick erkennbar: Welche Aktien sind heute groß und grün oder groß und rot?
2. Bundeshaushalt 2025: Ministerien als Eltern-Rechtecke, Haushaltspositionen als Kind-Rechtecke. Zeigt unmittelbar, welche Bereiche den größten Anteil am Haushalt haben.
3. Dateigrößen auf einer Festplatte: WinDirStat und DaisyDisk nutzen Treemaps, um Speicherplatzverbrauch zu visualisieren. Große Rechtecke = große Dateien/Ordner. Praktisches Werkzeug für Systemadministration.
4. E-Commerce-Umsatz nach Kategorie und Unterkategorie: Hauptkategorien (Elektronik, Mode, Sport) als Eltern, Produktuntergruppen als Kinder. Zeigt, welche Subcategories den meisten Umsatz generieren.
5. Wikipedia-Artikel nach Themenbereich und Länge: Eine Treemap der 10.000 längsten Wikipedia-Artikel, gruppiert nach Hauptkategorie. Zeigt auf einen Blick, in welchen Bereichen Wikipedia besonders ausführlich ist.

In der Praxis

Datawrapper: Datawrapper bietet einen Treemap-Typen, der CSV-Daten mit Hierarchie-Spalten (Eltern-Kategorie, Unterkategorie, Wert) akzeptiert. Automatisches Squarified Layout, optionale Farbkodierung nach einer zweiten Spalte. Responsives Embed-Widget für Webartikel.

Flourish: Flourish bietet Treemap-Templates mit interaktiven Hover-Tooltips und Drill-Down-Funktion. Gut für Kommunikationszwecke mit Webpublikum; weniger Kontrolle über technische Details als D3.js.

D3.js: D3.js bietet das d3-hierarchy-Modul mit d3.treemap()-Layout. Hierarchische JSON-Daten werden über d3.hierarchy() in eine Baumstruktur umgewandelt. Das Treemap-Layout berechnet automatisch x, y, Breite und Höhe für jedes Rechteck. Interaktive Drill-Down-Treemaps lassen sich mit Klick-Events implementieren. Zoomable Treemaps sind ein bekanntes D3-Tutorial (Observable Notebooks).

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Warum heißt es Treemap, obwohl es keine Bäume zeigt? Der Name bezieht sich auf die zugrundeliegende Datenstruktur: einen Baum (Tree) in der Informatik – eine hierarchische Struktur mit Wurzel, Ästen und Blättern. Die visuelle Darstellung als Rechtecke heißt „Map" (Karte, Abbildung). Die Treemap ist also eine visuelle Abbildung (Map) einer Baum-Datenstruktur (Tree). Der eigentliche Baum – mit Linien und Ästen – ist das Baumdiagramm.

Kann eine Treemap auch zeitliche Veränderungen zeigen? Nicht direkt als statisches Diagramm. Animierte Treemaps können Veränderungen über die Zeit darstellen (die Rechtecke verkleinern und vergrößern sich). Flourish bietet solche Animationen. Allerdings sind Rechteck-Verschiebungen kognitiv anspruchsvoll zu verfolgen. Alternativ: Mehrere Treemap-Momentaufnahmen nebeneinander (Small Multiples) oder ein Balkendiagramm für die Veränderungsraten.

Verwandte Einträge

• Sankey-Diagramm — Flüsse statt Hierarchien
• Waffle Chart — Anteile ohne Hierarchie intuitiv darstellen
• Farbwahl in Datenvisualisierungen — Zweite Variable durch Farbe kodieren

Weiterführend

• Shneiderman, B. (1992). Tree visualization with tree-maps: 2-d space-filling approach. ACM Transactions on Graphics, 11(1), 92–99.
• Wilke, C. O. (2019). Fundamentals of Data Visualization. O'Reilly Media.
• Few, S. (2012). Show Me the Numbers (2. Aufl.). Analytics Press.
• Cairo, A. (2016). The Truthful Art. New Riders.