Franjas de color
Una serie larga resumida en color.
Definición
Las franjas de color resumen una serie larga en una tira de bandas verticales, una por periodo, teñidas según el valor. No hay ejes ni rótulos por punto: lo que se lee es de qué lado de una referencia cae cada periodo y cuánto tiempo lleva la serie en ese lado. Se usa para derivas lentas como la temperatura, la eficiencia o un indicador durante décadas.
- Datos
- x · value
- Buena para
- Mostrar una deriva lenta y cuándo la serie cambió de lado respecto a una referencia.
- Evítala cuando
- Cuando importa cuánto valió cada periodo: la tira no da cifras.
- Se lee bien
- Entre 12 y 350 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
| Columna | Tipo | Para qué |
|---|---|---|
x | any | El rótulo del periodo, una fila por franja y en orden de más antiguo a más reciente: el orden de las filas ES el eje. Cuando todos los rótulos son un año («1996») o un año-mes («2019-04»), la continuidad de la serie se comprueba y un salto ABORTA: en una tira sin ejes un hueco no deja marca. Con cualquier otro rótulo se dibuja en el orden del fichero, sin comprobar. |
value | number | Lo medido en cada periodo: es lo que da su tinta a la franja, y la única codificación de la figura. Tiene que haber una sola columna numérica; con varias, el componente falla pidiendo cuál, porque teñir la tira con la equivocada da la misma figura sin nada que lo delate. El encabezado de esa columna es el nombre de la métrica y se escribe en la lámina. |
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 saber de qué lado de la referencia cae cada periodo?
Si hay que leer valores, un gráfico de líneas los da con eje.
Sí: quédate con franjas de color
No: usa Gráfico de líneas
¿Es una sola métrica?
Si hay varias series que comparar en poco espacio, el gráfico de horizonte las apila en bandas.
Sí: quédate con franjas de color
No: usa Gráfico de horizonte
¿La serie es larga, de decenas de periodos o más?
Con pocos periodos, unas barras divergentes dan además el valor de cada uno.
Sí: quédate con franjas de color
No: usa Barras divergentes
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('stripes');
spec.data.rows = misFilas; // x, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Por qué no tiene ejes?
Porque lo que afirma es de qué lado cae cada periodo, no cuánto valió. Quitar los ejes deja sólo esa lectura.
¿Puedo poner varias columnas numéricas?
No. Tiene que haber una sola; con varias, la pieza pide cuál usar, porque teñir con la equivocada daría una tira igual de convincente.
¿En qué orden van las filas?
De la más antigua a la más reciente: el orden de las filas es el eje del tiempo.
¿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»
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