Gráfico de contorno
Dónde se concentran los puntos.
Definición
Un gráfico de contorno dibuja curvas de nivel sobre una nube de puntos de dos variables: cada curva une zonas con la misma concentración. Donde los puntos se solapan tanto que ya no se pueden contar, las curvas siguen enseñando dónde está el centro y con qué gradiente cae. Se usa con muchas observaciones, por ejemplo en exploración de datos o en aprendizaje automático.
- Datos
- x · y
- Buena para
- Ver dónde se concentra una nube densa de puntos y cuántos núcleos tiene.
- Evítala cuando
- Cuando tienes pocos puntos: con una veintena o menos las curvas dibujan una forma que los datos no sostienen.
- Se lee bien
- Entre 20 y 1000 elementos; dibuja hasta 10.000
- 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é |
|---|---|---|
x · opcional | number | Por POSICIÓN, no por nombre: la 1.ª columna numérica. Con menos de dos numéricas el chart devuelve serie vacía. |
y · opcional | number | Por POSICIÓN: la 2.ª columna numérica. Las demás columnas no se miran. |
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
¿Los puntos se solapan tanto que ya no se cuentan?
Si cada punto todavía se distingue, la dispersión enseña los datos sin suavizar nada.
Sí: quédate con gráfico de contorno
No: usa Gráfico de dispersión
¿Quieres una forma continua de la concentración?
Si prefieres contar puntos por casillas y leer cuántos hay en cada una, usa el mapa hexagonal.
Sí: quédate con gráfico de contorno
No: usa Mapa hexagonal
¿Tienes dos variables que cruzar?
Si sólo hay una variable, su forma se ve en un histograma.
Sí: quédate con gráfico de contorno
No: usa Histograma
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('contour');
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é dice cada curva?
Une los sitios con la misma concentración de puntos. Curvas muy juntas indican que la densidad cae deprisa.
¿Qué columnas usa?
Las dos primeras columnas numéricas, por posición: la primera en horizontal y la segunda en vertical. Las demás no se miran.
¿Cuántos puntos necesita?
Se lee bien entre 20 y 1.000 observaciones.
¿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 «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 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