# Treemap-Generator Erzeugt ein Treemap aus hierarchischen Daten, wobei die Fläche die Anteile darstellt > Kanonische Seite: https://elysiatools.com/de/tools/treemap-generator - **Kategorie:** Data Visualization - **Schlagwörter:** treemap, hierarchie, anteil, fläche, visualisierung ## Überblick Wertet eine JSON-Hierarchie aus (name + children + Blattwert), berechnet den Gesamtwert jedes Knotens und kachelt die Zeichenfläche mit dem Squarified-Treemap-Algorithmus, damit die Rechtecke nahezu quadratisch bleiben. Zellen werden nach Zweig der obersten Ebene eingefärbt und können Beschriftungen, Werte und Prozente zeigen. ## Eingaben - **Hierarchische Daten** (textarea): JSON hierarchy: each node has a name, optional value for leaves, optional children - **Diagrammtitel** (text): Enter chart title... - **Farbschema** (select) - **Beschriftungen anzeigen** (checkbox) - **Werte anzeigen** (checkbox) - **Prozente anzeigen** (checkbox) - **Randbreite** (range) ## Wann verwenden - Wenn Sie komplexe, verschachtelte Datenstrukturen wie Budgets oder Dateigrößen übersichtlich darstellen möchten. - Wenn Sie relative Anteile und hierarchische Verhältnisse auf einen Blick vergleichen müssen. - Wenn Sie eine platzsparende Visualisierung suchen, die große Datenmengen ohne Scrollen abbildet. ## Funktionsweise - Geben Sie Ihre hierarchischen Daten im JSON-Format ein, wobei jeder Knoten einen Namen und optionale Unterknoten (children) oder Blattwerte (value) besitzt. - Wählen Sie ein Farbschema aus und legen Sie fest, ob Beschriftungen, Werte oder Prozentangaben auf den Kacheln angezeigt werden sollen. - Der Squarified-Treemap-Algorithmus berechnet die optimalen Kachelgrößen und rendert das Diagramm direkt als interaktive HTML-Grafik. ## Anwendungsfälle - Visualisierung von Unternehmensbudgets zur Analyse der Verteilung auf Abteilungen und Einzelprojekte. - Darstellung von Festplattenbelegungen oder Dateisystemen zur Identifikation großer Speicherfresser. - Analyse von Produktkategorien und deren Umsatzanteilen im E-Commerce. ## Häufig gestellte Fragen ### Welche Datenstruktur benötigt der Generator? Das Tool benötigt eine JSON-Hierarchie mit den Schlüsseln 'name', 'value' für Endknoten und optional 'children' für Unterordner. ### Wie werden die Farben der Kacheln bestimmt? Die Kacheln werden automatisch basierend auf dem ausgewählten Farbschema und dem jeweiligen Hauptzweig der obersten Ebene eingefärbt. ### Kann ich die Kachelränder anpassen? Ja, die Randbreite lässt sich über den Schieberegler flexibel zwischen 0 und 6 Pixeln einstellen. ### Unterstützt das Tool Prozentanzeigen? Ja, Sie können die Option zur Anzeige von Prozentwerten aktivieren, um den relativen Anteil jeder Kachel direkt einzublenden. ### Was bewirkt der Squarified-Algorithmus? Er sorgt dafür, dass die Kacheln möglichst quadratisch statt langgezogen dargestellt werden, was die Lesbarkeit der Beschriftungen verbessert. ## Ähnliche Tools - [Donut-Diagramm-Generator](https://elysiatools.com/de/tools/donut-chart-generator): Erstellen Sie anpassbare Donut-Diagramme aus Daten mit verschiedenen Styling-Optionen, perfekt zur Anzeige von Proportionen mit zentralem Raum - [Eiszapfen-Diagramm Generator](https://elysiatools.com/de/tools/icicle-chart-generator): Interaktive Eiszapfen-Diagramme für hierarchische Datenvisualisierung generieren, perfekt für die Anzeige von Baumstrukturen, Dateisystemen und organisatorischen Hierarchien - [Organigramm-Generator](https://elysiatools.com/de/tools/org-chart-maker): Erzeugt ein vertikales Organigramm mit Namen und Positionen aus hierarchischen JSON-Daten - [Pyramiden-Diagramm-Generator](https://elysiatools.com/de/tools/pyramid-chart-generator): Pyramiden-Diagramme für hierarchische Strukturvisualisierung generieren, perfekt für Organigramme, Hierarchieebenen und proportionale Daten - [Baumdiagramm-Generator](https://elysiatools.com/de/tools/tree-diagram-generator): Interaktive Baumdiagramme aus hierarchischen Daten mit anpassbarem Stil generieren - [Mehrstufiger Kreisdiagramm-Generator](https://elysiatools.com/de/tools/multi-level-pie-chart-generator): Erstellen Sie konzentrische mehrstufige Kreisdiagramme mit hierarchischen Beziehungen und interaktiver Drill-Down-Funktionalität - [Polardiagramm Generator](https://elysiatools.com/de/tools/polar-area-chart): Interaktive Polardiagramme generieren zur Visualisierung von Daten im Kreisformat, perfekt zum Vergleich von Kategorien mit zyklischen Mustern oder radialen Verteilungen - [Rosendiagramm Generator](https://elysiatools.com/de/tools/rose-chart): Schöne Nightingale-Rosendiagramme (Coxcomb-Diagramme) generieren zur Visualisierung von Daten durch Winkel und Fläche, perfekt für vergleichende Analysen und historische Datendarstellung ## Beispiele - [Grafana Fortgeschrittene Anwendungsbeispiele](https://elysiatools.com/de/samples/grafana-samples): Umfassende Grafana-Beispiele für fortgeschrittenes Dashboard-Design, Alerting-Konfiguration, Datenquellen-Integration und Plugin-Entwicklung - [QR-Code-Beispiele](https://elysiatools.com/de/samples/qrcode-samples): Beispiel-QR-Code-Bilder zum Testen von QR-Code-Lese- und Generierungswerkzeugen - [WebRTC Echtzeitkommunikation Beispiele](https://elysiatools.com/de/samples/webrtc-samples): Umfassende WebRTC-Beispiele für P2P Audio/Video-Kommunikation, Datenkanäle, Bildschirmfreigabe und Signalisierungsserver - [D3.js Datenvisualisierung Beispiele](https://elysiatools.com/de/samples/d3js-data-visualization): Umfassende D3.js datenvisualisierung beispiele einschließlich diagramme, karten, animationen und interaktive visualisierungen ## Verwandte Inhalte - [Generatoren fur JSON-Schemas, Mock-Daten und API-Fixtures](https://elysiatools.com/de/hubs/json-generate): Gebundelte Werkzeuge fur JSON-Schema-Generierung, Aufbau von Mock-Payloads und Vorbereitung von API-Fixtures in einem Hub. - [JSON-zu-typisiertem-Code-Generatoren (TypeScript, Go, Rust, Kotlin, Java, C#)](https://elysiatools.com/de/hubs/json-to-typed-code-generators): JSON einfügen und einsatzbereite Typen erhalten: TypeScript-Interfaces, Go-Structs, Rust-Structs mit serde, Kotlin-Data-Classes, Java-Klassen, C#-Klassen, Zod-Schemata und inferiertes JSON-Schema. - [Tools fur JSON-Austausch und Format-Ubersetzung](https://elysiatools.com/de/hubs/json-convert): Vergleiche JSON-Konvertierungswerkzeuge fur CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN und ahnliche strukturierte Formate in einem Hub. - [Werkzeuge fur JSON-Inspektion, Diff und Transformation](https://elysiatools.com/de/hubs/json-utility): Bunde JSON-Formatierung, Diff, Pfad-Inspektion, Schema-Prufung, Merge und Transformation in einem Hub fur API- und Daten-Workflows.