Dash-componenten positioneren

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

HTML en het web

HTML: taal voor het structureren van websites

HTML: het houten frame van een huis
- Bepaalt plaatsing van objecten
CSS: de verfkleur van een kamer
- Stijl (bijv. achtergrondkleur) van objecten

het officiële html-logo. er staat HTML in blauwe letters

het officiële css-logo. er staat css in blauwe reliëfletters

Div- en H-tags

Dash gebruikt dash.html als schakel tussen HTML en Python

Twee belangrijke HTML-structuren (‘tags’):

Div-tags: belangrijk voor structuur van sites
- Veel divs in uiteenlopende formaten met verschillende inhoud
H-tags: titels in verschillende groottes (H1 > H6)

Div- en H-tags gebruiken

Buitenste div (alles erin)
Binnenste div: rode achtergrond
Div met blauwe achtergrond
- H-tags erin
Negeer style voorlopig — later meer over ‘CSS’!

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

Ons voorbeeld weergegeven

Een afbeelding van een blauw vak met een gestippelde rand. Linksboven staat een rood gevuld vak. Daaronder een blauw gevuld vak met de tekst 'This box' en 'another title'

Let op:

Div met rode achtergrond
Div met blauwe achtergrond en H-tags

Ons voorbeeld in Dash

HTML-voorbeeld namaken met 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'})
    ]

De layout ontleden

HTML-tags komen overeen met Dash html.()
- html.Div() = <div>
- html.H1() = <h1>
De laatste div heeft een children-argument
- Een lijst met objecten erin
We kunnen ook dcc.Graph()-componenten erin zetten!

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

Grafieken in de 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)
]

Een gif van een horizontale staafgrafiek met totale omzet op de x-as per land op de y-as in een Chrome-browser. De landen hebben verschillende kleuren. De muis beweegt over de grafiek en daarna naar de URL-balk met het serveradres

Meer structuur toevoegen

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

Een gif van dezelfde app als in de vorige oefening, maar de staafgrafiek is omlaag geduwd en erboven staat een klein lichtblauw vak

Laten we oefenen!

Dashboards bouwen met Dash en Plotly