Franja de puntos
Respuesta individual de cada caso.
Definición
La franja de puntos dibuja cada observación como un punto en la banda de su categoría, con la media como una marca más dentro de la nube. Se leen a la vez la posición de cada caso y el resumen. Se usa para la respuesta a un tratamiento, tiempos de entrega o notas por grupo.
- Datos
- category · value
- Buena para
- Enseñar cada caso individual sin esconderlo detrás de una media.
- Evítala cuando
- Cuando hay cientos de observaciones por grupo: los puntos se tapan entre sí.
- Se lee bien
- Entre 5 y 100 elementos; dibuja hasta 1000
- 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 a la que pertenece la observación. Sin ella el chart devuelve una serie vacía. |
value · opcional | number | La observación. La media (y el benchmark, si se enciende) los calcula la pieza sobre lo que le llega; no se leen de la fila. |
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 pocas observaciones por grupo?
Con muchos casos los puntos se amontonan; un diagrama de caja resume la distribución.
Sí: quédate con franja de puntos
No: usa Diagrama de caja
¿Quieres ver cada caso y no solo la forma?
Si interesa la forma de la distribución, un violín la dibuja como densidad.
Sí: quédate con franja de puntos
No: usa Gráfico de violín
¿Los valores apenas se repiten?
Si muchos casos coinciden en el mismo valor y se tapan, un beeswarm desplaza cada punto a un lado hasta que cabe, sin que ninguno quede oculto.
Sí: quédate con franja de puntos
No: usa Beeswarm
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('dotstrip');
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 la media?
La calcula la pieza sobre las observaciones que le llegan; no se lee de la fila. Lo mismo vale para la referencia, si se enciende.
¿Es imprescindible la columna de categoría?
Sí. Sin ella el gráfico devuelve una serie vacía.
¿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»
Gráfico de franjascada operación o caso sobre un eje
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