Gráfico de ranking
Cambios de puesto a lo largo del tiempo.
Definición
Un gráfico de ranking une con una línea el puesto que ocupa cada competidor en cada periodo, con los puestos igualmente espaciados en el eje vertical. Los cruces de líneas son adelantamientos. Se usa para clasificaciones deportivas, cuotas de mercado o rankings de producto a lo largo del tiempo.
- Datos
- x · value
- Buena para
- Seguir quién sube y quién baja de puesto a lo largo del tiempo.
- Evítala cuando
- Cuando importa la distancia entre competidores: dos puestos seguidos están igual de separados tanto si los separa poco como mucho.
- 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é |
|---|---|---|
x · opcional | string | El periodo: una columna de puestos por fila. Sin ella devuelve [] y cae a su demo (data.ts:109). |
value · opcional | number | El PUESTO de cada equipo en ese periodo. Una columna numérica por equipo, POR POSICIÓN; el encabezado de la columna es el rótulo de la línea. Una casilla sin número FALLA con la cuenta y con el par equipo × periodo: el 0 no es un hueco en una escala de puestos, es una posición mejor que la primera. |
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
¿Importa el puesto y no la cifra?
Si la distancia real entre competidores forma parte del argumento, unas líneas con sus valores la enseñan.
Sí: quédate con gráfico de ranking
No: usa Gráfico de líneas
¿Hay más de dos momentos?
Con sólo un antes y un después, un gráfico de pendiente lo cuenta con menos líneas.
Sí: quédate con gráfico de ranking
No: usa Gráfico de pendiente
¿Basta con el puesto, sin el peso de cada uno?
Si además del orden quieres que se note cuánto pesa cada competidor, el bump de áreas añade el grosor.
Sí: quédate con gráfico de ranking
No: usa Bump de áreas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('bump');
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é datos necesita?
Una columna con el periodo y una columna numérica por competidor con su puesto. El encabezado de cada columna da nombre a la línea.
¿Pesa igual un adelantamiento arriba que abajo?
Sí: los puestos están igualmente espaciados, así que subir del décimo al noveno se ve igual que del segundo al primero.
¿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 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «quién va primero»
Gráfico de puntos de Clevelandcomparar valores ordenados con poca tinta
Importancia de variablesqué variables pesan más en un modelo
Gráfico de barras horizontalescomparar categorías con nombres largos
Gráfico de piruletacomparar valores con menos tinta que barras
Cuadro de eliminatoriascruces y avance de un torneo
Curva de la ballenaqué clientes aportan o restan beneficio