Caso de estudio 17 / 17JS Front-End
Un mapa de calor que muestra dónde se retrasa la manufactura
Mapa de calor interactivo de retrasos de manufactura por región y estado de pedido: operaciones ve cuellos de botella y actúa 40 % antes.
Stack
- HTML5
- CSS3
- JavaScript
- deck.gl
- Python
- Pandas
- JSON
- Excel
- +2
01 · Cómo funciona
- HoyaModificado en este trabajo
- Flujo de datos
Qué hace
Un mapa interactivo que muestra dónde se retrasan los pedidos de manufactura, por región y estado de pedido, para que el equipo de operaciones detecte los cuellos de botella de un vistazo en lugar de leer hojas de cálculo. Un pipeline en Python limpia los libros de cálculo de origen y los convierte en archivos de datos compactos, y una capa de mapa de calor en WebGL los dibuja en el navegador desde hosting estático.
Leer más
Lo construí de principio a fin, desde la limpieza de datos hasta la visualización y el despliegue.
5 conexiones· elige un componente para ver su recorrido
- Hojas de cálculo fuente a Script de limpieza: pedidos y retrasos en bruto
- Script de limpieza a Archivos de datos JSON: datos regionales uniformes
- Archivos de datos JSON a Hosting estático + CDN: datos publicados
- Hosting estático + CDN a Capa de mapa de calor: página y archivos de datos
- Capa de mapa de calor a Equipo de operaciones: focos de retraso por regiónmodificado
02Resultados
- R01Cuanto más bajo, mejor
Tiempo para detectar y atender retrasos (100% = antes)
Antes 100%, después 60%, −40%. Cuanto más bajo, mejor.AntesDespués
Qué logró
- Respuesta a los retrasos: el tiempo para detectarlos y atenderlos se redujo un 40 %
- Visibilidad: retrasos por región y estado de pedido en un solo mapa interactivo
Leer más
- Calidad de datos: hojas de cálculo desordenadas convertidas en archivos de datos limpios y consistentes en cada actualización
- Operación: hosting estático con CDN, nada que ejecutar ni parchar
El desafío
Los datos de origen vivían en hojas de cálculo con formatos inconsistentes, valores faltantes y problemas de codificación, así que cada actualización corría el riesgo de mostrar una imagen equivocada. El pipeline de limpieza tenía que dejar los datos consistentes antes de que nada llegara al mapa.
Llevarlos a un mapa implicó conciliar ubicaciones con límites regionales, para que cada retraso cayera en el lugar correcto y cada color significara lo que decía.
Leer más
Las primeras versiones también se volvieron lentas al cargar y al interactuar a medida que crecían los datos, lo que anula una herramienta pensada para decidir rápido. Y el diseño debía seguir siendo simple de operar: sin servidores que mantener, solo un paso de limpieza y hosting estático detrás de una CDN.
Qué aprendí
Una visualización es tan creíble como la limpieza de datos que hay detrás, así que el pipeline merecía tanto cuidado como el mapa. La geografía suma sus propias trampas: hay que conciliar coordenadas y límites regionales antes de que un color signifique algo.
Leer más
En los mapas interactivos, la velocidad de carga y de interacción es parte del producto, no un paso de pulido. Y el hosting estático fue el peso justo para el trabajo: barato, rápido y sin nada que mantener.
Stack
- HTML5
- CSS3
- JavaScript
- deck.gl
- Python
- Pandas
- JSON
- Excel
- AWS S3
- CloudFront
Habilidades
- Visualización geoespacial
- Pipelines de limpieza de datos
- Desarrollo front-end
- Hosting estático en la nube
- Tableros operativos
