Gráfico de dispersión

Relación entre dos variables.

Definición

Un gráfico de dispersión coloca cada entidad en el plano según dos medidas, una en cada eje, y deja ver si se mueven juntas, si forman grupos o quién se sale. Puede añadir una tercera magnitud en el área de la burbuja y el grupo en el color. Es la forma básica de explorar la relación entre dos variables.

Editar con tus datos SVG Spec JSON

Llenamos como los mejores del comp set y cobramos 40 € menos: el problema no es la ocupación, es la tarifa

Datos: category · x · y · size
Buena para: Ver si dos medidas tomadas sobre las mismas entidades se mueven juntas, y quién se sale del patrón.
Evítala cuando: Cuando los puntos tienen un orden que importa, como el tiempo: la dispersión no dibuja camino entre ellos.
Se lee bien: Entre 5 y 500 elementos; dibuja hasta 5000
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: resumen en texto · navegable con teclado · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`category` · opcional	string	El grupo: columns.category o label. Da color a la burbuja y la fila de la leyenda. Sin binding se infiere por nombre y tipo; sin columna de texto inferible no dibuja.
`x` · opcional	number	Eje horizontal: columns.x. Sin binding busca X y después posición entre las numéricas libres. La misma resolución decodifica el frame y su unión.
`y` · opcional	number	Eje vertical: columns.y. Sin binding busca Y y después posición. Vacíos conservan zero-fill; valores presentes no finitos fallan.
`size` · opcional	number	Tamaño de burbuja: columns.size. Sin binding busca Size y después posición. El radio se escala entre dot.minRadius y dot.maxRadius. Tamaños negativos o no finitos fallan.

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.

Móvil · 408 × 720 px

Escritorio · 1248 × 930 px

Cuándo usarla

Tres preguntas antes de elegirla

¿El orden de los puntos da igual?

Si cada punto es un momento y el recorrido cuenta, la dispersión conectada los une en secuencia.

Sí: quédate con gráfico de dispersión

No: usa Dispersión conectada

¿Los puntos se distinguen unos de otros?

Si son tantos que se tapan, el mapa hexagonal cuenta cuántos caen en cada zona.

Sí: quédate con gráfico de dispersión

No: usa Mapa hexagonal

¿Basta con ver la nube, sin ajustar una recta?

Si hay que afirmar una tendencia y cuánto explica, la dispersión con regresión la dibuja con su banda.

Sí: quédate con gráfico de dispersión

No: usa Dispersión con regresión

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('scatter');
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

¿Qué significa el tamaño de la burbuja?

Una tercera medida, si se declara: el radio se escala entre un mínimo y un máximo. No admite tamaños negativos.

¿Indica que una cosa causa la otra?

No. Coloca entidades sin orden entre ellas, así que enseña relación, no causa ni secuencia.

¿Tengo que nombrar las columnas?

No siempre: si no se indican, busca columnas llamadas X, Y y Size y, si no las hay, toma las numéricas libres por posición. Hace falta además una columna de texto para el grupo.

¿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 «si dos cosas van juntas»

Guía para elegir: si dos cosas van juntas →