Gráfico de burbujas
Tres variables: dos ejes y el tamaño.
Definición
Un gráfico de burbujas es una dispersión con una tercera variable: cada caso es un círculo situado por dos ejes numéricos y con un área que depende de su peso. Se lee la relación entre los dos ejes y, a la vez, qué casos pesan más. Se usa para países, productos o clientes cuando importa su tamaño además de su posición.
- Datos
- label · x · y · size · color
- Buena para
- Ver cómo se relacionan dos variables y qué casos pesan más en esa relación.
- Evítala cuando
- Cuando necesitas leer el tamaño con precisión: las áreas se comparan a ojo peor que las longitudes.
- Se lee bien
- Entre 3 y 50 elementos; dibuja hasta 5000
- 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é |
|---|---|---|
label · opcional | string | El nombre del caso. Sin él devuelve [] y cae a su demo (data.ts:66). |
x · opcional | number | 1.ª numérica POR POSICIÓN: el eje X. |
y · opcional | number | 2.ª numérica por posición: el eje Y. |
size · opcional | number | 3.ª numérica por posición: el ÁREA del círculo. |
color · opcional | string | El grupo de color. Sin ella todos los círculos comparten serie. |
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
¿Hay una tercera variable que pese en cada caso?
Si sólo cuentan dos variables, una dispersión sin tamaños se lee más limpia.
Sí: quédate con gráfico de burbujas
No: usa Gráfico de dispersión
¿Los dos ejes son numéricos?
Si filas y columnas son categorías, la matriz de burbujas pone cada cruce en su celda.
Sí: quédate con gráfico de burbujas
No: usa Matriz de burbujas
¿Caben los casos sin taparse?
Con cientos de casos los círculos se solapan; un mapa hexagonal agrupa la densidad.
Sí: quédate con gráfico de burbujas
No: usa Mapa hexagonal
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('bubble');
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
¿El tamaño va en el radio o en el área?
En el área. Un círculo el doble de ancho vale cuatro veces más, no el doble.
¿Importa el orden de las columnas?
Sí: la primera numérica es el eje horizontal, la segunda el vertical y la tercera el tamaño. Una columna de texto opcional agrupa los círculos por color.
¿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 «si dos cosas van juntas»
Correlograma de autocorrelaciónsi una serie se parece a sí misma con retardo
Punto de equilibriovolumen donde ingresos y costes se igualan
Curva de calibraciónsi las probabilidades predichas se cumplen
Tendencia con banda de confianzaajuste lineal e incertidumbre de la estimación
Dispersión conectadados variables siguiendo su trayectoria en el tiempo
Matriz de correlacionesrelación entre varias métricas