Beeswarm
Cada individuo de una distribución, sin solaparse.
Definición
Un beeswarm coloca cada caso como un punto sobre el eje del valor y, cuando dos coinciden, los aparta hacia los lados hasta que caben sin taparse. Hay una columna de puntos por grupo, así que la forma de la nube enseña dónde se amontonan los casos y dónde quedan sueltos. Se usa para salarios, tiempos de respuesta o notas cuando cada individuo cuenta.
- Datos
- category · value
- Buena para
- Enseñar cómo se reparten los casos de uno o varios grupos sin esconder ninguno detrás de una media.
- Evítala cuando
- Cuando hay cientos de casos por grupo: los puntos ya no caben de lado y la nube se convierte en una mancha.
- Se lee bien
- Entre 10 y 200 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é |
|---|---|---|
category · opcional | string | El grupo: una columna de puntos por valor distinto. Sin ella (o sin la numérica) devuelve [] y cae a su demo. |
value · opcional | number | La posición del punto en el eje del valor. |
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
¿Caben todos los casos sin amontonarse?
Con miles de observaciones, agrupar los valores en tramos resume mejor la forma que dibujar cada punto.
Sí: quédate con beeswarm
No: usa Histograma
¿Importa ver cada caso y no sólo el resumen?
Si basta con comparar la dispersión de muchos grupos, el violín enseña la forma de cada uno sin un punto por caso.
Sí: quédate con beeswarm
No: usa Gráfico de violín
¿Te basta con los puntos, sin un resumen encima?
Si además de los casos quieres la caja y la silueta de la distribución en la misma figura, el raincloud junta las tres capas.
Sí: quédate con beeswarm
No: usa Raincloud plot
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('beeswarm');
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
¿Por qué los puntos se separan hacia los lados?
Sólo para no taparse. La posición que cuenta es la del eje del valor; el desplazamiento lateral no significa nada.
¿Qué columnas necesita?
Una de texto con el grupo y una numérica con el valor. Cada valor distinto del grupo forma su propia columna de puntos.
¿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 480 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»
Código de barras de eventoscuándo ocurren los eventos en un intervalo
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
Franja de puntosrespuesta individual de cada caso
Distribución acumulada empíricaqué proporción queda por debajo de cada valor