Treemap
Partes de un total en rectángulos anidados.
Definición
Un treemap divide un rectángulo en bloques con un área proporcional a su valor, agrupados por la categoría a la que pertenecen. Se lee buscando los bloques grandes y viendo en qué grupo caen. Se usa para presupuestos, carteras, ventas por producto o espacio en disco.
- Datos
- parent · label · value
- Buena para
- Ver qué partes pesan más dentro de un total y a qué grupo pertenecen.
- Evítala cuando
- Cuando hay que comparar valores parecidos: el ojo distingue mal áreas con formas distintas.
- Se lee bien
- Entre 3 y 50 elementos; dibuja hasta 300
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
parent · opcional | string | El grupo que agrupa los bloques. Sin ella el treemap es plano: todos los bloques cuelgan de la raíz. |
label · opcional | string | El nombre del bloque, que se escribe dentro si cabe. |
value · opcional | number | El área del bloque. Si no hay ninguna columna numérica cada bloque vale 1 y el treemap reparte a partes iguales. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Basta con ver qué partes pesan más, sin ordenar con precisión?
Si hay que comparar valores cercanos, unas barras ordenadas los separan mejor.
Sí: quédate con treemap
No: usa Gráfico de barras horizontales
¿Hay más de cinco o seis partes?
Si son pocas partes de un total, un anillo las enseña sin necesidad de rotular bloques.
Sí: quédate con treemap
No: usa Gráfico de anillo
¿Te basta con un nivel de agrupación?
Si la jerarquía tiene varios niveles que conviene recorrer, los anillos concéntricos los separan.
Sí: quédate con treemap
No: usa Gráfico de rayos solares
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('treemap');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Por qué no tiene eje?
Porque el área es la magnitud y la vecindad dice la pertenencia. Se compara por tamaño, no contra una escala.
¿Y si no hay columna numérica?
Cada bloque vale 1 y el rectángulo se reparte a partes iguales.
¿Cómo se agrupan los bloques?
Con una columna de grupo. Sin ella, todos cuelgan de la raíz y el treemap es plano.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «partes de un todo»
Anidamiento conceptualconceptos contenidos unos dentro de otros- Gráfico de anilloreparto de un total en pocas partes
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles
Árbol con sangríasjerarquía detallada con su valor