Crea una web app en Python con Dash

En este artículo aprenderás a crear una aplicación web en Python con el framework Dash.

Nivel: Principiante, solo se requieren conocimientos generales de Python y de HTML.

Mucho gusto, Dash

Dash fue concebido por Chris Parmer. No estaba en el campo de la tecnología hasta entonces y buscaba una forma asequible de desarrollar aplicaciones de datos.

Hoy, Dash es uno de los frameworks más populares para la ciencia de datos y Machine Learning, capaz de conectar los elementos de la interfaz de usuario moderna con el código de análisis de Python.

De esta manera, podemos construir visualizaciones poderosas y hermosas de una manera simple, como este ejemplo a continuación, donde vemos la apertura de tiendas WalMart en Estados Unidos.

Nuestra primera aplicación: Presentaciones

Ahora que sabemos un poco más sobre Dash y cómo surgió, podemos dedicarnos a lo que más nos interesa: ¡ponernos manos a la obra y construir nuestra primera aplicación!

Esto es lo que haremos: un gráfico de barras que muestra la cantidad de fruta (piña o abacaxi, jaca y plátano o banana) en São Paulo y Río de Janeiro.

Nuestra primera aplicación: Paso a paso

Aquí está el paso a paso del código Python de nuestra aplicación:

1) Instalación de paquetes

Solo necesitaremos tres paquetes: Dash para crear la aplicación, Pandas para la manipulación de datos y Plotly Express para la visualización de datos (ya incluido en Dash).

Desde tu editor de código fuente favorito (personalmente me gusta usar PyCharm), crea un archivo de Python (puedes llamarlo app.py) y ejecuta los siguientes comandos:

2) Importar

Una vez que tengamos todos los paquetes instalados (esto puede tardar unos minutos), podemos ir a la cabecera de nuestro archivo de Python e importarlos:

Dash en sí contiene muchas bibliotecas e importamos las que necesitaremos: Dash para inicializar nuestra aplicación, HTML para crear componentes de ese tipo (por ejemplo, Div) y dcc para crear componentes de Dash como botones y gráficos.

3) Inicializar la app

Esta línea de código a continuación permite inicializar la aplicación.

4) Dataframe

Luego creamos una tabla con los datos que vamos a utilizar. Esta tabla se conoce como dataframe en Pandas (más información aquí).

Para simplificar las cosas, creamos datos aleatoriamente, pero también podemos importar datos en formato CSV, Excel, HTML o JSON, por ejemplo, utilizando las funciones de lectura de la biblioteca de Pandas. Lo que importa es tener una tabla con nuestros datos y es lo que el dataframe nos permite hacer.

5) Gráfico

Una vez que tenemos los datos en formato de tabla, podemos crear el gráfico de barras. Para eso, usamos el método bar de Plotly Express (Plotly Express tiene métodos para muchos tipos de gráficos que puedes ver aquí).

Queremos mostrar la cantidad de cada fruta, dependiendo de la ciudad. Así que pongamos las frutas en el eje X y la cantidad en el eje  Y. ¿Y la ciudad? Se especificará a través del color. De esta forma será posible mostrar toda la información en un único gráfico.

En los parámetros del método bar, primero especificamos cuál es nuestra tabla de datos (será df en nuestro caso), qué columna mostraremos en el eje X (aquí será fruit), cuál en el eje Y (será cantidad) y de qué color (será ciudad). Terminamos eligiendo group para el parámetro barmode, por lo que tendremos las barras juntas para cada elemento en el eje X.

6) Layout de la app

Ponemos nuestros datos en una tabla y creamos nuestro gráfico a partir de ella.

¡Hicimos un gran trabajo! Ahora, para terminar, necesitamos “dar cuerpo” a nuestra aplicación, es decir, definir el layout de la aplicación.

Tenemos 4 componentes: un gran Div (componente HTML Div) que contendrá todo el contenido de la aplicación, un título (componente HTML H1), un texto (componente HTML Div con el texto) y, finalmente, un componente Dash para el gráfico (dcc.Graph). En este último, ponemos el nombre de nuestro gráfico (fig) en el parámetro figure, por lo que el componente mostrará el gráfico que creamos anteriormente.

7) Ejecución del código

¡Excelente! Casi listo. Ahora solo agrega dos líneas que permitirán que se ejecute el código. Este bloque de código proviene del framework Flask en el que se basa Dash.

¡Listo! Ahora solo ejecuta el código. Si no hay errores verás este mensaje:

Vamos a la dirección web y esto es lo que tenemos:

¡Perfecto! Vemos nuestra aplicación en la página web con el título H1, el texto y el gráfico. Podemos comparar los datos visualizados aquí con los datos de nuestra tabla del paso 4: 4 piñas en São Paulo y 2 en Río de Janeiro; 1 yaca en São Paulo y 4 en Río; 2 plátanos en São Paulo y 5 en Río. ¡Está correcto!

Nuestra primera aplicación está lista. Veremos en un próximo artículo cómo implementarla.

Si deseas obtener más información sobre el layout de Dash, entra aquí.

Gracias por leer. ¡Hasta luego!