Gráfico de pendiente
Cambio entre dos momentos por categoría.
Definición
Un gráfico de pendiente une, para cada categoría, su valor en dos momentos con una línea: el inicial a la izquierda y el final a la derecha. La inclinación dice cuánto y en qué sentido cambió, y los cruces entre líneas señalan quién adelanta a quién. Se usa para comparar antes y después: dos años, dos encuestas, antes y después de una medida.
- Datos
- category · start · end
- Buena para
- Ver quién sube, quién baja y quién adelanta a quién entre dos momentos.
- Evítala cuando
- Cuando hay más de dos momentos: la pieza toma sólo las dos primeras columnas numéricas y la tercera se ignora.
- Se lee bien
- Entre 2 y 15 elementos; dibuja hasta 1000
- 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 | Quién recorre la pendiente: una línea por fila. Los alias son los de `findStringColumn` sin argumentos, con caída a la primera columna de texto. |
start · opcional | number | El corte inicial, extremo izquierdo. NO se busca por nombre: es la PRIMERA columna numérica del fichero, en su orden. |
end · opcional | number | El corte final, extremo derecho. Es la SEGUNDA columna numérica; una tercera se ignora sin decirlo. |
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
¿Sólo hay dos momentos?
Si hay una serie de periodos, el gráfico de líneas enseña el recorrido entero.
Sí: quédate con gráfico de pendiente
No: usa Gráfico de líneas
¿Importa el sentido del cambio más que la distancia?
Si lo que se compara es la diferencia entre dos valores, las mancuernas la enseñan como un tramo.
Sí: quédate con gráfico de pendiente
No: usa Gráfico de mancuernas
¿Interesa el valor y no sólo el puesto?
Si sólo importa la posición en la clasificación a lo largo del tiempo, el gráfico de ranking la sigue.
Sí: quédate con gráfico de pendiente
No: usa Gráfico de ranking
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('slope');
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é columna es el inicio?
La primera numérica del fichero, y el final la segunda; no se buscan por nombre. Una tercera numérica no se dibuja.
¿Cuántas líneas caben?
Se lee bien entre dos y quince categorías.
¿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 «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