Positioning Dash components

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

HTML and the web

HTML: language for structuring websites

HTML: wooden structure of a house
- Set placement of objects
CSS: paint color of a room
- Style (e.g., background color) of objects
JavaScript: Smart home clap-on lights!
- Interactivity e.g., clickable actions

the official html logo. it says HTML in blue writing

the official css logo. it says css in blue embossed writing

the official javascript logo. It is a yellow square with the black text JS in the bottom right corner.

Div and H tags

Dash uses dash html components (dash.html) to interface between HTML and Python.

Two important HTML structures ('tags'):

Div tags: important for structuring websites
- Can have many different-sized divs with different things inside
H tags: different sized titles (H1 > H6)

Using Div and H tags

Some HTML code with:

Overall div (everything inside)
Div inside: red background
Div with blue background
- H tags inside
Ignore the style part - more on 'CSS' later!

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

Our example displayed

Our example

An image of a blue box with a dotted border. Inside, taking up a portion the top-left corner, is a filled-in red box. Below this is a filled-in blue box with the words 'This box' and 'another title' inside

Take note:

Red background div
Blue background div with H tags

The div tag can nest; lots of possibilities when structuring our web app.

Our example in Dash

Recreating HTML example with Dash

import dash
from dash import dcc, html
app = dash.Dash()
app.layout = html.Div(children=[
    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'})
    ])

Breaking down the layout

HTML tags align to Dash html.()
- html.Div() = <div>
- html.H1() = <h1>
The overall div and the last div have a children argument
- A list of components go inside
- Second Div doesn't have this (single sub-element)
We can put dcc.Graph() components inside too!

import dash
from dash import html
app.layout = html.Div(
  children=[
  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})

Graphs in the layout

Graphs can be added inside the children list of a html.Div()

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.Dash()

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

Produces:

A gif of a horizontal bar chart of total sales on the x-axis by country on the y-axis in a chrome web browser. The countries have different colors. The mouse hovers over the graph and then into the URL bar which has the server address

Adding more structure

Let's add another html.Div(). What happens?

app.layout = html.Div(
  children=[
  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)])

Our new dashboard:

A gif of the same app as in the previous exercise, however, the bar chart has been pushed down the page, and a small light blue box is above

Let's practice!

Building Dashboards with Dash and Plotly