Treemaps im Dashboard: Welche Teilbereiche stecken in den großen Rechtecken?
Eine Treemap kann zeigen, wie sich eine messbare Gesamtmenge auf verschachtelte Kategorien verteilt. Die Fläche steht dabei für den vereinbarten Wert, nicht für die Wichtigkeit einer Bezeichnung. Vor der Beauftragung müssen deshalb Hierarchie und Gewichtung feststehen: Welche Einträge sind Untergruppen, und welche Werte werden tatsächlich addiert?
Dieser Leitfaden behandelt die Planung einer Berichts-App. Er ist keine Auswertung Ihrer Geschäftsdaten und kein Nachweis, dass eine bestimmte Darstellung bereits mit Ihren Nutzern getestet wurde.
Erst die Hierarchie, dann die Fläche
Die offizielle D3-Dokumentation beschreibt Treemaps als rekursive Aufteilung einer Fläche in Rechtecke nach den zugehörigen Knotenwerten. Damit unterscheidet sich die Darstellung von einer beliebig eingefärbten Tabelle. Verschachtelte Rechtecke sollen eine echte übergeordnete und untergeordnete Struktur ausdrücken.
Ein hypothetischer Bericht könnte abgeschlossene Arbeiten nach Leistungsbereich und darunter nach Auftragsart gliedern. Die Fläche könnte die erfasste Arbeitszeit darstellen. Dann beantwortet die Ansicht, wo sich diese Zeit innerhalb der vereinbarten Struktur verteilt. Sie zeigt nicht automatisch Umsatz, Gewinn oder die Zahl der Kunden.
Notieren Sie die Ebenen und die Messgröße getrennt. Prüfen Sie, ob ein Auftrag nach Ihrer fachlichen Regel genau einer untergeordneten Gruppe zugeordnet wird oder bewusst aufgeteilt werden muss. Dieselben Stunden mehrfach in verschiedene Zweige zu übernehmen, würde eine andere Gesamtmenge ergeben. Eine hübsche Verschachtelung löst dieses Zuordnungsproblem nicht.
Zählen Sie Einträge oder summieren Sie eine Größe?
Ein gleich großes Rechteck je Auftrag bedeutet etwas anderes als eine Gewichtung nach dessen Dauer. D3 unterscheidet entsprechend zwischen dem Zählen der Blätter einer Hierarchie und dem Aufsummieren von Werten. Welche Variante fachlich sinnvoll ist, muss Ihr Bericht festlegen.
Benennen Sie die Flächengröße direkt an der Ansicht. „Arbeitszeit nach Leistungsbereich und Auftragsart“ ist eindeutiger als „Unsere Leistungen“. Halten Sie Zeitraum, eingeschlossene Aufträge und Einheit sichtbar. Werden statt Arbeitszeit Kosten verwendet, braucht es eine eigene Definition dafür, welche Kosten einbezogen werden.
Für die Planung empfehle ich eine kleine Tabelle mit den untersten Kategorien und ihren Gewichten. Lassen Sie daraus die vorgesehenen Gruppensummen erklären, bevor jemand die Rechtecke gestaltet. Diese Tabelle ist eine fachliche Vorlage, kein Ersatz für spätere Implementierungsprüfungen.
Gruppensummen nicht noch einmal als eigene Beiträge addieren
Die D3-Referenz zu node.sum erklärt eine wichtige technische Grenze: Der Wert eines Knotens entsteht aus dem eigenen gelieferten Wert plus den zusammengefassten Werten seiner Kinder. Die Auswertungsfunktion wird auch für innere Knoten aufgerufen. Sollen ausschließlich die Blätter eigene Beiträge liefern, sieht die Dokumentation für Knoten mit Kindern einen eigenen Beitrag von null vor.
Das ist für importierte Berichte relevant. Eine Datei kann sowohl Einzelwerte als auch bereits berechnete Zwischensummen enthalten. Werden beide als zusätzliche Beiträge behandelt, kann dieselbe Arbeit mehrfach im Gesamtwert landen. Legen Sie deshalb ausdrücklich fest, ob ein übergeordneter Wert eine Kontrollsumme oder ein zusätzlicher eigener Beitrag ist.
Diese Aussage beschreibt die dokumentierte D3-Funktion. Andere Implementierungen müssen anhand ihrer tatsächlichen Aggregationsregel geprüft werden. Eine passende Feldbezeichnung allein beweist nicht, dass die App Ihre Summen richtig bildet.
Negative Werte brauchen eine andere fachliche Entscheidung
Die D3-Funktion zur Summierung verlangt nichtnegative Zahlen. Ein Bericht, der positive und negative Beiträge miteinander verrechnen soll, darf deshalb nicht ungeprüft als diese flächengewichtete Hierarchie umgesetzt werden.
Entfernen Sie negative Beiträge nicht einfach und nennen Sie die verbleibende Fläche weiterhin Nettoergebnis. Vereinbaren Sie stattdessen eine geeignete Darstellung oder eine ausdrücklich anders definierte Auswertung. Ob getrennte Ansichten sinnvoll sind, hängt von der tatsächlichen Fragestellung ab. Dieser Leitfaden empfiehlt keinen pauschalen Ersatz für jede Art von Saldo.
Eine echte Null und ein unbekannter Wert sind ebenfalls unterschiedliche Datenzustände. Für die Produktplanung sollte feststehen, wie Kategorien ohne sichtbare Fläche auffindbar bleiben und wie fehlende Werte erklärt werden. Die Bibliotheksfunktion beantwortet diese Bedienfrage nicht für Sie.
Eine neue Position bedeutet nicht automatisch einen neuen Inhalt
D3 bietet unterschiedliche Verfahren zur Rechteckaufteilung. Die Dokumentation beschreibt außerdem ein Verfahren, das bei passenden Folgeaufrufen Nachbarschaften des vorherigen Layouts erhält. Die stabilere Anordnung hat laut Quelle einen möglichen Nachteil: Spätere Aufteilungen können weniger günstig ausfallen als eine neu optimierte Anordnung.
Für Auftraggeber ergibt sich daraus eine bewusste Wahl. Soll eine aktualisierte Ansicht möglichst gut lesbare Rechtecke bilden, oder sollen Leser Gruppen leichter an ihrer bisherigen Position wiederfinden? Lassen Sie beide Anforderungen mit repräsentativen Beispielen prüfen. Versprechen Sie keine unveränderliche Position für beliebige Datenänderungen, nur weil die gewählte Bibliothek ein stabilisierendes Verfahren anbietet.
Auf schmalen Bildschirmen können kleine Kategorien außerdem zu wenig Platz für ihre Beschriftung haben. Vereinbaren Sie eine lesbare alternative Werteansicht und einen eindeutigen Kategorienpfad. Eine Interaktion muss erkennen lassen, ob sie eine Untergruppe öffnet oder lediglich nähere Angaben zur bestehenden Fläche zeigt.
Fachliche Abnahme mit einer kleinen verschachtelten Testmenge
Nehmen Sie Hierarchie und Gewichtung in die Akzeptanzkriterien Ihrer Web-App auf. Nutzen Sie dafür synthetische Daten ohne vertrauliche Auftragsinformationen.
- Jede unterste Kategorie erscheint im vorgesehenen Zweig und mit dem richtigen Gewicht.
- Gruppen- und Gesamtsummen stimmen mit der vereinbarten Aggregation überein. Mitgelieferte Kontrollsummen werden nicht versehentlich zusätzlich gezählt.
- Ein Wechsel von Anzahl zu Dauer wird als andere Flächengröße erkennbar, falls beide Ansichten beauftragt sind.
- Negative, fehlende und echte Nullwerte erhalten die ausdrücklich vereinbarte Behandlung.
- Nach einer Aktualisierung bleiben Kategorien über ihre Identität nachvollziehbar, nicht nur über ihre Bildschirmposition.
- Kleine Rechtecke, Kategorienpfade und eine verfügbare Werteansicht sind auch auf dem vorgesehenen Mobilgerät verständlich.
Das sind vorgeschlagene Abnahmeschritte, kein ausgeführter Dashboard-Test. Für die Planung Ihrer Berichts-App bringen Sie am besten die gewünschte Kategorienstruktur und eine harmlose Beispieltabelle mit. Daraus lässt sich klären, ob verschachtelte Flächen die Entscheidung wirklich unterstützen.
Häufige Fragen
Zeigt das größte Rechteck automatisch den wichtigsten Bereich?
Nein. Es zeigt die größte Ausprägung der vereinbarten Flächengröße innerhalb der Darstellung. Strategische Wichtigkeit, Rentabilität oder Dringlichkeit brauchen eigene Definitionen und gegebenenfalls andere Berichte.
Können wir vorhandene Zwischensummen mit importieren?
Ja, aber ihre Rolle muss ausdrücklich definiert sein. Eine Kontrollsumme ist nicht automatisch ein zusätzlicher Beitrag. Prüfen Sie die Aggregationsregel der tatsächlichen Implementierung.
Muss jede Kategorie im Rechteck beschriftet sein?
Bei kleinen Flächen kann der Platz fehlen. Vereinbaren Sie eine zuverlässige alternative Zuordnung zu Name, Kategorienpfad und Wert. Der Verzicht auf abgeschnittene Beschriftungen darf Kategorien nicht unauffindbar machen.
Quellen und Grenzen
D3: Treemap stützt die verschachtelte Flächenaufteilung und den beschriebenen Zielkonflikt stabiler Folgeanordnungen. D3: Hierarchy, node.sum und node.count stützt Aggregation, nichtnegative Beiträge und Blattzählung. Beide offiziellen Dokumente wurden am 26. Oktober 2026 gelesen. Zuordnung, Datenzustände, Bedienung und Abnahme sind Planungsempfehlungen, keine bereits implementierten oder zertifizierten Funktionen.