# Generador de Treemap Genera un treemap a partir de datos jerárquicos, usando el área para representar proporciones > Página canónica: https://elysiatools.com/es/tools/treemap-generator - **Categoría:** Data Visualization - **Palabras clave:** treemap, jerárquico, proporción, área, visualización ## Descripción general Analiza una jerarquía JSON (name + children + valor de hoja), calcula el valor total de cada nodo y recubre el lienzo con el algoritmo squarified-treemap para que los rectángulos sean casi cuadrados. Las celdas se colorean por rama de nivel superior y pueden mostrar etiquetas, valores y porcentajes. ## Entradas - **Datos jerárquicos** (textarea): JSON hierarchy: each node has a name, optional value for leaves, optional children - **Título del gráfico** (text): Enter chart title... - **Esquema de color** (select) - **Mostrar etiquetas** (checkbox) - **Mostrar valores** (checkbox) - **Mostrar porcentajes** (checkbox) - **Ancho del borde** (range) ## Cuándo usarlo - Cuando necesite representar la distribución proporcional de un presupuesto o gasto entre múltiples departamentos y subequipos. - Al analizar la estructura de archivos o el uso de disco de un sistema organizado en carpetas y subcarpetas. - Para mostrar la participación de mercado de diferentes categorías de productos y sus respectivas variantes en un solo gráfico. ## Cómo funciona - Introduzca sus datos jerárquicos en formato JSON especificando los nombres, nodos hijos y valores de las hojas. - Configure las opciones de visualización, como el título del gráfico, el esquema de color, el ancho del borde y la visibilidad de etiquetas o porcentajes. - El algoritmo procesa la jerarquía, calcula los valores totales de cada rama y genera un gráfico interactivo en formato HTML/SVG con rectángulos proporcionales. ## Casos de uso - Análisis de presupuestos corporativos para identificar qué departamentos consumen la mayor parte de los recursos financieros. - Visualización de inventario de productos agrupados por categorías principales y subcategorías de venta. - Desglose de tráfico web o conversiones por canales de adquisición y campañas específicas. ## Preguntas frecuentes ### ¿Qué formato deben tener los datos de entrada? Deben estar en formato JSON jerárquico, donde cada nodo tiene un nombre ("name") y puede contener un valor ("value") o una lista de nodos hijos ("children"). ### ¿Cómo se determinan los colores de los rectángulos? Los rectángulos se colorean automáticamente agrupados por su rama o categoría de nivel superior según el esquema de color seleccionado. ### ¿Puedo mostrar los valores numéricos exactos en el gráfico? Sí, puede activar la opción "Mostrar valores" para visualizar el valor numérico junto al nombre y el porcentaje en cada celda. ### ¿Qué hace el algoritmo squarified-treemap? Organiza los rectángulos de manera que sus relaciones de aspecto se mantengan lo más cercanas posible a un cuadrado, mejorando la legibilidad. ### ¿Es obligatorio que todos los nodos tengan un valor? No, solo los nodos hoja (los que no tienen hijos) requieren un valor numérico; el valor de los nodos padre se calcula sumando sus descendientes. ## Herramientas relacionadas - [Generador de Gráfico de Dona](https://elysiatools.com/es/tools/donut-chart-generator): Generar gráficos de dona personalizables desde datos con varias opciones de estilo, perfecto para mostrar proporciones con espacio central - [Generador de Gráfico de Heladas](https://elysiatools.com/es/tools/icicle-chart-generator): Generar gráficos de heladas interactivos para visualización de datos jerárquicos, perfecto para mostrar estructuras de árbol, sistemas de archivos y jerarquías organizacionales - [Generador de Organigrama](https://elysiatools.com/es/tools/org-chart-maker): Genera un organigrama vertical con nombres y cargos a partir de datos jerárquicos JSON - [Generador de Gráfico Pirámide](https://elysiatools.com/es/tools/pyramid-chart-generator): Generar gráficos de pirámide para visualización de estructura jerárquica, perfecto para organigramas, niveles jerárquicos y datos proporcionales - [Generador de Diagrama de Árbol](https://elysiatools.com/es/tools/tree-diagram-generator): Generar diagramas de árbol interactivos desde datos jerárquicos con estilo personalizable - [Generador de Gráfico Circular Multinivel](https://elysiatools.com/es/tools/multi-level-pie-chart-generator): Crear gráficos circulares multinivel concéntricos con relaciones jerárquicas y funcionalidad de exploración interactiva - [Generador de Gráfico de Área Polar](https://elysiatools.com/es/tools/polar-area-chart): Generar gráficos de área polares interactivos para visualizar datos en formato circular, perfecto para comparar categorías con patrones cíclicos o distribuciones radiales - [Generador de Gráfico Rosa](https://elysiatools.com/es/tools/rose-chart): Generar hermosos gráficos rosa de Nightingale (gráficos de penacho) para visualizar datos a través de ángulo y área, perfecto para análisis comparativo y presentación de datos históricos ## Ejemplos - [Muestras Avanzadas de Grafana](https://elysiatools.com/es/samples/grafana-samples): Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins - [Ejemplos de Códigos QR](https://elysiatools.com/es/samples/qrcode-samples): Imágenes de códigos QR de muestra para probar herramientas de lectura y generación de códigos QR - [Muestras de Comunicación en Tiempo Real WebRTC](https://elysiatools.com/es/samples/webrtc-samples): Muestras completas de WebRTC para comunicación de audio/video P2P, canales de datos, compartir pantalla y servidor de señalización - [Ejemplos D3.js Data Visualization](https://elysiatools.com/es/samples/d3js-data-visualization): Ejemplos completos de visualización de datos D3.js incluyendo gráficos, mapas, animaciones y visualizaciones interactivas ## Contenido relacionado - [Generadores de esquemas JSON, datos mock y fixtures de API](https://elysiatools.com/es/hubs/json-generate): Herramientas reunidas para generacion de esquemas JSON, construccion de payloads mock y preparacion de fixtures de API en un solo hub. - [Generadores de código tipado a partir de JSON (TypeScript, Go, Rust, Kotlin, Java, C#)](https://elysiatools.com/es/hubs/json-to-typed-code-generators): Pega JSON y obtén tipos listos para usar: interfaces TypeScript, structs Go, structs Rust con serde, data classes Kotlin, clases Java, clases C#, esquemas Zod y JSON Schema inferido. - [Herramientas de intercambio JSON y traduccion de formatos](https://elysiatools.com/es/hubs/json-convert): Compara herramientas de conversion JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN y otros formatos estructurados en un solo hub. - [Herramientas de inspeccion, diff y transformacion JSON](https://elysiatools.com/es/hubs/json-utility): Reune en un solo hub herramientas para formatear JSON, comparar cambios, inspeccionar rutas, validar esquemas, combinar archivos y transformar datos para flujos de API y datos.