Metal Globe

Problema

Encyclopaedia Metallum tiene el dato -casi 200 000 bandas- pero su propio sitio es una lista plana e imposible de filtrar. No hay forma de ver de dónde sale una escena, cómo se compara un país con sus vecinos, o cómo cambian los géneros por región sin recorrer cientos de tablas paginadas.

Enfoque

Scraper propio sobre Encyclopaedia Metallum, pipeline de datos y una visualización sin frameworks, construida para sobrevivir tanto a una conexión lenta como a una escena 3D exigente al mismo tiempo.

Metal Archives no tiene API pública y, al momento de este build, sus páginas están detrás de un desafío Cloudflare Turnstile que bloquea tanto a requests como a navegadores headless. La vía que funcionó fue Scrapling sobre Camoufox (un Firefox sigiloso): un humano resuelve el desafío una vez, y esa misma sesión de navegador ya caliente recorre todos los países sin ser desafiada de nuevo -un lanzamiento nuevo del navegador genera un fingerprint distinto y vuelve a ser bloqueado-, así que el scraping corre como una sola sesión local continua en vez de un job distribuido.

Las bandas, géneros y metadatos por ciudad alimentan un pipeline en Python que resuelve la taxonomía de géneros, geocodifica países y arma un único JSON que consume el frontend. El globo en sí es WebGL escrito a mano con three.js: fronteras TopoJSON reales proyectadas sobre una esfera, pines por ciudad y un nivel de detalle que muestra países nombrados y paneles de treemap a medida que la cámara pasa de vista planetaria a continental y a país -sin más librería de gráficos o globo que three.js y ECharts para los paneles laterales-.

El index.html original de 4 408 líneas enviaba todo -markup, estilos y lógica- en un solo archivo. Hoy se parte limpio en index.html, styles.css, data.js y app.js, con las banderas cargadas en lazy por país en vez de empaquetadas de entrada.