# Générateur de treemap Génère un treemap à partir de données hiérarchiques, l'aire représentant les proportions > Page canonique: https://elysiatools.com/fr/tools/treemap-generator - **Catégorie:** Data Visualization - **Mots-clés:** treemap, hiérarchique, proportion, aire, visualisation ## Présentation Analyse une hiérarchie JSON (name + children + valeur feuille), calcule la valeur totale de chaque nœud et pave le canevas avec l'algorithme squarified-treemap pour garder des rectangles quasi carrés. Les cellules sont colorées par branche de premier niveau et peuvent afficher étiquettes, valeurs et pourcentages. ## Entrées - **Données hiérarchiques** (textarea): JSON hierarchy: each node has a name, optional value for leaves, optional children - **Titre du graphique** (text): Enter chart title... - **Schéma de couleurs** (select) - **Afficher les étiquettes** (checkbox) - **Afficher les valeurs** (checkbox) - **Afficher les pourcentages** (checkbox) - **Largeur de bordure** (range) ## Quand l'utiliser - Vous devez représenter graphiquement la répartition d'un budget ou de ressources entre différents départements et sous-équipes. - Vous souhaitez analyser la structure de fichiers ou l'allocation d'espace disque à partir d'une arborescence de répertoires. - Vous voulez comparer visuellement les parts de marché ou les volumes de ventes de produits organisés par catégories et sous-catégories. ## Fonctionnement - Saisissez ou collez vos données hiérarchiques au format JSON en respectant la structure avec les clés name, children et value. - Personnalisez le rendu en choisissant un schéma de couleurs, l'épaisseur des bordures et l'affichage des étiquettes, valeurs ou pourcentages. - L'algorithme squarified-treemap calcule les proportions et génère un graphique SVG interactif où chaque rectangle correspond à la part relative de chaque nœud. ## Cas d'usage - Visualisation de la répartition budgétaire annuelle d'une entreprise par pôle et par projet. - Analyse de l'occupation de l'espace de stockage d'un serveur par type de fichier et dossier. - Cartographie des parts de marché d'un catalogue de produits e-commerce structuré par catégories. ## Questions fréquentes ### Quel format de données est accepté par le générateur ? L'outil accepte une structure hiérarchique JSON standard contenant des nœuds avec des propriétés name, value (pour les feuilles) et éventuellement children. ### Comment sont attribuées les couleurs dans le treemap ? Les cellules sont colorées automatiquement par branche de premier niveau selon le schéma de couleurs sélectionné (défaut, chaud, froid, pastel ou affaires). ### Qu'est-ce que l'algorithme squarified-treemap ? C'est un algorithme de pavage qui organise les rectangles de manière à ce que leur ratio largeur/hauteur soit le plus proche possible d'un carré, améliorant ainsi la lisibilité. ### Peut-on afficher à la fois les valeurs et les pourcentages ? Oui, vous pouvez activer ou désactiver indépendamment l'affichage des étiquettes, des valeurs numériques et des pourcentages calculés automatiquement. ### L'outil prend-il en charge les données non hiérarchiques ? Non, les données doivent être structurées sous forme d'arbre (parent-enfant) au format JSON pour que le treemap puisse être généré correctement. ## Outils associés - [Générateur de Graphique en Donut](https://elysiatools.com/fr/tools/donut-chart-generator): Générer des graphiques en donut personnalisables à partir de données avec diverses options de style, parfait pour montrer les proportions avec un espace central - [Générateur de Graphique en Stalactites](https://elysiatools.com/fr/tools/icicle-chart-generator): Générer des graphiques en stalactites interactifs pour la visualisation de données hiérarchiques, parfait pour afficher des structures arborescentes, des systèmes de fichiers et des hiérarchies organisationnelles - [Générateur d'organigramme](https://elysiatools.com/fr/tools/org-chart-maker): Génère un organigramme vertical avec noms et postes à partir de données JSON hiérarchiques - [Générateur de Graphique Pyramide](https://elysiatools.com/fr/tools/pyramid-chart-generator): Générer des graphiques pyramide pour la visualisation de structure hiérarchique, parfait pour les organigrammes, les niveaux hiérarchiques et les données proportionnelles - [Générateur de Diagramme en Arbre](https://elysiatools.com/fr/tools/tree-diagram-generator): Générer des diagrammes en arbre interactifs à partir de données hiérarchiques avec un style personnalisable - [Générateur de Graphique Circulaire Multiniveau](https://elysiatools.com/fr/tools/multi-level-pie-chart-generator): Créer des graphiques circulaires multiniveaux concentriques avec relations hiérarchiques et fonctionnalité de drill-down interactive - [Générateur de Graphique en Aires Polaires](https://elysiatools.com/fr/tools/polar-area-chart): Générer des graphiques en aires polaires interactifs pour visualiser les données au format circulaire, parfait pour comparer les catégories avec des motifs cycliques ou des distributions radiales - [Générateur de Graphique en Rose](https://elysiatools.com/fr/tools/rose-chart): Générer de beaux graphiques en rose de Nightingale (graphiques en épi) pour visualiser les données à travers angle et surface, parfait pour les analyses comparatives et la présentation de données historiques ## Exemples - [Exemples Avancés d'Application Grafana](https://elysiatools.com/fr/samples/grafana-samples): Exemples complets de Grafana couvrant le design avancé de tableaux de bord, la configuration d'alertes, l'intégration de sources de données et le développement de plugins - [Exemples de Codes QR](https://elysiatools.com/fr/samples/qrcode-samples): Images de codes QR d'exemple pour tester les outils de lecture et de génération de codes QR - [Exemples de Communication Temps Réel WebRTC](https://elysiatools.com/fr/samples/webrtc-samples): Exemples complets WebRTC pour communication audio/vidéo P2P, canaux de données, partage d'écran et serveur de signalisation - [Exemples D3.js Data Visualization](https://elysiatools.com/fr/samples/d3js-data-visualization): Exemples complets de visualisation de données D3.js incluant graphiques, cartes, animations et visualisations interactives ## Contenu associé - [Generateurs de schemas JSON, donnees mock et fixtures API](https://elysiatools.com/fr/hubs/json-generate): Des outils reunis pour generation de schemas JSON, construction de payloads mock et preparation de fixtures API dans un seul hub. - [Générateurs de code typé depuis JSON (TypeScript, Go, Rust, Kotlin, Java, C#)](https://elysiatools.com/fr/hubs/json-to-typed-code-generators): Collez du JSON et obtenez des types prêts à l'emploi : interfaces TypeScript, structs Go, structs Rust avec serde, data classes Kotlin, classes Java, classes C#, schémas Zod et JSON Schema inféré. - [Outils d interchange JSON et de traduction de formats](https://elysiatools.com/fr/hubs/json-convert): Comparez les outils de conversion JSON pour CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN et d autres formats structures dans un meme hub. - [Outils d inspection, de diff et de transformation JSON](https://elysiatools.com/fr/hubs/json-utility): Regroupe dans un meme hub les outils de formatage JSON, comparaison, inspection de chemins, validation de schema, fusion et transformation pour les workflows API et donnees.