Posicionamiento de componentes de Dash

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

HTML y la web

HTML: lenguaje para estructurar sitios web

HTML: la estructura de madera de una casa
- Coloca los objetos
CSS: el color de la pintura
- Estilo (p. ej., color de fondo) de los objetos

el logo oficial de html. pone HTML en letras azules

el logo oficial de css. pone css en letras azules en relieve

Etiquetas Div y H

Dash usa dash.html para conectar HTML y Python

Dos estructuras HTML importantes ("etiquetas"):

Etiquetas div: clave para estructurar sitios
- Puedes tener muchos divs de distintos tamaños con cosas dentro
Etiquetas H: títulos de distintos tamaños (H1 > H6)

Usando etiquetas Div y H

Div general (todo dentro)
Div interno: fondo rojo
Div con fondo azul
- Con etiquetas H dentro
Ignora la parte style: veremos CSS luego

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

Nuestro ejemplo mostrado

Imagen de una caja azul con borde punteado. En la esquina superior izquierda hay una caja roja rellena. Debajo, una caja azul con las palabras 'This box' y 'another title' dentro

Fíjate:

Div con fondo rojo
Div con fondo azul y etiquetas H

Nuestro ejemplo en Dash

Recreando el ejemplo de HTML con Dash

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

Desglosando el layout

Las etiquetas HTML se mapean a html.() de Dash
- html.Div() = <div>
- html.H1() = <h1>
El último div tiene el argumento children
- Lista de objetos que van dentro
¡También podemos poner componentes dcc.Graph()!

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

Gráficas en el layout

bar_fig_country = px.bar(ecom_sales, 
 x='Total Sales ($)', y='Country',
 color='Country', color_discrete_map=
 {'United Kingdom':'lightblue', 
 'Germany':'orange', 'France':'darkblue', 
 'Australia':'green', 'Hong Kong':'red'})
app = Dash()

app.layout = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Un GIF de un gráfico de barras horizontal de ventas totales en el eje x por país en el eje y en un navegador Chrome. Los países tienen colores distintos. El ratón pasa por encima del gráfico y luego va a la barra de URL con la dirección del servidor

Añadiendo más estructura

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Un GIF de la misma app que en el ejercicio anterior; el gráfico de barras se ha desplazado hacia abajo y arriba hay una pequeña caja azul claro

¡Vamos a practicar!

Creación de paneles con Dash y Plotly