Esta introducción rápida a Dash te llevará a “Hello World” en menos de 5 minutos


Esta introducción rápida a Dash te llevará a “Hello World” en menos de 5 minutos

 

 

 

 

Dash es una biblioteca de código abierto para crear aplicaciones reactivas en Python. Puede crear paneles increíbles en su navegador usando Dash.

El conjunto de datos de Iris se puede llamar el ‘mundo de saludo’ de conjuntos de datos. En este artículo, aprenderemos a construir una aplicación Dash simple en la que usaremos el conjunto de datos Iris. Este conjunto de datos está limpio, lo cual es bueno para nosotros, de modo que podamos centrarnos en correr en lugar de limpiar los datos.

Configuración de Dash

Para crear aplicaciones geniales, necesitas bibliotecas geniales.

Si aún no ha instalado Dash, ejecute estos comandos en su terminal:

pip install dash==0.21.1 # The core dash backend
pip install dash-renderer==0.12.1 # The dash front-end
pip install dash-html-components==0.10.1 # HTML components
pip install dash-core-components==0.22.1 # Supercharged components
pip install plotly --upgrade

Ejecute su aplicación como:

python helloiris.py

Sé claro con tus versiones de Python.

Diseño de la aplicación

Podemos construir el diseño con la  dash_html_components   biblioteca y la     dash_core_components  biblioteca. Los he importado como se muestra arriba. El     dash_html_components  es para todas las etiquetas HTML, mientras que el último es para componentes interactivos creados con React.js. Habiendo dicho eso, escribamos algo en nuestro navegador usando Dash:

app.layout = html.Div(children=[
    html.H1(children='Iris visualization'),
    html.Div(
    '''
          Construido con Dash:  un marco de aplicaciones web para Python.
    ''')
])

¡Sí! Así de fácil es. El código HTML equivalente se vería así:

<div>
 <h1>   Visualizacion de Iris  </h1>
 <div>  Construido con Dash: un marco de aplicaciones web para Python. </div>
</div>

Observe el  children  atributo en el primero  Div .  Se usa para definir los   list   elementos incluidos en esa etiqueta. Este es un argumento posicional (siempre viene primero) y se puede omitir como se puede ver en el siguiente  H1 y se  Div  muestra arriba.

¿Podemos darle un estilo ? Te escucho preguntar Bueno, por supuesto! Dash le permite escribir diccionarios de estilo como lo haría en una  <style>  etiqueta en HTML. También le permite escribir CSS en línea y vincular archivos CSS externos. Aquí es cómo podemos hacerlo.

Diccionarios de estilo

Vamos a crear un diccionario llamado colores.

colors = {
         'background': '#0000FF',
         'color': '#FFA500'
}

Se puede unir con un elemento usando el   style    atributo como se muestra.

app.layout = html.Div(style=colors,children=[
    html.H1(children='Iris visualization'),
    html.Div(
    '''
        Construido con Dash: un marco de aplicacion web para Python.
    ''')
])

CSS en línea

En Dash, las claves de los diccionarios son  camelCased  . Así que en lugar de  text-align  que utilizamos   textAlign  . Además, el class   atributo de las etiquetas HTML es   className  lo que podrías saber si usas Reaccionar.

app.layout = html.Div(style=colors,children=[
    html.H1(children='Iris visualization',style = {'textAlign':'center'}),
html.Div(style={'textAlign':'center'},children='''
        Construido con Dash: un marco de aplicacion web para Python.
    ''')
])

CSS externo

Podemos crear una lista de URL o rutas a los archivos CSS que queremos incluir en nuestra aplicación Dash, y luego usar  app.css.append_css   para incluirlos.

external_css = ["https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
              "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ]
para css en external_css:
    app.css.append_css({"external_url": css})

Podemos incluir JavaScript de la misma manera mediante el uso de app.scripts.append_script 

¡Espero que estés conmigo hasta ahora! Así es como se ve nuestro archivo helloiris.py:

import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
#External CSS
external_css = ["https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
                "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", ]
para css en external_css:
    app.css.append_css({"external_url": css})
#External JavaScript
external_js = ["http://code.jquery.com/jquery-3.3.1.min.js",
               "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"]
para js en external_js:
    app.scripts.append_script({"external_url": js})
#Internal CSS
colors = {
         'background': '#0000FF',
         'color': '#FFA500'
}
#Nuestro diseño de la aplicación
app.layout = html.Div(style=colors,children=[
 html.H1(children='Iris visualization',style={'textAlign':'center'}),
html.Div(style={'textAlign':'center'},children='''
     Contruido con Dash: un marco de aplicacion web para Python.
    ''')
])
if __name__ == '__main__':
    app.run_server(debug=True)

Vamos a obtener algunos datos

Suponiendo que esté familiarizado con los pandas, usaremos esta biblioteca de Python para importar el archivo iris.csv en nuestra aplicación. Si no sabe de qué se trata este conjunto de datos, le recomiendo que lo lea y lo descargue desde aquí .

import pandas as pd
header_names =[ 'sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'class']
df = pd.read_csv('path/to/Iris.csv',names=header_names)

Ahora que nuestros datos se cargan en el df  marco de datos, es hora de visualizarlos.

Visualización de datos

¿Recuerdas los componentes interactivos de los que te hablé? La dash_core_components    biblioteca? Bueno, eso es lo que vamos a usar aquí.

import plotly.graph_objs as go

Agreguemos un nuevo componente a nuestro app.layout.    Esta vez no es una etiqueta HTML sino un gráfico interactivo. Dash usa Plotly  para trazar gráficos.

dcc.Graph(
        id='Iris Viz',
        figure={
            'data': [
                go.Scatter(
                    x=df[df['class'] == i]['petal_length'],
                    y=df[df['class'] == i]['sepal_length'],
                    mode='markers',
                    opacity=0.7,
                    marker={
                        'size': 15,
                        'line': {'width': 0.5, 'color': 'white'}
                    },
                    name=i
                ) for i in df['class'].unique()
            ],
            'layout': go.Layout(
                xaxis={'title': 'Petal Length'},
                yaxis={'title': 'Sepal Length'},
                margin={'l': 200, 'b': 40, 't': 100, 'r': 200},
                legend={'x': 0, 'y': 1},
                hovermode='closest'
            )
        }
    )
 
Así es como se ve el gráfico.

Whoa! ¡Un párrafo completo en Python! No te preocupes No es difícil de entender. Vamos a repasarlo pieza por pieza:

El dcc.Graph  tiene un id  argumento que se utiliza para hacer referencia a la gráfica en el futuro para la eliminación o la superposición o cualquier otro propósito.

El figure  argumento es el mismo que el utilizado en plotly.py . Toma dos argumentos, data  y  layout .

En data  podemos especificar qué columnas del marco de datos trazar en qué eje. También podemos especificar el modo, por ejemplo: marcador y luego las propiedades del marcador, como ancho y línea (que significa borde).

En layout  Definimos las etiquetas de los ejes, la posición de la leyenda, los márgenes de los gráficos (izquierda, arriba, abajo, derecha) y mucho más.

Esto no es todo. Estos gráficos son interactivos y pueden ser manipulados por las entradas del usuario.

Bien, ¡vamos a construir algunas DashApps geniales este verano!

Leave a Reply

Your email address will not be published. Required fields are marked *

Ir a la barra de herramientas