Hola y bienvenidos a una serie de tutoriales Python sobre visualización de datos con Dash. Para graficar datos personalmente siempre he usado Matplotlib, la cual es una librería de gráficos normal, y es el backend de muchos otros paquetes como el de Pandas. Aunque he sido capaz de hacer cualquier gráfico que necesite en Matplotlib, hay algunos problemas que siempre he experimentado:

• Interactividad – Los gráficos de Matplotlib no son interactivos.
• Incrustación – Mientras que podemos incrustar gráficos de matplotlib en otras aplicaciones, esto puede ser un proceso muy tedioso y toma mucho tiempo de desarrollo.
• Estética – Aunque es algo trivial, sí importa. Cuando las gráficas son sólo para mí, no importa mucho cómo se vean. Si estás intentando vender algo basado en gráficos, o vender una aplicación con tablas incrustadas. Matplotlib es probablemente inaceptable porque la representación no es atractiva.

Dash es un framework de Python para la creación de aplicaciones web analíticas

Para gráficos rápidos para probar, prototipos…etc, lo mas recomendable es usar Matplotlib, principalmente debido a la muy buena integración con la librería Pandas.

Instalación de Dash

Para usar Dash, necesitamos los siguientes paquetes: dash, dash-renderer, dash-html-components, dash-core-components, y plotly. Estos paquetes también tienen varias dependencias. Puede instalarlos en Linux con:

sudo pip install dash dash-renderer dash-html-components dash-core-components plotly

o, en Windows, abra cmd.exe como administrador y haga lo siguiente:

pip install dash dash-renderer dash-html-components dash-core-components plotly

Ejemplo con Dash

Ahora vamos a mostrar un ejemplo rápido y básico de Dash en acción.

Para empezar, hagamos algunas importaciones:

import dash
import dash_core_components as dcc
import dash_html_components as html

Aquí, sólo estamos importando cosas como la librería dash, varios componentes (cosas como componentes de gráficos), y luego componentes HTML (cosas como etiquetas div…etc). A continuación, comenzamos nuestra aplicación:

app = dash.Dash()

Dado que Dash está construido alrededor del framework de Flask, muchos de estos ajustes y configuraciones de aplicaciones deberían resultarle familiares si está familiarizado con Flask. A continuación, creamos un diseño:

app.layout = html.Div('Tutoriales Dash en AprenderPython.com')

En el caso anterior, esto haría que una aplicación web simplemente dijera “Tutoriales Dash en AprenderPython.com” en la carga de la página. Nada asombroso, pero bueno es muy simple! Ahora hagamos esto:

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

Ejecute esto, y debería ver lo siguiente en su consola:

* Restarting with stat

Ahora, puedes escribir en tu navegador 127.0.0.1:8050 y deberías ver algo como:

Esto debería ser bastante fácil de entender ahora mismo, pero rápidamente empezaremos a añadir atributos e incrustar etiquetas HTML hijas dentro de aquí. El contenido real de una etiqueta se encuentra bajo un parámetro llamado children, que tendrá el siguiente aspecto:

app.layout = html.Div(children='Tutoriales Dash en AprenderPython.com')

Si no tienes etiquetas incrustadas, o atributos como style o id o className (el equivalente en Dash de la clase de HTML), puede que no veas la necesidad de nombrar explícitamente a los children, pero te sugiero que lo hagas para cualquier aplicación que esté configurada para crecer.

Los children también pueden ser una lista de artículos, no sólo uno. Añadamos un gráfico y hagamos este 1º tutorial de Dash en python un poco mas interesante:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
  html.H1(children='Tutoriales Dash en AprenderPython.com'),
  dcc.Graph()])

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

Aquí, puedes ver que nuestro diseño consiste en un div gigante, que contiene los siguientes children: una etiqueta h1 de “Tutoriales Dash en AprenderPython.com” y un dcc.Graph. Esto no se ejecutará todavía, necesitamos especificar los elementos del gráfico, así que ahora vamos a construirlo. He aquí un ejemplo de gráfico rápido:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
  html.H1(children='Tutoriales Dash en AprenderPython.com'),
  dcc.Graph(id='ejemplo',
    figure={
      'data': [
        {'x': [1, 2, 3, 4], 'y': [1, 8, 3, 7], 'type': 'line', 'name': 'Bicicletas'},
        {'x': [1, 2, 3, 4], 'y': [5, 2, 8, 8], 'type': 'bar', 'name': 'Bicicletas electricas'},
        ],
      'layout': {
      'title': 'Ejemplo básico en Dash'
        }
      })
  ])

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

El ID es obligatorio, y podemos utilizarlo más tarde para manipular el gráfico. Luego tenemos el elemento de la figure, que contiene los datos y el diseño del gráfico. Aquí es donde pasamos todos los datos y qué tipo de gráfico queremos, junto con otros bits de información. Dentro de la maquetación, podemos añadir cosas como el título que hemos añadido aquí.

Ahora al ejecutar nos da:

Ahora notará que puedes cambiar las cosas en tiempo real mientras su servidor se está ejecutando. Cada vez que guarde su script, el servidor debería actualizarse. A veces esto no funciona, o se produce un error, y entonces las cosas pueden ponerse feas. Cuando todo lo demás falla, puedes eliminar los procesos en ejecución de Python para reiniciar las cosas (puedes ir al administrador de tareas y eliminar los procesos que se no quieren actualizarse)

Ahora que podemos ver cómo crear gráficos, nos vamos a centrar de nuevo en la interactividad. Dash nos da el poder de la librería javascript React, con la que podemos interactuar en tiempo real con nuestra aplicación, sin necesidad de recargar la página. Esto lo veremos en el siguiente tutorial.

Curso de Dash en Python, 2º tutorial

Curso de Dash en Python