⏱️ Lectura: 11 min
La visualización de datos volvió a demostrar que una sola gráfica cuenta una historia que mil tablas no logran. Un desarrollador australiano publicó un bump chart interactivo que sigue el ascenso y la caída de las 100 piezas de música clásica más votadas por la audiencia de ABC Classic FM entre 2001 y 2021.
📑 En este artículo
El proyecto, alojado en Cloudflare Workers, parece un juguete sobre música clásica, pero por debajo es un caso de estudio impecable de cómo se construyen y despliegan visualizaciones modernas en la web. Vale la pena desarmarlo.
TL;DR
- Alex, desarrollador de Hobart (Australia), publicó un bump chart que compara los rankings de la Classic 100 de ABC Classic FM en 2001, 2010 y 2021.
- Cada punto representa una pieza musical; las líneas muestran cómo subió o bajó su posición a lo largo de 20 años.
- El dato estrella: ‘The Lark Ascending’ estaba #2 en 2001, descendió en 2010 y volvió a ascender en 2021.
- El sitio se desplegó en Cloudflare Workers, plataforma serverless que sirve desde el edge sin servidores tradicionales.
- Un bump chart es superior a barras o líneas convencionales para mostrar cambios de ranking en el tiempo.
- Se arma con D3.js usando escalas de punto (scalePoint) y un generador de líneas, y se despliega con la CLI Wrangler.
Qué pasó
Un desarrollador que firma como Alex, radicado en Nipaluna / Hobart, publicó una visualización web que cruza tres ediciones del concurso anual Classic 100 de la emisora pública australiana ABC Classic FM. Desde 2001, cada año los oyentes votan por sus piezas favoritas y la emisora arma un conteo regresivo. Alex tomó tres de esas listas —la original de 2001, la edición “10 Years on” de 2010 y la “Music you can’t live without” de 2021— y las representó en un único bump chart.
La elección del tipo de gráfica no es trivial. En un bump chart cada año ocupa una columna vertical, cada pieza musical es un punto y una línea conecta el mismo título entre columnas. El ojo sigue la línea y ve de inmediato si una obra subió, bajó o se mantuvo. Es la misma familia de gráficos que usan los medios deportivos para mostrar posiciones de liga jornada a jornada, o que popularizó Edward Tufte con sus slopegraphs.
El detalle que el propio autor destaca: ‘The Lark Ascending’, de Ralph Vaughan Williams, abrió en el puesto #2 en 2001, perdió terreno en 2010 y volvió a trepar en 2021. En una tabla ese vaivén pasa desapercibido; en el bump chart es una línea que baja y vuelve a subir, imposible de ignorar.
Contexto e historia: por qué un conteo de música clásica es interesante para devs
La Classic 100 es uno de los ejercicios de “sabiduría de las multitudes” más longevos de la radio pública. Veinte años de votaciones generan un dataset pequeño pero rico: las preferencias culturales de una audiencia enorme, medidas con la misma metodología, a intervalos largos. Es justo el tipo de información donde el cómo la muestres define si alguien entiende algo o no.
Para un desarrollador en LATAM, el dominio (música clásica australiana) es lo de menos. Lo transferible es el patrón: tenés N entidades —productos, repositorios, lenguajes de programación, equipos de fútbol, criptomonedas, lo que sea— rankeadas en varios momentos del tiempo, y querés comunicar el movimiento relativo, no el valor absoluto. Ahí es donde el bump chart brilla y donde una gráfica de barras agrupadas fracasa: con 100 barras por año, el cerebro se rinde.
💭 Clave: el valor de un ranking casi nunca está en la posición de un punto, sino en el cambio entre puntos. Elegí la codificación visual que haga ese cambio obvio.
Cómo funciona un bump chart por dentro
Un bump chart se construye con tres ingredientes: una escala para las columnas (los años), una escala para las posiciones (el ranking, de 1 a 100) y un generador de líneas que une el mismo elemento entre columnas. La librería de facto para esto en el navegador sigue siendo D3.js, aunque hoy convive con abstracciones más altas como Observable Plot.
El truco conceptual: el ranking #1 debe quedar arriba, así que la escala vertical va invertida respecto a lo intuitivo. Veamos un esqueleto realista del bump chart en D3:
// Escala de posición: ranking 1..100 -> coordenada Y
const y = d3.scalePoint()
.domain(d3.range(1, 101)) // 1 (mejor) arriba, 100 abajo
.range([margin.top, height - margin.bottom]);
// Una columna por año
const x = d3.scalePoint()
.domain(["2001", "2010", "2021"])
.range([margin.left, width - margin.right])
.padding(0.5);
// Generador de la linea que conecta una pieza entre anios
const line = d3.line()
.x(d => x(d.year))
.y(d => y(d.rank));
// Una trayectoria (path) por pieza musical
svg.selectAll("path.track")
.data(pieces) // pieces: [{ title, rankings: [{year, rank}, ...] }]
.join("path")
.attr("class", "track")
.attr("d", d => line(d.rankings))
.attr("fill", "none")
.attr("stroke", "#888")
.attr("stroke-width", 1.5);La interactividad que menciona el autor —clic en un punto para resaltar la pieza y, en un tono más claro, las demás obras del mismo compositor— se resuelve con un manejador de eventos que filtra por un atributo de datos y reasigna la opacidad de los path. No hace falta un framework pesado: es DOM, SVG y un poco de estado.
graph LR
A["Votos anuales de la audiencia"] --> B["Dataset CSV 2001/2010/2021"]
B --> C["Cloudflare Worker"]
C --> D["HTML + JS con D3"]
D --> E["Bump chart en el navegador"]💡 Tip: si tu dataset tiene pocas series y solo querés comparar dos o tres momentos, Observable Plot resuelve un bump chart en una fracción del código de D3. Reservá D3 puro para cuando necesités control fino de la interacción.
Datos y cifras
El alcance del dataset es deliberadamente acotado, y eso es parte de la lección de diseño:
- 3 ediciones visualizadas: 2001 (la original), 2010 (“10 Years on”) y 2021 (“Music you can’t live without”).
- 20 años de distancia entre el primer y el último punto de cada línea.
- 100 piezas por edición, el tamaño clásico del conteo, lo que da el techo de la escala vertical.
- 1 caso testigo que el autor usa para validar la lectura: ‘The Lark Ascending’, con su patrón bajada-subida.
Un dataset chico no es una debilidad: con tres columnas, las líneas no se enredan y la historia se lee en segundos. Cuando se intenta lo mismo con docenas de momentos temporales, el bump chart degenera en un “plato de espagueti” y conviene volver a líneas suavizadas o a un mapa de calor.
Cloudflare Workers: por qué el despliegue importa
El dominio del proyecto, classic100.gotski.workers.dev, delata la plataforma: Cloudflare Workers. Es la pieza de infraestructura que un desarrollador hispanohablante puede replicar hoy mismo, gratis, para cualquier visualización de datos propia.
Workers ejecuta tu código en el edge —en cientos de ubicaciones cercanas al usuario— sin que administres un servidor. Para un sitio que es básicamente HTML, JavaScript y un dataset estático, esto significa latencia mínima en LATAM y un costo de cero hasta volúmenes considerables. Así se instala la cadena de herramientas en los tres sistemas operativos:
# 1) Node.js (incluye npm) segun tu sistema
# Windows (winget):
winget install OpenJS.NodeJS.LTS
# macOS (Homebrew):
brew install node
# Linux (Debian / Ubuntu):
sudo apt-get install -y nodejs npm
# 2) Wrangler, la CLI de Cloudflare Workers (identica en los 3 SO)
npm install -g wrangler
wrangler --versionCrear y desplegar un proyecto nuevo toma dos comandos. Wrangler te guía con un asistente y publica en tu subdominio *.workers.dev:
# Crea el proyecto con la plantilla oficial
npm create cloudflare@latest mi-visualizacion
cd mi-visualizacion
# Publica al edge
wrangler deploy⚠️ Ojo: Workers tiene límites de CPU por solicitud. Si tu visualización hace cálculos pesados, hacelos en el cliente o pre-computá el dataset en build; el Worker debería limitarse a servir archivos y, a lo sumo, una API ligera.
Impacto y análisis
¿Por qué un proyecto personal sobre música clásica merece atención técnica? Porque condensa, en algo que carga en un segundo, tres decisiones que todo desarrollador enfrenta al comunicar datos.
Primero, la elección de codificación: el bump chart prioriza el cambio relativo sobre el valor absoluto, una decisión consciente que define qué entiende el lector. Segundo, la interacción mínima pero significativa: resaltar al hacer clic y agrupar por compositor agrega exploración sin abrumar. Tercero, el despliegue serverless: publicar en el edge convierte un experimento de fin de semana en algo accesible globalmente sin factura.
Para equipos en la región, el patrón es directamente aplicable a dashboards de producto, evolución de rankings de repositorios open source, posiciones de mercado o cualquier serie donde el orden cambia en el tiempo. La tecnología es madura, gratuita en su nivel de entrada y bien documentada.
Qué sigue
La tendencia apunta a que estas visualizaciones se vuelvan aún más fáciles de producir. Herramientas como Observable Plot reducen el código de un bump chart a un puñado de líneas declarativas, y el ecosistema de Cloudflare suma almacenamiento (R2, KV, D1) que permite que el dataset deje de ser estático y se actualice solo. Un próximo paso natural para un proyecto como este sería conectar la fuente de votos a una base D1 y regenerar el gráfico cada año sin tocar el código.
El mensaje de fondo para quien construye software en LATAM: la barrera para publicar datos bien contados nunca fue tan baja. Falta menos infraestructura y más criterio de diseño.
📖 Resumen en Telegram: Ver resumen
Preguntas frecuentes
¿Qué es un bump chart y cuándo conviene usarlo?
Es una gráfica donde cada momento temporal es una columna y una línea conecta el mismo elemento entre columnas, mostrando cómo cambia su posición en un ranking. Conviene cuando lo importante es el movimiento relativo (subió, bajó, se mantuvo) y no el valor absoluto.
¿En qué se diferencia de una gráfica de líneas normal?
Una gráfica de líneas representa valores continuos en un eje numérico. Un bump chart representa posiciones de ranking (1, 2, 3…) con el #1 arriba, y suele tener pocas columnas. Su objetivo es comparar orden, no magnitud.
¿Necesito D3.js para hacer uno?
No necesariamente. D3.js da control total sobre escalas e interacción, pero para casos sencillos Observable Plot resuelve un bump chart con mucho menos código. La decisión depende de cuánta interactividad necesites.
¿Cuánto cuesta desplegar esto en Cloudflare Workers?
El plan gratuito de Workers cubre holgadamente un sitio de visualización con tráfico moderado. Solo necesitás Node.js y la CLI Wrangler para publicar en un subdominio workers.dev sin administrar servidores.
¿Sirve este enfoque para datos que cambian seguido?
Para tres o cuatro momentos temporales funciona perfecto. Con muchísimos puntos las líneas se cruzan demasiado (“efecto espagueti”) y conviene migrar a líneas suavizadas, mapas de calor o filtrar las series mostradas.
Referencias
- Classic 100: 2001 to 2021 — visualización original de Alex con el bump chart interactivo.
- D3.js — documentación oficial de la librería de visualización de datos.
- Cloudflare Workers — guía oficial de la plataforma serverless en el edge.
- Observable Plot — alternativa declarativa de alto nivel para gráficos como el bump chart.
📱 ¿Te gusta este contenido? Únete a nuestro canal de Telegram @programacion donde publicamos a diario lo más relevante de tecnología, IA y desarrollo. Resúmenes rápidos, contenido fresco todos los días.
0 Comentarios