Lasaña
Muchas unidades en el tiempo en un mapa de calor.
Definición
Una lasaña es un mapa de calor con una fila por serie y el tiempo continuo en horizontal: cada celda se colorea según el valor de esa serie en ese momento. El orden de las filas lo decide quien escribe la tabla, y es lo que convierte una propagación en una diagonal visible. Se usa para muchas unidades a la vez: países, tiendas, sensores.
- Datos
- series · x · value
- Buena para
- Comparar el nivel de muchas series a lo largo del tiempo y ver cómo una onda se propaga de unas a otras.
- Evítala cuando
- Cuando hay que leer el valor de una celda: el color es un tramo, no una cifra.
- Se lee bien
- Entre 12 y 2000 elementos; dibuja hasta 6000
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
series | string | La fila: una lámina por serie. El ORDEN de aparición en la tabla es el orden de las filas, y es parte del argumento. `spec.columns.y` vale como sinónimo, porque aquí el eje vertical ES la serie; el valor no va nunca por ahí, va por `value`. |
x | date | El instante de la celda. Eje temporal continuo: una fecha que falta deja hueco, no se cierra. |
value | number | Lo que codifica el color, en la rampa de siete tramos calculada sobre el mínimo y el máximo del propio dato. |
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
¿Son demasiadas series para pintarlas como líneas?
Con pocas series, el gráfico de líneas enseña el valor exacto sobre un eje.
Sí: quédate con lasaña
No: usa Gráfico de líneas
¿Basta con el tramo de color, sin leer valores?
Si hay que leer cifras de cada serie, los pequeños múltiplos dan a cada una su eje.
Sí: quédate con lasaña
No: usa Pequeños múltiplos
¿El eje horizontal es tiempo continuo?
Si las columnas son categorías y no fechas, el mapa de calor es la rejilla que corresponde.
Sí: quédate con lasaña
No: usa Mapa de calor
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('lasagna');
spec.data.rows = misFilas; // series, 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 filas?
En el que aparecen en la tabla. Es parte del argumento: ordenar por región o por fecha de inicio es lo que hace visible una propagación.
¿Qué dice el color?
Uno de siete tramos calculados entre el mínimo y el máximo de los propios datos. Es un juicio de tramo; para leerlo sólo está la leyenda.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿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 «cómo cambia en el tiempo»
Retención por cohortescuántos clientes siguen tras cada periodo
Gráfico de áreasuna medida en el tiempo con el volumen destacado
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Barras y línea combinadasuna cifra absoluta junto a su tasa
Bandas de Bollingerprecio frente a su rango habitual de variación
Gráfico con selector de rangoexplorar un tramo de una serie larga