E76 - Introducción a Dash

Resumen

En este episodio de enCoders (E76) se presenta Dash, una librería de Python para construir dashboards interactivos que se integra muy bien con Plotly. Se compara con alternativas como Power BI, Tableau y Shiny: Dash gana en flexibilidad y personalización, pero exige escribir más código, mientras que las herramientas "paquetizadas" son más rápidas para dashboards simples. Siguiendo un tutorial de ArjanCodes, se construye un dashboard paso a paso: layout en HTML, dropdowns, botones, callbacks, gráficos de barras y de torta, carga de datos desde CSV y filtros dinámicos encadenados. Se tratan también la internacionalización con i18n y la modularización del código, separando el tratamiento de datos de la interfaz. Al final se discuten el aprendizaje de Dash, la curva de HTML, la diferencia entre "codear" y "programar", y el próximo tema (configurar un ambiente de desarrollo en Linux).

Capítulos

• 00:00
  IntroSe presenta el episodio 76, dedicado a Dash, una librería de Python para hacer dashboards. Se menciona que hay 31-32 capítulos subidos a YouTube y que la clase se prepara para los alumnos.
• 00:43
  Qué es y por qué usar DashDash va muy bien de la mano con Plotly; frente a Power BI o Tableau se elige por flexibilidad cuando el dashboard es muy específico. Si se quiere algo genérico, las otras herramientas son más rápidas. Un asistente lo encuentra conceptualmente similar a Shiny.
• 01:54
  Videos de referencia de ArjanCodesSe basa en tres videos de ArjanCodes y su repositorio. El presentador hizo un fork y lo dividió en commits (paso uno, dos, tres…) para avanzar de a poco, aunque advierte que algunos commits están rotos.
• 03:03
  Ejemplo de Dash dummySe parte de un Main vacío y se muestra el atajo "Run code". Durante este tramo hay una conversación lateral sobre la transición de Data Scientist a Data Engineer: trabajo más estructurado, de producción, con guardias si algo se cae, y más SQL/ETL; el Data Scientist tiene más contacto con negocio.
• 08:23
  Página vacía usando DashSe importan dash y html, se crea el objeto Dash con título y un layout vacío (`html.Div`). La app se levanta en localhost, puerto 8050 por defecto; el título no se muestra en pantalla.
• 09:55
  Layout o estructura de la páginaSe importa una función `create_layout` desde la carpeta source, que organiza la página en `children` de un div: un `h1` como título y un `hr` como línea separadora. Se explica cómo importar funciones específicas de un script. Aparece un error en este commit que el presentador decide no arreglar.
• 13:40
  Resultado al que llegaremosSe muestra el resultado final y se comenta que no hace falta ser experto en HTML, aunque conocer sus componentes básicas ayuda. Se menciona un estilo tipo Bootstrap que cambia tipografía y colores.
• 14:20
  DropdownSe agrega un div "dropdown container" al layout con un título `h6` y un `dcc.Dropdown` con un ID, opciones (Corea del Sur, China, Canadá) y valor inicial "todas las naciones". Los IDs se centralizan en un archivo `ids`. Por ahora los datos son ficticios y luego se reemplazan por un CSV; se menciona el dataset de pingüinos como alternativa.
• 19:31
  Si sabes programar, es mejor usar PowerBI o Dash?Se discute que Power BI es más rápido para cosas simples, que en empresas la mayoría no sabe programar y que con Dash se pueden reutilizar plantillas de código propias. También se mencionan limitaciones duras de Power BI (por ejemplo, el gráfico de radar sin librería externa) y que siempre hay un trade-off entre facilidad y capacidad. Se habla de la falta de programación en la educación escolar.
• 24:52
  BotonesSe activa la opción `multi` del dropdown y se agrega un `html.Button` "seleccionar todo" después del dropdown. Se discute cuándo se necesita algo más custom que Power BI o Tableau: por licencias, restricciones de TI, mantenimiento y que las herramientas comerciales "se ven más profesionales".
• 29:02
  CallbacksCon `@app.callback` se define un `Output` (el value del dropdown) y un `Input` (n_clicks del botón); al hacer clic se devuelve la lista de todas las naciones. Los decoradores agregan funcionalidad a la función definida justo debajo. Se compara con los elementos reactivos de Shiny.
• 33:58
  Agregamos gráficosSe agrega un barchart en el layout con datos de ejemplo de Plotly Express (`medals_long`), devuelto dentro de un `html.Div` con un `dcc.Graph` e ID. Por un momento falla porque se estaba ejecutando el archivo equivocado en lugar de Main.
• 37:50
  Actualización de gráficos con callbacksUn callback escucha el dropdown de naciones y actualiza el gráfico filtrando el dataframe con `query` y el operador `@` para variables externas. Si no hay datos se devuelve un div con el mensaje "No data selected" en lugar de un gráfico vacío.
• 43:38
  MemesSección de humor sobre créditos gratis de nubes que luego se cobran, máquinas virtuales olvidadas encendidas y el sistema financiero global basado en Excel. Antes se aclara que Plotly es una librería de gráficos interactivos y Dash una de páginas web que puede contener gráficos de Plotly, matplotlib u otros; se mencionan el Discord y los capítulos pasados del canal.
• 46:45
  Cargando datos de un csvSe crea `load_transaction_data` que lee un CSV con pandas. Surge un error por un archivo borrado a propósito y se discute el python path y las rutas relativas/absolutas, sugiriendo agregar la ruta del proyecto al python path.
• 49:07
  Variables para después generalizarSe crea una clase `DataSchema` con los nombres de las columnas (amount, category, date) para poder cambiarlos después sin tocar el resto del código. Se crean además las columnas de mes y año a partir de la fecha.
• 50:59
  Elementos análogos para agregarle más elementos al dashboardSe replican dropdowns y botones para años, meses y categorías, y los callbacks escuchan varios inputs a la vez (años, meses y botón). Las categorías se calculan según el filtro, evitando barras vacías, y se agrega un gráfico de torta. Todo es reactivo: los gráficos se reconstruyen cada vez que cambian los filtros, y si no hay filas el mensaje de "sin datos" depende del shape de los datos filtrados. Se compara con Shiny y se discute el aspecto visual y el uso de plantillas.
• 01:02:50
  Localización (traducción a múltiples lenguajes)Se presenta la tercera parte del tutorial: una variable de idioma y la librería i18n con la función `t` aplicada con `apply` a la columna de categorías. El presentador no ejecuta esta parte porque la API de la librería cambió y le daría error.
• 01:08:00
  Modularización y programación versus codearSe propone separar el tratamiento de datos de la interfaz, para poder cambiar pandas por otra librería (por ejemplo polars) sin tocar los componentes. Se defienden la modularización, el trabajo en equipo (un esqueleto y alguien que rellena funciones de datos) y la distinción entre codear y programar como diseñar una arquitectura. También se habla de POO, herencia y polimorfismo como no necesarios para un Data Scientist pero útiles para entender librerías, y se menciona un capítulo sobre flujo de ML sano.
• 01:16:02
  CierreSe anuncia que el próximo tema es configurar un ambiente de desarrollo en una máquina Linux. Los participantes dan su opinión sobre Dash (estructura clara, visual poco llamativa por defecto, prefieren herramientas estándar salvo necesidades específicas) y se resume que su ventaja es la flexibilidad y la posibilidad de armar una biblioteca de snippets.

Palabras clave