Gráfico de puntos
Comparar valores con un punto por categoría.
Definición
El gráfico de puntos pone, en cada fila, dos puntos sobre la misma escala: uno por cada corte que se compara. Lo que se lee es el hueco entre los dos, no la altura de cada uno. Sirve para comparar dos años, dos grupos o dos escenarios en varias categorías.
- Datos
- category · start · end
- Buena para
- Ver en qué categorías es mayor la distancia entre dos cortes.
- Evítala cuando
- Cuando hay más de dos cortes por categoría: el hueco entre puntos deja de ser una sola lectura.
- Se lee bien
- Entre 3 y 30 elementos; dibuja hasta 300
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
category · opcional | string | La PRIMERA columna de texto que encuentre (sin lista de alias): la fila. |
start · opcional | number | Por POSICIÓN, no por nombre: la 1.ª columna numérica es el primer corte. |
end · opcional | number | Por POSICIÓN: la 2.ª columna numérica es el segundo corte. La columna «Change» que la pieza exporta NO se relee: el cambio es la distancia entre los dos puntos. |
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 exactamente dos cortes por categoría?
Si hay más de dos momentos, la trayectoria completa se lee mejor con líneas.
Sí: quédate con gráfico de puntos
No: usa Gráfico de líneas
¿Importa más el tamaño del hueco que si las categorías se cruzan entre un corte y otro?
Si el hallazgo es que unas categorías adelantan a otras, el gráfico de pendiente hace visible el cruce de sus líneas.
Sí: quédate con gráfico de puntos
No: usa Gráfico de pendiente
¿Cada categoría trae dos valores que comparar, y no uno solo?
Si cada categoría tiene un único valor y lo que importa es el orden, un gráfico de Cleveland pone un punto por categoría medido desde el cero.
Sí: quédate con gráfico de puntos
No: usa Gráfico de puntos de Cleveland
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('dotplot');
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
¿Cómo sabe qué columna es cada corte?
Por posición: la primera columna numérica es el primer corte y la segunda, el segundo. La fila es la primera columna de texto que encuentre.
¿Lee una columna de cambio?
No. El cambio es la distancia entre los dos puntos; una columna «Change» no se relee.
¿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 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «comparar cifras»
Análisis de accretion/dilutionefecto de una operación en el beneficio por acción
Gráfico de flechascambio con dirección entre dos momentos
Gráfico de barras verticalescomparar valores entre pocas categorías
Serie con banda de referenciatu serie frente al rango de sus pares
Comparativa con parestu resultado frente al de otras empresas
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición