Matriz de burbujas

Intensidad de cruces entre dos categorías.

Definición

Una matriz de burbujas cruza dos categorías en filas y columnas y pone en cada celda un círculo: su área indica cuánto pesa el cruce y su color, en una escala que va de un tono a otro pasando por cero, indica una segunda medida con signo. Se lee buscando dónde no coinciden las dos: un círculo pequeño muy coloreado o uno grande neutro. Se usa para desviaciones de presupuesto, variaciones por canal o saldos por producto.

Editar con tus datos SVG Spec JSON

La desviación grande está en la partida pequeña: viajes se pasa un tercio y pesa el 4 %

Datos: y · x · size · color
Buena para: Encontrar los cruces donde el peso y la desviación cuentan historias distintas.
Evítala cuando: Cuando sólo tienes una medida por celda: el color sobra y la figura se reduce a una tarjeta perforada.
Se lee bien: Entre 4 y 300 elementos; dibuja hasta 400
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`y`	string	Categoría de FILA de la retícula (la familia de producto, en el caso canónico). Su orden de aparición en el fichero es el orden en que se dibuja el eje, salvo que `bubbleMatrix.orden` pida otro, que entonces se rotula.
`x`	string	Categoría de COLUMNA de la retícula (el canal). Se dibuja siempre en el orden en que aparece: reordenarla por volumen borraría el orden que el fichero declara y el dibujo no puede saber.
`size`	number	La MAGNITUD del cruce, una por celda. Decide el área del círculo, así que va anclada en cero y no admite negativos. Un cero es un dato (se dibuja sin marca); una celda ausente no lo es, y se cuenta aparte.
`color` · opcional	number	La SEGUNDA medida, con SIGNO: una variación, un saldo, una desviación. Decide la tinta sobre una rampa divergente anclada en cero y simétrica (±máximo valor absoluto). Es opcional: sin ella la figura se dibuja con una sola tinta y sin clave de color, que es una tarjeta perforada.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Tienes dos medidas por cruce?

Con una sola magnitud por celda, la tarjeta perforada hace lo mismo sin escala de color.

Sí: quédate con matriz de burbujas

No: usa Tarjeta perforada

¿El peso de cada cruce forma parte del argumento?

Si sólo importa la medida con signo y no cuánto pesa cada cruce, un mapa de calor la pinta con el tono de cada celda, sin círculos.

Sí: quédate con matriz de burbujas

No: usa Mapa de calor

¿Filas y columnas son categorías?

Si los dos ejes son numéricos, un gráfico de burbujas sitúa cada caso en su escala.

Sí: quédate con matriz de burbujas

No: usa Gráfico de burbujas

Código

La misma pieza, con tus datos

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

const spec = await getPreset('bubblematrix');
spec.data.rows = misFilas; // y, x, size
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué dice el color?

La segunda medida, con signo: una variación, un saldo, una desviación. La escala es simétrica alrededor de cero, así que el mismo tono a cada lado indica la misma distancia.

¿Puede el círculo más grande ser el peor?

Sí. Tamaño y color son dos medidas independientes, y ese desacuerdo es lo que el gráfico busca enseñar.

¿En qué orden van filas y columnas?

En el que aparecen en tus datos. Las columnas no se reordenan nunca; las filas sólo si se pide otro orden, y entonces se rotula.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «si dos cosas van juntas»

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