Dash Framework

En este capítulo, analizaremos en detalle el marco de Dash.

Dash es un marco de Python de código abierto que se utiliza para crear aplicaciones web analíticas. Es una poderosa biblioteca que simplifica el desarrollo de aplicaciones basadas en datos. Es especialmente útil para los científicos de datos de Python que no están muy familiarizados con el desarrollo web. Los usuarios pueden crear paneles de control increíbles en su navegador usando dash.

Construido sobre Plotly.js, React y Flask, Dash vincula elementos de la interfaz de usuario moderna como menús desplegables, controles deslizantes y gráficos directamente a su código analítico de Python.

Las aplicaciones Dash consisten en un servidor Flask que se comunica con los componentes React de front-end mediante paquetes JSON a través de solicitudes HTTP.

Las aplicaciones de Dash están escritas exclusivamente en Python, por lo que NO es necesario HTML o JavaScript.

Configuración del tablero

Si Dash aún no está instalado en su terminal, instale las bibliotecas de Dash mencionadas a continuación. Como estas bibliotecas están en desarrollo activo, instálelas y actualícelas con frecuencia. También se admiten Python 2 y 3.

  • pip install dash == 0.23.1 # El backend del tablero principal
  • pip install dash-renderer == 0.13.0 # La interfaz del tablero
  • pip install dash-html-components == 0.11.0 # componentes HTML
  • pip install dash-core-components == 0.26.0 # Componentes sobrealimentados
  • pip install plotly == 3.1.0 # Biblioteca de gráficos de trama

Para asegurarnos de que todo funcione correctamente, aquí creamos un archivo dashApp.py simple.

Diseño del tablero o de la aplicación

Las aplicaciones Dash se componen de dos partes. La primera parte es el "diseño" de la aplicación, que básicamente describe cómo se ve la aplicación. La segunda parte describe la interactividad de la aplicación.

Componentes principales

Podemos construir el diseño con el dash_html_components y el dash_core_componentsbiblioteca. Dash proporciona clases de Python para todos los componentes visuales de la aplicación. También podemos personalizar nuestros propios componentes con JavaScript y React.js.

importar dash_core_components como dcc

importar dash_html_components como html

El dash_html_components es para todas las etiquetas HTML donde el dash_core_components es para la interactividad construida con React.js.

Usando las dos bibliotecas anteriores, escribamos un código como se indica a continuación:

app = dash.Dash()
app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
   html.Div(children='''Dash Framework: A web application framework for Python.''')

Y el código HTML equivalente se vería así:

<div>
   <h1> Hello Dash </h1>
   <div> Dash Framework: A web application framework for Python. </div>
</div>

Escribir la aplicación Simple Dash

Aprenderemos cómo escribir un ejemplo simple en el tablero usando la biblioteca mencionada anteriormente en un archivo dashApp.py.

# -*- coding: utf-8 -*-
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='Hello Dash'),
   html.Div(children='''Dash Framework: A web application framework for Python.'''),
	
   dcc.Graph(
      id='example-graph',
      figure={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
         ],
         'layout': {
            'title': 'Dash Data Visualization'
         }
      }
   )
])

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

Ejecutando la aplicación Dash

Tenga en cuenta los siguientes puntos mientras ejecuta la aplicación Dash.

(MyDjangoEnv) C: \ Users \ rajesh \ Desktop \ MyDjango \ dash> python dashApp1.py

  • Aplicación de Flask de servicio "dashApp1" (carga diferida)

  • Medio ambiente: producción

    ADVERTENCIA: No utilice el servidor de desarrollo en un entorno de producción.

    En su lugar, utilice un servidor WSGI de producción.

  • Modo de depuración: activado

  • Reiniciando con stat

  • ¡El depurador está activo!

  • PIN del depurador: 130-303-947

  • Que se ejecuta en http://127.0.0.1:8050/ (Presione CTRL + C para salir)

127.0.0.1 - - [12/Aug/2018 09:32:39] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /favicon.ico HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:39:52] "GET /favicon.ico HTTP/1.1" 200 -

Visitar http:127.0.0.1:8050/en su navegador web. Debería ver una aplicación que se parece a esto.

En el programa anterior, algunos puntos importantes que deben tenerse en cuenta son los siguientes:

  • El diseño de la aplicación se compone de un árbol de "componentes" como html.Div y dcc.Graph.

  • La biblioteca dash_html_components tiene un componente para cada etiqueta HTML. El componente html.H1 (children = 'Hello Dash') genera un elemento HTML <h1> Hello Dash </h1> en su aplicación.

  • No todos los componentes son HTML puro. Los dash_core_components describen componentes de nivel superior que son interactivos y se generan con JavaScript, HTML y CSS a través de la biblioteca React.js.

  • Cada componente se describe completamente a través de atributos de palabras clave. Dash es declarativo: describirá principalmente su aplicación a través de estos atributos.

  • La propiedad de los niños es especial. Por convención, siempre es el primer atributo, lo que significa que puede omitirlo.

  • Html.H1 (children = 'Hello Dash') es lo mismo que html.H1 ('Hello Dash').

  • Las fuentes de su aplicación se verán un poco diferentes a las que se muestran aquí. Esta aplicación utiliza una hoja de estilo CSS personalizada para modificar los estilos predeterminados de los elementos. Se permite el estilo de fuente personalizado, pero a partir de ahora, podemos agregar la siguiente URL o cualquier URL de su elección:

    app.css.append_css ({"external_url":https://codepen.io/chriddyp/pen/bwLwgP.css}) para que su archivo tenga la misma apariencia de estos ejemplos.

Más sobre HTML

La biblioteca dash_html_components contiene una clase de componente para cada etiqueta HTML, así como argumentos de palabras clave para todos los argumentos HTML.

Agreguemos el estilo en línea de los componentes en el texto de nuestra aplicación anterior:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
colors = {
   'background': '#87D653',
   'text': '#ff0033'
}

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
   html.H1(
      children='Hello Dash',
      style={
         'textAlign': 'center',
         'color': colors['text']
      }
   ),
	
   html.Div(children='Dash: A web application framework for Python.', style={
      'textAlign': 'center',
      'color': colors['text']
   }),
	
   dcc.Graph(
      id='example-graph-2',

      figure={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
         ],
         'layout': {
            'plot_bgcolor': colors['background'],
            'paper_bgcolor': colors['background'],
            'font': {
               'color': colors['text']
            }
         }
      }
   )
])

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

En el ejemplo anterior, modificamos los estilos en línea de los componentes html.Div y html.H1 con la propiedad style.

Se representa en la aplicación Dash de la siguiente manera:

Hay un par de distinciones clave entre dash_html_components y atributos HTML:

  • Para la propiedad de estilo en Dash, puede simplemente proporcionar un diccionario, mientras que en HTML, es una cadena separada por punto y coma.

  • Las claves del diccionario de estilo son camelCased, entonces text-align cambia a textalign.

  • ClassName en Dash es similar al atributo de clase HTML.

  • El primer argumento son los hijos de la etiqueta HTML que se especifica mediante el argumento de la palabra clave hijos.

Componentes reutilizables

Al escribir nuestro marcado en Python, podemos crear componentes complejos y reutilizables como tablas sin cambiar contextos o idiomas.

A continuación se muestra un ejemplo rápido que genera una "Tabla" a partir del marco de datos de pandas.

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv(
   'https://gist.githubusercontent.com/chriddyp/'
   'c78bf172206ce24f77d6363a2d754b59/raw/'
   'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
   'usa-agricultural-exports-2011.csv')
	
def generate_table(dataframe, max_rows=10):
   return html.Table(
      # Header
      [html.Tr([html.Th(col) for col in dataframe.columns])] +
      # Body
      [html.Tr([
         html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
      ]) for i in range(min(len(dataframe), max_rows))]
   )
	
app = dash.Dash()
app.layout = html.Div(children=[
   html.H4(children='US Agriculture Exports (2011)'),
   generate_table(df)
])

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

Nuestra salida será algo así como:

Más sobre visualización

La biblioteca dash_core_components incluye un componente llamado Graph.

Graph presenta visualizaciones de datos interactivas utilizando la biblioteca de gráficos de JavaScript de código abierto plotly.js. Plotly.js admite alrededor de 35 tipos de gráficos y los renderiza tanto en SVG de calidad vectorial como en WebGL de alto rendimiento.

A continuación se muestra un ejemplo que crea un diagrama de dispersión a partir de un marco de datos de Pandas:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app = dash.Dash()

df = pd.read_csv(
   'https://gist.githubusercontent.com/chriddyp/' +
   '5d1ea79569ed194d432e56108a04d188/raw/' +
   'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
   'gdp-life-exp-2007.csv')
	
app.layout = html.Div([
   dcc.Graph(
      id='life-exp-vs-gdp',
      figure={
         'data': [
            go.Scatter(
               x=df[df['continent'] == i]['gdp per capita'],
               y=df[df['continent'] == i]['life expectancy'],
               text=df[df['continent'] == i]['country'],
               mode='markers',
               opacity=0.7,
               marker={
                  'size': 15,
                  'line': {'width': 0.5, 'color': 'white'}
               },
               name=i
            ) for i in df.continent.unique()
         ],
         'layout': go.Layout(
            xaxis={'type': 'log', 'title': 'GDP Per Capita'},
            yaxis={'title': 'Life Expectancy'},
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend={'x': 0, 'y': 1},
            hovermode='closest'
         )
      }
   )
])

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

La salida del código anterior es la siguiente:

Estos gráficos son interactivos y receptivos. Puede pasar el cursor sobre los puntos para ver sus valores, hacer clic en los elementos de la leyenda para alternar los trazos, hacer clic y arrastrar para ampliar, mantener presionada la tecla Mayús y hacer clic y arrastrar para desplazarse.

Reducción

Si bien dash expone los tipos de HTML a través de la biblioteca dash_html_components, puede resultar tedioso escribir su copia en HTML. Para escribir bloques de texto, puede utilizar el componente Markdown en la biblioteca dash_core_components.

Componentes principales

Dash_core_components incluye un conjunto de componentes de nivel superior como menús desplegables, gráficos, rebajas, bloques y muchos más.

Como todos los demás componentes de Dash, se describen de forma totalmente declarativa. Todas las opciones configurables están disponibles como un argumento de palabra clave del componente.

A continuación se muestra el ejemplo, utilizando algunos de los componentes disponibles:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
   html.Label('Dropdown'),
   dcc.Dropdown(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value='MTL'
   ),
	
   html.Label('Multi-Select Dropdown'),
   dcc.Dropdown(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value=['MTL', 'SF'],
      multi=True
   ),
	
   html.Label('Radio Items'),
   dcc.RadioItems(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value='MTL'
   ),
	
   html.Label('Checkboxes'),
   dcc.Checklist(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      values=['MTL', 'SF']
   ),

   html.Label('Text Input'),
   dcc.Input(value='MTL', type='text'),
	
   html.Label('Slider'),
   dcc.Slider(
      min=0,
      max=9,
      marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
      value=5,
   ),
], style={'columnCount': 2})

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

La salida del programa anterior es la siguiente:

Llamar a ayuda

Los componentes de Dash son declarativos. Cada aspecto configurable de estos componentes se establece durante la instalación como un argumento de palabra clave. Puede llamar a la ayuda en su consola de Python sobre cualquiera de los componentes para obtener más información sobre un componente y sus argumentos disponibles. Algunos de ellos se dan a continuación:

>>> help(dcc.Dropdown)
Help on class Dropdown in module builtins:
class Dropdown(dash.development.base_component.Component)
| A Dropdown component.
| Dropdown is an interactive dropdown element for selecting one or more

| items.
| The values and labels of the dropdown items are specified in the `options`
| property and the selected item(s) are specified with the `value` property.
|
| Use a dropdown when you have many options (more than 5) or when you are
| constrained for space. Otherwise, you can use RadioItems or a Checklist,
| which have the benefit of showing the users all of the items at once.
|
| Keyword arguments:
| - id (string; optional)
| - options (list; optional): An array of options
| - value (string | list; optional): The value of the input. If `multi` is false (the default)
-- More --

Para resumir, el diseño de una aplicación Dash describe cómo se ve la aplicación. El diseño es un árbol jerárquico de componentes. La biblioteca dash_html_components proporciona clases para todas las etiquetas HTML y los argumentos de palabras clave, y describe los atributos HTML como style, className e id. La biblioteca dash_core_components genera componentes de nivel superior como controles y gráficos.