De Plotly a Dash

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

Primera app en Dash

Una app completa de Dash:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

Puedes usar funcionalidad de Python
- p. ej., interpolación de cadenas print("f{my_variable}")

Importaciones principales de Dash

from dash import Dash, dcc

Dash inicializa la app
dcc tiene componentes de UI como gráficos y entradas
- Un componente en nuestra app
- Más componentes a lo largo del curso

El layout de la app

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Crea un objeto app con Dash()
Define app.layout
- Con dcc.Graph()
  - figure = la figura de Plotly a renderizar
  - id = clave para callbacks más adelante

Ejecutar la app

if __name__ == '__main__':
    app.run(debug=True)

Ejecuta el script desde la terminal
- p. ej., python my_app.py en la terminal
debug da feedback al probar

Nuestra app

Accede desde un navegador como Google Chrome
Mientras sirves la app, guarda el archivo .py para ver cambios en vivo en el navegador

Una captura de terminal tras ejecutar una app de Dash. Texto blanco sobre fondo negro con los detalles mencionados en el guion.

Nuestra app en el navegador

Un GIF de un gráfico de barras horizontal: ventas totales en el eje X por país en el eje Y. Es el mismo gráfico de la lección anterior, pero en Chrome y con la dirección del servidor en la barra de URL. El ratón pasa por el gráfico y hace clic en la barra de URL para mostrar que hay un servidor.

Dash en DataCamp

Algunas diferencias con otros ejercicios de DataCamp:
- Líneas de configuración al inicio
- Se ejecuta todo a la vez (no línea a línea)
- Código (mucho) más largo
Cuadros de mando totalmente funcionales (¡expande la ventana!)

Una captura de la parte superior de un ejercicio de código de Dash ya ejecutado, destacando el botón para expandir la salida HTML y ver la app a pantalla completa.

¡Vamos a practicar!

Creación de paneles con Dash y Plotly