Gráfico de franjas
Cada operación o caso sobre un eje.
Definición
El gráfico de franjas pone cada observación como un punto sobre un eje de magnitud, con una banda por grupo. Un pequeño desplazamiento dentro de la banda, que viene en los propios datos, evita que los puntos se tapen. Se usa para ver todas las operaciones, casos o importes de cada grupo y juzgar su mediana con todas las observaciones delante.
- Datos
- category · value · order
- Buena para
- Ver todas las observaciones de cada grupo y cómo se reparten.
- Evítala cuando
- Cuando hay miles de puntos: se funden en una mancha.
- Se lee bien
- Entre 5 y 200 elementos; dibuja hasta 3000
- 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é |
|---|---|---|
category · opcional | string | La banda en la que cae el punto (alias por defecto de `findStringColumn`, con caída a la primera columna de texto). |
value · opcional | number | La posición del punto sobre el eje de magnitud: la PRIMERA columna numérica. |
order · opcional | number | El jitter, es decir el desplazamiento dentro de la banda: la SEGUNDA columna numérica. Sin ella todos los puntos se alinean y la densidad deja de verse. |
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
¿Quieres ver cada observación?
Si bastan la mediana y los cuartiles, el diagrama de caja los resume.
Sí: quédate con gráfico de franjas
No: usa Diagrama de caja
¿Son cientos de puntos como mucho, no miles?
Con muchas observaciones, un gráfico de violín dibuja la forma de la distribución.
Sí: quédate con gráfico de franjas
No: usa Gráfico de violín
¿Puedes dar a cada punto su desplazamiento dentro de la banda?
Si no quieres prepararlo y los puntos se tapan, el beeswarm los coloca uno junto a otro.
Sí: quédate con gráfico de franjas
No: usa Beeswarm
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('strip');
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
¿De dónde sale el desplazamiento de los puntos?
De la segunda columna numérica. Sin ella todos los puntos se alinean y la densidad deja de verse.
¿Qué columnas usa?
Una de texto para la banda y la primera columna numérica para la posición sobre el eje.
¿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 se reparten los valores»
Franja de puntosrespuesta individual de cada caso
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