Bienvenido a la segunda parte de la serie de tutoriales Dash en python para crear interfaces de usuario interactivas de visualización de datos. En este tutorial, vamos a cubrir la interactividad de la interfaz de usuario con un ejemplo de entrada de texto. Este ejemplo es muy parecido al que puede encontrar en la guía del usuario de Dash.

Crear interfaces de usuario interactivas con Dash

Para empezar, hagamos algunas importaciones:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

Lo nuevo aquí son las importaciones de Input (entrada) y Output (salida), que usaremos envolviendo una función que se encargará de la entrada y salida. Dash usará React en segundo plano para que podamos trabajar con estas entradas y salidas en directo.

Nuestro diseño será simple: tener un campo de entrada y luego un campo de salida. Por ahora, tomemos la entrada y repitámosla como salida.

app = dash.Dash()

app.layout = html.Div([
  dcc.Input(id='input', value='Escribe algo aqui!', type='text'),
  html.Div(id='output')
])

A continuación, crearemos la función que produce lo que queramos basándonos en la entrada. En este caso, sólo será un texto simple, pero también podríamos tener una salida de datos gráficos basados en alguna entrada…etc. Vamos a usar el siguiente decorador para envolver esta función y determinar a qué corresponden las entradas y salidas:

@app.callback(
  Output(component_id='output', component_property='children'),
  [Input(component_id='input', component_property='value')]
)

Para continuar vamos a crear la función:

@app.callback(
  Output(component_id='output', component_property='children'),
  [Input(component_id='input', component_property='value')]
)
def update_value(input_data):
  return 'Input: "{}"'.format(input_data)

Simple por ahora, pero podrías imaginarte cómo podríamos hacer esto más interesante y bastante rápido. Por ejemplo, podríamos estar usando Quandl, esperando un símbolo válido (evaluando la validez ya sea por expresiones regulares o intentando tirar hasta que algo es realmente devuelto) para algún conjunto de datos, una vez válido, devolver el marco de datos, tal vez en forma de tabla, o incluso un gráfico.

Código completo de la interface de usuario interactivas con Dash

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
  dcc.Input(id='input', value='Escribe algo aqui!', type='text'),
  html.Div(id='output')
])

@app.callback(
  Output(component_id='output', component_property='children'),
  [Input(component_id='input', component_property='value')]
)
def update_value(input_data):
  return 'Input: "{}"'.format(input_data)

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

Ahora ejecutando todo el código deberíamos ver:

¿Recuerdas lo que dije antes sobre usar Dash para graficar dinámicamente algo basado en un símbolo? Pues lo hacemos en el próximo tutorial.

Curso de Dash en Python, 3º tutorial

Curso de Dash en Python