Mapa hexagonal
Densidad de muchos puntos agregados.
Definición
Un mapa hexagonal reparte el plano de dos variables numéricas en celdas hexagonales y colorea cada una según cuántos puntos caen dentro. Cuando hay tantos puntos que se tapan unos a otros, la densidad pasa a ser el dato y el punto individual deja de serlo. Se usa para nubes grandes: transacciones, mediciones, sesiones.
- Datos
- x · y
- Buena para
- Ver dónde se concentran cientos de observaciones de dos variables numéricas sin que se pisen.
- Evítala cuando
- Cuando hay pocas decenas de puntos y cada uno merece verse y nombrarse por separado.
- Se lee bien
- Entre 20 y 1000 elementos; dibuja hasta 5000
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x | number | Coordenada horizontal. Por `columns.x`, o la primera columna numérica. Una celda vacía o de texto NO se convierte en 0: se cuenta y se FALLA (data.ts:178-182). |
y | number | Coordenada vertical. Entra en pareja con x: declarar sólo una de las dos hace que se ignoren las dos y se vuelva a la heurística. |
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 tantos puntos que se tapan unos a otros?
Con pocos puntos cada uno se ve en su sitio, y agruparlos esconde información sin ganar nada.
Sí: quédate con mapa hexagonal
No: usa Gráfico de dispersión
¿Quieres contar puntos por celda y no una superficie suavizada?
Si interesa la forma continua de la concentración, las curvas de nivel quitan los saltos entre celdas.
Sí: quédate con mapa hexagonal
No: usa Gráfico de contorno
¿Los dos ejes son numéricos?
Si los ejes son categorías —días, regiones, productos—, la rejilla rectangular de un mapa de calor es la que corresponde.
Sí: quédate con mapa hexagonal
No: usa Mapa de calor
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('hexbin');
spec.data.rows = misFilas; // x, y
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué indica el color de cada hexágono?
Cuántas observaciones caen en él. El tono más intenso marca la zona más poblada; la posición exacta de cada punto dentro de la celda se pierde a propósito.
¿Por qué hexágonos y no cuadrados?
El hexágono es la celda que más se parece a un círculo y aun así tesela el plano sin huecos, así que los vecinos de cada celda están todos a la misma distancia y las manchas no salen alineadas con los ejes.
¿Cuántos puntos necesita?
Empieza a tener sentido a partir de unas veinte observaciones y se lee bien hasta el millar. Por debajo, la dispersión normal enseña más.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿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»
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
Franja de puntosrespuesta individual de cada caso