Bump chart (ranking)

Descripción general

Los bump charts muestran cómo cambian los rankings en el tiempo al representar la posición (1.º, 2.º, 3.º, etc.) en lugar de los valores absolutos. Las líneas se cruzan cuando las entidades intercambian puestos, y el eje Y invertido coloca el puesto #1 en la parte superior. Las líneas ascendentes indican mejoras en la clasificación, mientras que las descendentes reflejan caídas.

Cuándo usarlo

Rastrear rankings competitivos por periodos
Mostrar cambios de posición en ligas, concursos o mercados
Enfatizar el orden relativo por encima de la magnitud absoluta
Comparar entidades donde el puesto importa más que el valor
Visualizar la progresión de torneos o competiciones
Destacar cambios dramáticos en posiciones competitivas

No es ideal para

Historias donde importan más los valores absolutos que los puestos
Rankings estables con pocos cruces (el gráfico luce plano)
Audiencias que necesiten los valores numéricos exactos
Medios impresos sin soporte para animación
Más de 12 entidades simultáneas (dificulta el seguimiento)

Variaciones clave

Eje Y invertido (puesto #1 arriba)
Curvas suaves vs líneas rectas entre puntos
Resaltar trayectorias clave con énfasis
Mostrar empates con segmentos horizontales
Etiquetas finales para indicar la posición final
Hover interactivo para seguir cada camino
Codificación de color que destaque subidas/bajadas

Casos de uso

Clasificaciones deportivas por temporada
Rankings universitarios a lo largo de los años
Rendimiento de equipos de ventas por trimestre
Líderes de categorías de productos en el tiempo
Posiciones en tiendas de apps o buscadores (SEO)
Cambios en preferencias de marca o encuestas
Evolución de sondeos electorales

Datos (CSV)

Year,Orange,Tomato,Apple,Sakana,Banana,Iwashi,Snappy Fish,Lemon,Pasta
2001,2,8,4,7,9,6,1,7,3
...
2006,2,8,4,5,9,6,1,7,3

Configuración del gráfico (JSON)

Consejos de diseño

Usa colores vibrantes y únicos para cada entidad
Habilita curvas suaves para un acabado fluido
Incrementa symbolSize para remarcar cada punto temporal
Invierte el eje Y de modo que #1 quede arriba
Reserva margen derecho para etiquetas finales
Ajusta el ancho de línea a 3–4 px para mayor visibilidad
Añade líneas de cuadrícula verticales para alinear periodos
Formatea las etiquetas como “#1”, “#2”… para reforzar el contexto
Activa énfasis al pasar el cursor para seguir cada serie

Consejos de rendimiento

Limita la visualización a 9–12 entidades
Usa colores bien diferenciados para evitar confusión
Aplica filtros “top N” si tienes muchas series
Muestra puntos temporales clave (cada trimestre/año) para evitar saturación
Mantén las curvas suaves para reducir el desorden visual cuando se cruzan

Preguntas frecuentes

¿El puesto #1 debe ir arriba o abajo? En la mayoría de contextos competitivos, se coloca en la parte superior (eje invertido) para que una mejor posición se interprete como un ascenso visual.

¿Cómo manejo empates? Coloca las series empatadas a la misma altura con segmentos horizontales. Indica en notas cómo resolviste los empates si los deshaces visualmente.

¿Puedo mostrar rank y valor? Sí, agrega ambos en tooltips. Pero deja que la visualización principal se enfoque en el ranking; si los valores son igual de importantes, evalúa otro tipo de gráfico.

¿Cuántas líneas son demasiadas? Más de 12 complica la lectura. Filtra a las principales, divide en múltiples gráficos o permite filtrado interactivo.

¿Curvas suaves o rectas? Las curvas suaves aportan fluidez y reducen el ruido visual. Las líneas rectas son apropiadas cuando quieres marcar saltos discretos entre periodos.

¿Cómo enfatizo entidades clave? Usa colores más brillantes, mayor ancho de línea o etiquetas dedicadas. Las etiquetas finales y el enfoque al pasar el cursor ayudan a seguir cada trayectoria.

Example

Guide