Carrera de barras
Ranking que cambia a lo largo del tiempo.
Definición
Una carrera de barras dibuja la clasificación de varios contendientes en una sucesión de cortes temporales, con barras ordenadas cuya longitud es su valor. Puesto y magnitud se leen a la vez, así que se ve quién adelanta a quién y si el que pierde la cabeza encoge o solo crece menos. Sirve para cuotas de mercado, poblaciones o ventas por marca a lo largo de los años.
- Datos
- x · series · value
- Buena para
- Contar quién adelanta a quién en una clasificación y cuánto mide cada uno en cada momento.
- Evítala cuando
- Cuando solo tienes un corte: sin varios momentos no hay carrera, solo una clasificación.
- Se lee bien
- Entre 4 y 60 elementos; dibuja hasta 120
- Datos que faltan
- Omite el valor ausente y lo declara aparte.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x | string | El CORTE: el instante que congela cada parrilla. |
series | string | El CONTENDIENTE: quién corre y conserva su color. |
value | number | El número que ordena la parrilla y da su longitud a la barra. |
Tamaños
Ancha por necesidad
Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.
A menos de 480 px el motor se niega y explica por qué: bar-chart-race: cada corte dispone de 45 px y su cifra más ancha («440») mide 21 px, así que a la barra más larga le quedan 19 px: una barra más corta que su pr
. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.
Cuándo usarla
Tres preguntas antes de elegirla
¿Hay varios cortes?
Si solo hay un momento, unas barras horizontales ordenadas son la clasificación.
Sí: quédate con carrera de barras
No: usa Gráfico de barras horizontales
¿Importa la magnitud además del puesto?
Si basta con el orden y sus cruces, el bump de áreas lo enseña todo en una sola lámina.
Sí: quédate con carrera de barras
No: usa Bump de áreas
¿Lo que se disputa es un puesto?
Si no hay clasificación y lo que interesa es la trayectoria de cada serie, un gráfico de líneas la sigue completa.
Sí: quédate con carrera de barras
No: usa Gráfico de líneas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('bar-chart-race');
spec.data.rows = misFilas; // x, series, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué datos necesita?
Tres columnas: el corte, que es el momento de cada parrilla; el contendiente, que conserva su color; y el valor que ordena la parrilla y da longitud a la barra.
¿Y si un contendiente aparece dos veces en el mismo corte?
La pieza no elige por ti: tiene que haber un solo valor por contendiente y corte.
¿Las barras empiezan en cero?
Sí, siempre; si no, la longitud no compararía nada.
¿Qué hace si faltan datos?
Omite el valor ausente y lo declara aparte.
¿Cómo se ve en el móvil?
A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.
Relacionadas
Otras formas de responder «quién va primero»
Gráfico de rankingcambios de puesto a lo largo del tiempo
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