Cuadro de eliminatorias
Cruces y avance de un torneo.
Definición
Un cuadro de eliminatorias coloca cada ronda en una columna y empareja a los rivales de cada cruce; quien reaparece en la columna siguiente es quien pasó. Se lee de izquierda a derecha hasta el ganador. Se usa para torneos deportivos y también para comparaciones por pares, como una selección de propuestas.
- Datos
- group · order · label · value · seed
- Buena para
- Enseñar el camino de cada competidor ronda a ronda hasta el ganador.
- Evítala cuando
- Cuando todos compiten contra todos: una liga no tiene cruces que se eliminen.
- Se lee bien
- Entre 6 y 31 elementos; dibuja hasta 31
- 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é |
|---|---|---|
group | string | La RONDA: cada valor distinto es una columna del cuadro, en el orden en que aparece. |
order | number | El número de ELIMINATORIA dentro de la ronda: es lo que empareja a los dos rivales. |
label | string | El COMPETIDOR de la fila. Quien reaparece en la ronda siguiente es quien pasó. |
value · opcional | number | Marcador que se rotula junto al competidor. No decide quién pasa: sólo lo cuenta. |
seed · opcional | number | Cabeza de serie, para que una sorpresa se pueda leer como tal. |
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
¿Es eliminación directa por rondas?
Si es una liga y lo que cambia es la posición a lo largo del tiempo, hace falta un gráfico de ranking.
Sí: quédate con cuadro de eliminatorias
No: usa Gráfico de ranking
¿Importa el camino de cada competidor?
Si solo cuenta la clasificación final, unas barras ordenadas son más directas.
Sí: quédate con cuadro de eliminatorias
No: usa Gráfico de barras horizontales
¿De cada cruce sale un ganador?
Si es una estructura jerárquica sin competición, un árbol lo enseña sin sugerir eliminaciones.
Sí: quédate con cuadro de eliminatorias
No: usa Árbol jerárquico
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('tournament-bracket');
spec.data.rows = misFilas; // group, order, label
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Cómo se decide quién pasa?
Por quién reaparece en la ronda siguiente, no por el marcador. Un pase por desempate o por retirada se dibuja igual que una goleada.
¿Para qué sirve el marcador?
Solo se rotula junto al competidor. No decide nada.
¿Puedo indicar los cabezas de serie?
Sí, con una columna opcional, para que una sorpresa se lea como tal.
¿Qué hace si faltan datos?
Omite el valor ausente y lo declara aparte.
¿Cómo se ve en el móvil?
El motor la recompone a 480 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 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
Curva de la ballenaqué clientes aportan o restan beneficio