Pedir acceso

Mapa de calor de celdas variables

Intensidad con celdas de ancho distinto.

Definición

Un mapa de calor de celdas variables pinta una retícula de categorías en la que el color de cada casilla es una tasa y su área es la base sobre la que se calculó. Se lee buscando colores intensos en casillas grandes: una tasa alta sobre casi nada queda pequeña. Se usa para tasas de devolución por talla, siniestralidad por tramo o conversión por segmento.

Editar con tus datosSVGSpec JSON
La talla que más se devuelve casi no se vende: lo que sangra es la M de vestido
Datos
y · x · size · color
Buena para
Leer una tasa sin olvidar sobre cuántos casos se calculó.
Evítala cuando
Cuando todas las casillas tienen una base parecida: el área no aporta y un mapa de calor normal basta.
Se lee bien
Entre 4 y 200 elementos; dibuja hasta 350
Datos que faltan
Se niega a dibujar y dice qué valor falta.
Accesibilidad
Lector de pantalla: resumen en texto · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

ColumnaTipoPara qué
ystringCategoría de FILA de la retícula. Su orden de aparición en el fichero es el orden de partida; `variableCell.orden` puede reordenarlas, y la figura escribe con qué criterio.
xstringCategoría de COLUMNA de la retícula. Se dibuja siempre en el orden en que aparece y no se reordena nunca: en el caso canónico es una escala (tallas, tramos, meses) y alfabetizarla la destruye.
sizenumberLa BASE sobre la que se ha calculado la razón: unidades, casos, expuestos, importe. Decide el ÁREA de la casilla, así que va anclada en cero y no admite negativos. Una casilla con base cero no se dibuja —una razón sobre nada no es una razón— y se cuenta aparte de las que faltan.
colornumberLa RAZÓN que se lee en la tinta: una tasa, un porcentaje, un índice. Admite signo. La rampa se reparte sobre el mínimo y el máximo OBSERVADOS en las casillas que se dibujan, no sobre todas.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Cada tasa se calcula sobre una base distinta?

Si la base es parecida en todas las casillas, el color solo ya cuenta la historia.

Sí: quédate con mapa de calor de celdas variables

No: usa Mapa de calor

¿Lo que se lee es una tasa?

Si es el reparto de un total entre dos dimensiones, el área de cada bloque basta.

Sí: quédate con mapa de calor de celdas variables

No: usa Gráfico de Marimekko

¿Filas y columnas son categorías?

Si las dos dimensiones son numéricas continuas, conviene situar cada punto en dos ejes con su tamaño.

Sí: quédate con mapa de calor de celdas variables

No: usa Gráfico de burbujas

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('variablecellheatmap');
spec.data.rows = misFilas; // y, x, size, color
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué dice el área de la casilla?

La base: unidades, casos o importe. Va anclada en cero y no admite negativos; una casilla con base cero no lleva marca.

¿Cómo se reparte el color?

Sobre el mínimo y el máximo observados de la tasa, que admite signo.

¿Muestra cuántos casos hay en cada casilla?

No. El producto de tasa y base es una tercera medida que el dato no trae.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «comparar cifras»

Guía para elegir: comparar cifras →