Análisis de viajes en colectivo — Buenos Aires 2026.
Pegás tu lista, la app la parsea y te muestra todo: KPIs, líneas más usadas, calendarios, mapa con recorridos reales, fotos de Wikipedia, y una tarjeta estilo Spotify Wrapped para compartir.
Demo: https://404mqs.github.io/bondinauta/
- Resumen general — total de viajes, líneas distintas, días activos, promedio de días entre viajes, y racha máxima sin colectivo
- Top líneas — ranking con barra de progreso e imagen de Wikipedia (cargada progresivamente)
- Viajes por mes — gráfico de barras
- Días de semana — heatmap Lun–Dom
- Calendario de actividad — heatmap anual con intensidad por día
- Récords — día más intenso, racha sin colectivo, mes más activo
- Curiosidades — línea favorita, la más nueva, "rey del finde", líneas presentes todos los meses
- Mapa — recorridos reales de cada línea obtenidos de OpenStreetMap, grosor proporcional a la frecuencia de uso
- Galería — tarjeta por línea con sparkline de uso mensual
Lista cronológica de todos los viajes, agrupada por mes. Cada día muestra el día de semana, la fecha, y las líneas tomadas como badges de colores.
Tarjeta estilo Spotify Wrapped con las métricas clave del año: total de viajes, línea favorita, podio top 3, mes pico, día récord, racha sin colectivo, y cantidad de líneas distintas. Se puede descargar como imagen PNG.
enero
3/1: 41, 60
6/1: 19, 19
13/1: 405 x2, 45 x2, 39
- Los encabezados de mes (
enero,febrero, etc.) delimitan secciones - El formato de fecha es
día/mes:odía:mes: - Se aceptan listas separadas por comas y la notación
x2/x3para repetidos - Las viñetas (
•,–,-) y espacios extra se ignoran
No hay build step ni dependencias de Node. Los charts (ApexCharts), el mapa (Leaflet) y html2canvas se cargan desde CDN.
npx serve .O con Python:
python -m http.servernode tests/parser.test.js
node tests/analytics.test.jsbondinauta/
├── index.html # shell de la app (3 tabs: Dashboard, Detalle, Wrapped)
├── style.css # tema oscuro, componentes, responsive
├── src/
│ ├── main.js # entry point: tab switching, wiring, BondiWrapped
│ ├── parser.js # parseo del texto de entrada
│ ├── analytics.js # cálculo de todas las métricas
│ ├── charts.js # rendering de gráficos con ApexCharts
│ ├── map.js # mapa Leaflet + rutas reales desde Overpass API
│ ├── busImages.js # imágenes de colectivos desde Wikipedia REST API
│ └── colors.js # paleta de colores por línea
└── tests/
├── parser.test.js
└── analytics.test.js
| Capa | Tecnología |
|---|---|
| Framework | Vanilla JS (ES modules) |
| Charts | ApexCharts 3 |
| Mapa | Leaflet 1.9 + CartoDB Dark Matter tiles |
| Rutas | OpenStreetMap / Overpass API |
| Imágenes | Wikipedia REST API (/api/rest_v1/page/summary/) |
| Export PNG | html2canvas |
| Cache | sessionStorage (Overpass + Wikipedia) |
| Hosting | GitHub Pages |
El sitio se publica automáticamente en GitHub Pages desde master:
gh workflow run pages
# o simplemente pusheando a master