Marimekko Chart

Categoría Composición

Qué es

Gráfico de barras donde tanto la altura como el ancho de cada columna son variables. El ancho representa el tamaño de una categoría y la altura muestra la composición interna.

Para qué sirve

Para mostrar simultáneamente la estructura de mercado (tamaño de segmentos) y la composición interna de cada segmento.

Cómo leerlo

Anatomía

Dos linajes independientes convergen en esta misma forma visual. Uno académico: una técnica de "mosaic display" para tablas de contingencia se introdujo formalmente a comienzos de los años 80, como forma de visualizar dos variables categóricas cruzadas al mismo tiempo. El otro informal y sin origen puntual documentado: una variante de este mismo gráfico se popularizó en firmas de consultoría estratégica desde mediados del siglo XX, bautizada de manera coloquial por el parecido de sus bloques de colores con estampados textiles geométricos. Ambos linajes llegan al mismo lugar: una tabla de contingencia convertida en rectángulos donde tanto el ancho como el alto codifican datos, aunque comparar áreas sea más lento para el ojo que comparar largos.

Revestimiento de piedra en bloques rectangulares de ancho y alto claramente distintos, encajados sin espacio entre ellos cubriendo todo el muro: la misma anatomía de un marimekko chart, donde cada bloque varía en dos dimensiones a la vez, no solo en una

Por qué funciona

Fundamento perceptivo

Es el único gráfico estándar que codifica dos variables cuantitativas en las dimensiones del rectángulo. Muy poderoso para análisis de mercado en una sola vista.

Errores comunes

Difícil sin práctica previa

A diferencia de una barra apilada normal, en un marimekko tanto el ancho de cada columna como la altura de cada segmento dentro de ella codifican información —la primera vez que alguien lo ve, es común que solo note una de las dos dimensiones y pase por alto la otra por completo. Una etiqueta explícita con ambos valores (el total de la columna y el porcentaje de cada segmento) ayuda a que la doble lectura sea evidente.
Columnas angostas con texto ilegible

Cuando una categoría representa una fracción chica del total, su columna se vuelve tan angosta que ya no cabe ninguna etiqueta dentro de ella. Sacar esas etiquetas hacia afuera con líneas guía, o agrupar las columnas más chicas en una categoría "otros", evita dejar segmentos de datos sin ninguna forma de leerlos.
Demasiadas categorías en cualquiera de los dos ejes

Un marimekko con muchas columnas y, dentro de cada una, muchos segmentos, multiplica la cantidad de comparaciones que el lector debe hacer en dos dimensiones a la vez. Limitar tanto el número de columnas como el número de segmentos por columna a un puñado cada uno es lo que mantiene el gráfico legible como comparación, no solo como mosaico decorativo.

Dónde se usa

Contextos de aplicación

Estructura de mercado

Cuota de cada actor dentro de una categoría de producto, el uso clásico de consultoras estratégicas.

Arriendo comercial

Superficie ocupada por rubro dentro de una galería o mercado techado.

Mix de producto

Participación de cada línea dentro de las ventas totales de un local.

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.

Matplotlib License (estilo BSD)

Sin función "marimekko": ax.bar() con width y x variables (no evenly-spaced), y bottom acumulado para apilar cada segmento —las tres cosas que un gráfico de barras común asume fijas.

import matplotlib.pyplot as plt

items = [
    {"label": "China", "width": 52.5, "segments": [58, 7, 35]},
    {"label": "EE.UU.", "width": 22.7, "segments": [16, 61, 23]},
    {"label": "UE", "width": 14.2, "segments": [10, 43, 47]},
    {"label": "India", "width": 10.6, "segments": [74, 5, 21]},
]
colores = ["#490827", "#760D3E", "#C08AA3"]

# Sin funcion "marimekko": ax.bar() con width y x variables (no
# evenly-spaced), y bottom acumulado para apilar cada segmento -- las
# tres cosas que un grafico de barras comun asume fijas.
fig, ax = plt.subplots(figsize=(7.6, 4.2))
cx = 0
for item in items:
    bottom = 0
    for v, c in zip(item["segments"], colores):
        ax.bar(cx + item["width"] / 2, v, width=item["width"] - 1, bottom=bottom, color=c)
        bottom += v
    ax.text(cx + item["width"] / 2, -6, item["label"], ha="center")
    cx += item["width"]
ax.set_xlim(0, cx); ax.set_ylim(0, 100); ax.axis("off")
plt.show()

No disponible en estas librerías

Chart.js

Su escala de categorías asume barras del mismo ancho, espaciadas uniformemente —no acepta un ancho ni una posición x distinta por barra, el requisito básico de un marimekko.

ApexCharts

Misma limitación que Chart.js: sus categorías se distribuyen a ancho fijo y espaciado uniforme, sin soporte para anchos de barra variables por categoría.