Treemap
Treemap
Qué es
Rectángulos anidados donde el área de cada rectángulo es proporcional a un valor numérico. Los colores pueden indicar una segunda dimensión (ej: variación porcentual).
Para qué sirve
Para mostrar la composición de un todo jerárquico y comparar magnitudes entre categorías y subcategorías simultáneamente.
Cómo leerlo
Anatomía
El área es el único atributo que codifica el valor: cuánto espacio ocupa cada rectángulo dentro de su contenedor, sin espacio entre ellos —a diferencia de un pie chart, acá lo que se compara es área, nunca ángulo. La jerarquía se lee por anidación: un contorno agrupa a las hojas que pertenecen a la misma rama, así que cada nivel es literalmente un rectángulo dentro de otro rectángulo, no una lista plana con sangría. El algoritmo de particionado más usado ajusta cada rectángulo para que su proporción ancho-alto se acerque a 1:1: los rectángulos muy alargados son perceptualmente más difíciles de comparar por área que los que se acercan a un cuadrado, así que el algoritmo sacrifica el orden estricto de las hojas con tal de mantener esa proporción. El color, por último, identifica a qué rama pertenece cada hoja —nunca un valor—: distintos tonos de un mismo color agrupan visualmente a las hojas de una misma rama incluso sin el contorno.
Por qué funciona
Fundamento perceptivo
Maximiza el uso del espacio disponible. Los rectángulos grandes resaltan visualmente los ítems de mayor valor sin necesitar ordenamiento explícito.
Errores comunes
Etiquetas ilegibles en rectángulos chicos
diseña para interactividad (hover para ver detalles) o limita el gráfico a 20-30 categorías.
Dónde se usa
Contextos de aplicación
Composición del índice bursátil por sector y empresa
Qué porcentaje del índice representa cada sector, y dentro de cada sector, cada empresa que lo compone.
Distribución del presupuesto por ministerio y programa
Cuánto del presupuesto total recibe cada ministerio, desglosado en los programas que lo componen.
Uso de disco por carpeta
Qué proporción del almacenamiento ocupa cada carpeta, y dentro de ella, cada subcarpeta.
Cómo construirlo
El mismo gráfico, en 11 librerías open source
Cada librería resuelve las mismas decisiones de diseño, como la escala, el espaciado entre barras o la inserción de la etiqueta de valor, de un modo distinto. Algunas las automatizan; otras las dejan explícitas en el código, a criterio de quien lo escribe. Comparar once implementaciones con los mismos datos y el mismo color de marca aísla esa diferencia, que de otro modo queda oculta detrás de estilos visuales distintos.
Sin función "treemap" en matplotlib (existe squarify, un paquete de terceros): Rectangle patches con una subdivisión "slice and dice" calculada a mano —primero por rama, luego por hoja dentro de cada rama.
import matplotlib.pyplot as plt
branches = [
{"name": "Combustibles fósiles", "color": "#490827", "leaves": [
{"name": "Petróleo", "value": 201}, {"name": "Carbón", "value": 166}, {"name": "Gas natural", "value": 151},
]},
{"name": "No fósiles", "color": "#2C3E50", "leaves": [
{"name": "Renovables", "value": 35}, {"name": "Nuclear", "value": 31}, {"name": "Hidroeléctrica", "value": 16},
]},
]
# Sin funcion "treemap" en matplotlib (existe squarify, un paquete de
# terceros): Rectangle patches con una subdivision "slice and dice"
# calculada a mano -- primero por rama, luego por hoja dentro de cada rama.
fig, ax = plt.subplots(figsize=(6.4, 4.8))
for r in rects(branches): # helper que calcula x0/x1/y0/y1 por hoja
ax.add_patch(plt.Rectangle((r["x0"], r["y0"]), r["x1"] - r["x0"], r["y1"] - r["y0"], facecolor=r["color"], edgecolor="white"))
ax.axis("off")
plt.show()No disponible en estas librerías
No tiene un tipo de gráfico jerárquico ni un layout de subdivisión rectangular —sin un plugin externo (chartjs-chart-treemap), no hay forma de construir esto.
No tiene utilidades de layout jerárquico ni una marca de subdivisión rectangular propia —construirlo a mano terminaría dependiendo de d3-hierarchy de todas formas, sin ninguna ventaja real sobre usar D3 directamente.
Herramientas para construirlo
No-code, desktop y plataformas web, con su licencia visible, abierta o comercial.
Términos relacionados
Con datos reales
Ejemplos de uso.
¿De qué está hecho el consumo energético mundial?
Suministro total de energía por fuente, 2025 (exajulios).
Fuente: Energy Institute, Statistical Review of World Energy 2026 (75.ª edición)
Gráficos relacionados
