Positionera Dash-komponenter

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

HTML och webben

HTML: språk för att strukturera webbplatser

HTML: trästommen i ett hus
- Bestämmer placeringen av objekt
CSS: färgen på väggarna i ett rum
- Stil (t.ex. bakgrundsfärg) för objekt

den officiella html-logotypen med texten HTML i blått

den officiella css-logotypen med texten CSS i blått upphöjt

Div- och H-taggar

Dash använder dash.html som brygga mellan HTML och Python

Två viktiga HTML-strukturer ("taggar"):

Div-taggar: viktiga för att strukturera webbplatser
- Kan ha många div-element i olika storlekar med olika innehåll
H-taggar: rubriker i olika storlekar (H1 > H6)

Använda div- och H-taggar

Yttre div (innehåller allt)
Inre div: röd bakgrund
Div med blå bakgrund
- H-taggar inuti
Ignorera style-delen – mer om CSS längre fram!

<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>

Vårt exempel visas

En blå ruta med prickad kantlinje. I det övre vänstra hörnet finns en ifylld röd ruta. Under den finns en ifylld blå ruta med texten 'This box' och 'another title'

Observera:

Div med röd bakgrund
Div med blå bakgrund och H-taggar

Vårt exempel i Dash

Återskapa HTML-exemplet i 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'})
    ]

Förstå layouten

HTML-taggar motsvarar html.() i Dash
- html.Div() = <div>
- html.H1() = <h1>
Den sista div-en har ett children-argument
- En lista med objekt att placera inuti
Vi kan även lägga dcc.Graph()-komponenter inuti!

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})
]

Diagram i layouten

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)
]

En gif av ett horisontellt stapeldiagram med total försäljning på x-axeln och land på y-axeln i en Chrome-webbläsare. Länderna har olika färger. Muspekaren rör sig över diagrammet och sedan till adressfältet med serveradressen

Lägga till mer struktur

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)
]

En gif av samma app som i föregående övning, men stapeldiagrammet har förskjutits nedåt och en liten ljusblå ruta visas ovanför

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly