Mapa de calor
Intensidad en una cuadrícula de dos categorías.
Definición
Un mapa de calor pone dos categorías en filas y columnas y colorea cada celda según su valor. Se lee el patrón de la rejilla: la banda caliente, la fila fría, la esquina vacía. Se usa para actividad por día y hora, resultados por región y producto o cualquier cruce de dos categorías.
- Datos
- y · x · value
- Buena para
- Encontrar el patrón en un cruce de dos categorías.
- Evítala cuando
- Cuando hay que leer el valor exacto de cada celda: el color se compara, pero no se lee como cifra.
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
y | string | La FILA de la rejilla. Atarla en el spec cambia el dibujo; sin ella —ni por `columns` ni por nombre— la pieza FALLA con las columnas que sí ha visto (data.ts:78-84). |
x | string | La COLUMNA de la rejilla. El orden de las columnas es el orden de primera aparición en las filas, no alfabético. |
value | number | La cifra que colorea la celda. Sin ella la pieza FALLA: antes devolvía [] y pintaba un marco vacío con [ok]. |
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 el patrón y no las cifras exactas?
Si hay que leer cada valor, una tabla lo escribe en su casilla.
Sí: quédate con mapa de calor
No: usa Tabla gráfica
¿Filas y columnas son categorías distintas?
Si es la misma lista de métricas en los dos ejes y cada celda es un coeficiente, una matriz de correlaciones está pensada para eso.
Sí: quédate con mapa de calor
No: usa Matriz de correlaciones
¿El orden de filas y columnas tiene sentido propio?
Si quieres que las filas parecidas queden juntas, un mapa de calor con agrupamiento las reordena.
Sí: quédate con mapa de calor
No: usa Mapa de calor agrupado
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('heatmap');
spec.data.rows = misFilas; // y, x, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿En qué orden van las columnas?
En el de su primera aparición en los datos, no en orden alfabético.
¿Qué columnas necesita?
Una para la fila, otra para la columna y una cifra para el color. Sin cualquiera de ellas la pieza falla y dice qué columnas ha visto.
¿Celdas o círculos?
El color se lee mejor cuando muchas celdas están cerca; si quieres que salten las puntas, una tarjeta perforada usa círculos.
¿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 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «cómo se reparten los valores»
Código de barras de eventoscuándo ocurren los eventos en un intervalo
Beeswarmcada individuo de una distribución, sin solaparse
Diagrama de cajamediana, cuartiles y atípicos de una distribución
Gráfico de contornodónde se concentran los puntos
Gráfico de densidadforma suavizada de una distribución
Franja de puntosrespuesta individual de cada caso