Earn 20 XP

Objetivos de aprendizaje

  • ¿Por qué Dash?
  • ¿Qué es Dash?
  • Ejemplo
  • Instalando Dash
  • Diseño de la aplicación Dash
  • Primeros pasos
  • Estilizando la aplicación
  • Creación de visualizaciones
  • Principales componentes

¿Por qué Dash?

El uso de la biblioteca Plotly Python por sí mismo crea gráficos interactivos como archivos .html. Los usuarios pueden interactuar con estos gráficos (acercar, seleccionar, pasar el mouse sobre ellos), pero estos gráficos no se pueden conectar a fuentes de datos cambiantes. Debe volver a ejecutar el script .py y volver a generar el archivo .html para ver las actualizaciones. Tener que volver a ejecutar scripts .py no es realmente lo que queremos cuando pensamos en paneles. Queremos que se actualice automáticamente cada vez que cambien los datos. Aquí es donde necesitamos algo como Dash.

¿Qué es Dash?

Dash es una libreria de interfaz de usuario/framework de Python para crear aplicaciones web analíticas. Aquellos que usan Python para análisis de datos, exploración de datos, visualización, modelado, control de instrumentos e informes encontrarán un uso inmediato para Dash.

Está construido sobre Flask, Plotly.js, React y React Js. Le permite crear tableros utilizando Python puro. Dash es de código abierto y sus aplicaciones se ejecutan en el navegador web. Cada elemento estético de la aplicación es personalizable: el tamaño, el posicionamiento, los colores, las fuentes.

Ejemplo Aquí hay un ejemplo de una aplicación Dash para la tasa de fertilidad y la esperanza de vida

image1_18c9fb4b7aeb44d985b5fc595a68697f.gif

Galería de la aplicación Dash

Explore la galería de la aplicación Dash aquí:

https://dash-gallery.plotly.host/Portal/

Instalando Dash

Dash se instala con la siguiente linea de codigo

1 pip install dash

Diseño de la aplicación Dash

Una aplicación Dash suele estar compuesta por 3 pilares:

  1. Dash Components: componentes como el control deslizante, la casilla de verificación y el menú desplegable, para darle a su aplicación una capacidad interactiva
  2. Plotly Graphs: gráficos que permiten al usuario visualizar los datos
  3. The "Callback": uno de los elementos más críticos. Conecta Dash Components y Plotly Graphs para crear una capacidad interactiva. Los componentes de Dash y los gráficos Plotly están dentro del diseño de la aplicación y describen cómo se verá la aplicación, y la a traves de callback se define la interactividad de la aplicación

Dash proporciona clases HTML que nos permiten generar contenido HTML con Python. Para usar estas clases, necesitamos importar dash_core_components y dash_html_components.

  • Usamos la clase Div de dash_html_components para crear un HTML Div. Luego usamos los componentes HTML para generar componentes HTML como H1, H2, etc. dash_html_components tiene todas las etiquetas HTML.
  • Para crear un gráfico en nuestro diseño, usamos la clase Graph de dash_core_components. Graph representa visualizaciones de datos interactivas usando plotly.js. La clase Graph espera un objeto de figura con los datos que se trazarán y los detalles del diseño.

Primeros pasos

Para trabajar con Dash Locally con un editor de texto

Para comenzar, crearemos un archivo llamado app.py usando nuestro editor de texto favorito (puede usar Sublime Text, VSCode o cualquier otro editor de texto).

Para trabajar con Dash en Jupyter Notebook o Colab (A veces no funciona correctamente en Colab)

Si no desea ejecutar Dash localmente en un editor de texto en su dispositivo, sino usar un entorno de Jupyter Notebook, puede usar JupyterDash (https://pypi.org/project/jupyter-dash/).

Nota: JupyterDash a menudo no funciona correctamente con Colab. Puede consultar esta demostración en Colab y ver si funciona para usted:

https://colab.research.google.com/gist/xhlulu/73ffc0b920d72142ac1db5f1026616b0/jupyterdash-demo.ipynb

Primero importaremos estos paquetes.

1
2
3
import dash
import dash_core_components as dcc
import dash_html_components as html

Dar estilo a la aplicación/dashboard (dash_html_components)

Dash también te permite hacer estilos como cambiar el fondo y los colores del texto. Puede cambiar el fondo usando el atributo de estilo y pasando un objeto con su color específico. De manera similar, podemos cambiar el fondo del diseño usando el atributo plot_bgcolor.

Personalizar su tablero es similar a usar HTML. Si está familiarizado con HTML, le resultará útil aquí. Si no, seguramente puedes seguir y aprender.

Sin embargo, hay algunas diferencias aparentes entre HTML y Dash Syntax. En HTML, la propiedad de estilo se especifica mediante dos puntos, pero en Dash, se proporciona un diccionario. Las claves en el diccionario están en camelCased, por ejemplo, text-align es textAlign. En lugar de usar clases como en HTML, className se usa en Dash.

image_7d1b74045bb04987a09e13d2abf5c04e.png

La traduccion de la imagen es la siguiente:

Inicializando la aplicación Dash

Especificación de colores para el fondo y el texto

Clase H1

Especificando el estilo de H1 en la forma de un diccionario

Creando visualizaciones(dash_core_components)

image.png

La traduccion de la imagen es la siguiente:

Usando un set de datos para crear un gráfico de barra

### Visualizando el tablero

Para ver nuestra visualización, necesitamos ejecutar nuestro servidor web, al igual que en Flask (una herramienta de Python para crear aplicaciones web). Recuerda que Dash está construido sobre Flask. También establecemos la depuración en verdadero para asegurarnos de que no tenemos que seguir actualizando el servidor cada vez que hacemos algunos cambios.

image.png

Ejecutar la aplicación localmente

A continuación, acceda a la terminal e inicie el servidor escribiendo el siguiente código:

1
python app.py

Esto iniciará un nuevo servidor web en http://127.0.0.1:8050/. Dirígete allí y mira tu tablero recién creado.

image.png

Componentes principales

A continuación, veamos algunos componentes de dash_core que encontrará al usar Dash.

  • Puede generar un menú desplegable llamando a Dropdown desde dash_core_components y pasando las opciones como una lista de diccionarios.
  • Los botones de radio se pueden generar usando el atributo RadioItems.
  • Para generar casillas de verificación, puede llamar al atributo Checklist.
  • Para usar textos de entrada en su aplicación, usará el atributo Input.

Así es como se verá su aplicación usando estos componentes:

image.png

Buscar ayuda

¿Estás atrapado en algún lugar? ¿No sabe qué hace un componente de Dash en particular o desea obtener más información sobre cómo usarlo?

Dado que los componentes de Dash son declarativos, llamar al comando de ayuda en cualquiera de ellos generará la ayuda para ese componente.

1
help(dcc.Input)

Referencias

Enlace de descarga de diapositivas

Puedes descargar las diapositivas de este tema aquí