Crear visualizaciones con Claude Code: Observable Plot, D3 y GitHub Pages
De datos a dashboard publicado en 2 horas usando Claude AI como copiloto
Antes, un tutorial era: baja esto, instala esto, copia este código, ponlo aquí.
Ahora con IA, los tutoriales son de ideas:
Ten las herramientas instaladas
Piensa qué quieres hacer
Organiza tu repositorio
Itera rápido
Lo que importa ahora es tu creatividad y tu gusto. Las habilidades técnicas se pueden delegar. El criterio, no.
Para demostrarlo, hice un experimento en vivo: crear tres páginas interactivas de análisis de datos en 2 horas. Small multiples, network graphs, galería de álbumes. Todo publicado en GitHub Pages.
Esta es la segunda parte de la serie. En la primera parte creamos un dashboard brutalista con mis datos de Spotify. Ahora lo llevamos al siguiente nivel.
Lo que construimos
Una dashboard de tres páginas publicada en GitHub Pages:
Resumen: Dashboard brutalista del live anterior
Heatmaps: Small multiples: hora × día de la semana × mes
Música: Galería de álbumes, network de colaboraciones, scatter underground vs mainstream
URL en vivo: chekos.github.io/mi-2025-en-musica
Herramientas
UV: Gestor de paquetes Python (escrito en Rust, exageradamente rápido)
Monologue: Speech-to-text para dictar (~$10/mes, solo Mac)
Wispr Flow: Alternativa gratuita a Monologue
D3 / Observable Plot: Visualizaciones en JavaScript
Puppeteer MCP: Claude toma screenshots del navegador. MCP (Model Context Protocol) es el estándar para conectar herramientas externas a Claude
GitHub Pages: Hosting gratuito para HTML estático
Por qué UV importa
UV reemplaza pip, poetry, pyenv, twine, virtualenv. Una sola herramienta. Puedes ejecutar scripts con diferentes versiones de Python sin configurar nada:
uv run --python 3.13 mi_script.pySi te interesa una guía completa de herramientas IA para análisis de datos, suscríbete a tacosdedatos.
Facetas: la misma gráfica, muchas veces
Small multiples (o facetas, o faceted charts) son la misma visualización repetida para diferentes subconjuntos de datos. En vez de un gráfico complejo, muchos gráficos simples lado a lado.
Tenía un heatmap de hora × mes. Quería ver patrones por día de la semana también.
Le dije a Claude:
“Quiero hacer el heatmap que tenemos de hora por mes, pero quiero que el eje X sea el día de la semana, lunes a domingo, y que el eje Y sea la hora del día, 0 a 24. Y además quiero facetas por mes verticalmente.”
El resultado: 12 mini-heatmaps apilados, uno por mes. Se ve cómo cambian mis patrones de escucha a lo largo del año.
Iteración rápida
El primer intento tenía problemas:
Mucho espacio entre facetas
Etiquetas repetidas innecesariamente
El eje Y invertido (24 arriba, 0 abajo)
En vez de especificar todo desde el inicio, iteré:
“Hay mucho espacio en blanco, que se vean continuos”
“Invierte la escala Y, es más natural leer 0 arriba”
“Las etiquetas del eje X solo en el primero y último”
“En vez de rectángulos, hazlo con burbujas como punch card”
“Codifica la frecuencia también en la saturación”
Tip: No tienes que definir todo perfecto desde el inicio. Hazlo, míralo, ajústalo.
No le dije a Claude “usa facet_wrap con estos parámetros y ajusta el margin“. Le dije qué quería ver.
Creando un repositorio público
El proyecto original era privado. Quería publicar la dashboard para que cualquiera la vea.
Le pedí a Claude que propusiera una estructura para un nuevo repositorio:
mi-2025-en-musica/
├── index.html # Resumen
├── hitmaps.html # Hitmaps
├── musica.html # Música
├── styles.css
├── charts.js
├── data/
│ └── spotify-2025.json
└── scripts/
└── generate_data.pyClaude lo creó, inicializó git, activó GitHub Pages, y ya estaba en línea.
Le dije que me mostrara el plan antes de ejecutar. (Esto es clave si usas --dangerously-skip-permissions.)
Cuando Claude empieza a olvidar
A las 2 horas, me quedaba 4% de contexto. Cuando se compacta la conversación, Claude pierde detalles.
Señales de que se está llenando:
Claude empieza a hacer cosas que no le pediste
Olvida configuraciones que habías establecido
Las imágenes dejan de cargar en sus respuestas
La solución: Session summaries.
Antes de que se compacte, le digo a Claude que escriba un resumen de la sesión:
Qué hicimos
Qué funcionó
Qué no funcionó
Qué quedó pendiente
Así la siguiente sesión puede empezar leyendo ese archivo.
Cuando llegas al 10% de contexto, haz el resumen. Perder detalles es peor que empezar sesión nueva.
Página de Música: galería, network, scatter
Galería de álbumes
Top 100 álbumes con sus portadas. Hover muestra el nombre y las horas escuchadas.
El primer intento se extendía mucho verticalmente. Lo cambié a 5 filas con scroll horizontal.
Network graph de colaboraciones
Un grafo de fuerza con D3 mostrando qué artistas colaboran entre sí.
Descubrimientos:
La Homegrown Mafia (Yoga Fire, Muelas, Fntxy, Kamaro) está en su propio cluster
Clipse (Pharrell, Pusha T) completamente separado del hip hop mexicano
Dharius tiene colaboraciones con todos
Claude agregó las fotos de los artistas dentro de los nodos automáticamente.
Scatter: Underground vs Mainstream
Eje X: popularidad del artista en Spotify
Eje Y: minutos que le dediqué
Cuatro cuadrantes:
Underground favoritos: baja popularidad, muchas horas
Mainstream favoritos: alta popularidad, muchas horas
Underground ocasional: baja popularidad, pocas horas
Mainstream ocasional: alta popularidad, pocas horas
Spotify deprecó los audio features
Quería usar danceability, energy, tempo de cada track. Pero Spotify deprecó ese endpoint en noviembre 2024.
Claude buscó alternativas:
SoundNet vía RapidAPI: funciona, pero $0.01 por track
Datasets en Kaggle: posible cruzar por track ID
AcousticBrainz: base de datos abierta, pero incompleta
Por ahora, me quedé sin esa dimensión. Maldito Spotify.
Time blocks en vez de 24 horas
El heatmap de día del mes × hora tenía 24 columnas. Demasiado granular.
Lo cambié a 6 bloques de 4 horas:
Madrugada (1-5am)
Mañana (5-9am)
Mediodía (9am-1pm)
Tarde (1-5pm)
Noche (5-9pm)
Medianoche (9pm-1am)
Mucho más legible. Los patrones se ven claros.
Tip: Le dije “nombres apropiados” y Claude escogió los nombres. No tienes que pensar todo tú.
Lecciones
1. Itera, no definas todo al inicio
El primer intento nunca es perfecto. Hazlo rápido, míralo, ajústalo.
2. Screenshots para comunicar
Toma un screenshot, pégalo en la terminal. Claude entiende qué está mal visualmente.
3. Modo plan vs skip permissions
Si usas --dangerously-skip-permissions, sé explícito cuando quieras revisar antes de ejecutar.
4. GitHub Pages para publicar rápido
HTML + JavaScript + GitHub Pages = dashboard pública en minutos. No necesitas Streamlit ni Tableau.
5. “Nombres apropiados”
No tienes que pensar todo. Dile a Claude “ponle nombres apropiados” y que él escoja.
Timeline de álbumes: un hallazgo inesperado
Claude agregó un histograma de cuándo se lanzaron los álbumes que escuché. No se lo pedí. Solo vio los datos y sugirió la visualización.
El pico: 2020 y 2021. Años de pandemia.
“El pico masivo no es coincidencia. Fueron años de pandemia. Probablemente hubo más lanzamientos de música nueva.”
La teoría de Claude: durante la pandemia, más artistas lanzaron música. Encerrados en casa, con tiempo, con algo que decir. No es que yo haya escuchado más - es que había más música nueva para escuchar.
Hay algo poético en eso: los años más extraños de nuestras vidas, visibles en un histograma de lanzamientos.
No lo había pensado, pero tiene sentido. La IA encontró un patrón que yo no estaba buscando.
Esto es lo que pasa cuando sueltas el control. Cuando dejas que Claude haga el trabajo, a veces ve cosas que tú no estabas buscando. Me pudo haber ocurrido a mí también si yo hubiera visto el pico primero. Pero no tuve que verlo. Claude lo vio, me lo mostró, me propuso una teoría. Y la teoría fue lo suficientemente buena para aceptarla y querer investigarla después.
Es un concepto llamado emergence. Cosas interesantes pasan cuando no controlas todo.
Cierre
Empezamos con una dashboard de una página. Terminamos con tres páginas interactivas publicadas en GitHub Pages:
Galería de 100 álbumes con portadas
Network graph de 1,490 conexiones entre artistas
Scatter plot de underground vs mainstream
Heatmaps con small multiples por mes
Timeline de lanzamientos
Todo con HTML y JavaScript. Sin frameworks. Sin hosting pagado.
Lo que importa ya no es saber exactamente cómo codear algo. Es tu creatividad y tu gusto. Las habilidades técnicas se delegan. El criterio, no.
Si vas a intentarlo, empieza con una pregunta: ¿qué querrías ver de tus datos?
Suscríbete a tacosdedatos para más experimentos de IA + datos + análisis exploratorio. Cada semana comparto tutoriales prácticos, herramientas que uso en producción, y técnicas que no están en la documentación oficial.