Gráfico de Marimekko
Dos dimensiones de reparto en un mismo total.
Definición
Un gráfico de Marimekko divide un total en columnas cuyo ancho es el tamaño de cada grupo, y cada columna en bloques cuya altura es la cuota de cada segmento dentro de él. Se lee el área: ancho por alto. Se usa para mercados por región y competidor, o canales por hotel.
- Datos
- group · label · value
- Buena para
- Enseñar a la vez el tamaño de cada grupo y cómo se reparte por dentro.
- Evítala cuando
- Cuando quieres comparar alturas entre columnas: con anchos distintos, la misma altura no pesa lo mismo.
- Se lee bien
- Entre 2 y 12 elementos; dibuja hasta 250
- 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é |
|---|---|---|
group | string | La columna del mosaico. Su ANCHO es la suma de los valores de sus filas: no se declara aparte. |
label | string | El segmento dentro de la columna. Filas con la misma región y segmento se suman en un solo bloque. |
value | number | La cifra no negativa del bloque. Manda las DOS dimensiones: la altura dentro de su columna y, sumada, el ancho de la columna. Cero explícito y celdas vacías no aportan área; valores negativos o no finitos se rechazan. |
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
¿El tamaño de cada grupo importa?
Si todos los grupos pesan igual o da igual su tamaño, basta con barras apiladas al cien por cien.
Sí: quédate con gráfico de marimekko
No: usa Barras apiladas
¿Basta con dos niveles, columna y segmento?
Si la jerarquía tiene tres o más niveles, los rectángulos anidados los llevan.
Sí: quédate con gráfico de marimekko
No: usa Treemap
¿Todas las cifras son positivas?
Si hay valores negativos, no pueden ser área: se comparan con barras agrupadas.
Sí: quédate con gráfico de marimekko
No: usa Barras agrupadas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('marimekko');
spec.data.rows = misFilas; // group, label, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Cómo se fija el ancho de cada columna?
Es la suma de los valores de sus filas; no se declara aparte.
¿Qué pasa si repito grupo y segmento?
Las filas con la misma columna y el mismo segmento se suman en un solo bloque.
¿Admite valores negativos?
No: el valor manda el área, y un área negativa no existe. Esas filas se rechazan.
¿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 480 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»
Pool de beneficiosdónde se concentra el beneficio del sector
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