Mapa de calor de calendario
Actividad día a día durante el año.
Definición
Un mapa de calor de calendario dibuja cada día como una casilla en la retícula del año y la colorea según su valor. Se leen de un vistazo las rachas, los días de la semana flojos y las temporadas. Se usa para actividad diaria: ventas, visitas, incidencias o entrenamientos.
- Datos
- x · value
- Buena para
- Ver patrones de calendario: qué días de la semana, qué semanas y qué temporadas concentran la actividad.
- Evítala cuando
- Cuando lo que importa es si la serie sube o baja: la tendencia se pierde repartida en casillas.
- Se lee bien
- Entre 30 y 365 elementos; dibuja hasta 8000
- 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é |
|---|---|---|
x · opcional | date | El día, en ISO. Se busca entre las columnas de TEXTO (`findStringColumn`), así que una columna de fechas guardada como número no se encuentra. Sin ella la fecha queda vacía y la casilla no cae en ningún día. |
value · opcional | number | La intensidad de la casilla. Si la columna no está, TODOS los días valen 0 (data.ts:108) y la retícula sale plana sin decirlo. |
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
¿Cada día concreto cuenta?
Si basta con una semana tipo, la tarjeta perforada resume la actividad por día y hora.
Sí: quédate con mapa de calor de calendario
No: usa Tarjeta perforada
¿El patrón es de calendario y no de tendencia?
Si lo que se discute es si la serie sube o baja, una línea sobre el tiempo lo enseña.
Sí: quédate con mapa de calor de calendario
No: usa Gráfico de líneas
¿Cabe en un año o poco más?
Para muchos años seguidos, unas franjas de color resumen la serie en una sola banda.
Sí: quédate con mapa de calor de calendario
No: usa Franjas de color
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('calendar');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿En qué formato van las fechas?
En ISO y como texto. Una columna de fechas guardada como número no se reconoce.
¿Por qué la retícula sale de un solo color?
Si no encuentra la columna numérica de valor, todos los días valen cero y la retícula sale plana sin avisar. Comprueba que esa columna existe y es numérica.
¿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 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»
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
Burndowntrabajo pendiente frente al plan de un sprint