Plotly graphs and

figures
B U I L D I N G D A S H B O A R D S W I T H D A S H A N D P L O T LY

Alex Scriven
Data Scientist
What is Dash?

A Python library for creating interactive, modern, functional web applications easily.

Advantages:

Free! Unlike Tableau and PowerBI etc.

Harness JavaScript with only Python

Less code than web application frameworks like Django

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Plotly and Dash

Plotly and Dash work together (same

company creator)

Dash: Interactive dashboards with multiple

Plotly graphs

See this example

Images, text and Plotly graphs

Check out the source code (search

go.scatter )

BUILDING DASHBOARDS WITH DASH AND PLOTLY

What is Plotly?

Revise Plotly, focus on Dash

A Python library for creating modern, interactive graphs

Wraps JavaScript but code in Python

plotly.express for graphs

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Our e-commerce data

Dataset of e-commerce sales

Details:
Item category (Major, Minor) + description

Unit price, quantity (+ OrderValue)

Country

Year-Month of sale

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Line charts with plotly.express

Monthly sales using our e-commerce data (

ecom_sales ).

import plotly.express as px
line_graph = px.line(
data_frame=ecom_sales,
x='Year-Month',
y='Total Sales ($)',
title='Total Sales by Month')
line_graph.show()

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Bar charts with plotly.express

Other plotly.express plots are created We get an interactive bar chart!

similarly

A bar chart of the total sales by country:

bar_fig = px.bar(
data_frame=ecom_sales,
x='Total Sales ($)',
y='Country',
title='Total Sales by Country',
orientation='h')
bar_fig.show()

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Customizing Plotly graphs

Plotly graph properties can be updated later Notice the larger gaps between bars?
with update_layout() (important for Dash
apps!).

Changing the bar width of our bar graph:

bar_fig.update_layout({'bargap': 0.5})
bar_fig.show()

Check out the Plotly documentation for

specific arguments for each plot.

BUILDING DASHBOARDS WITH DASH AND PLOTLY

 Let's practice!
B U I L D I N G D A S H B O A R D S W I T H D A S H A N D P L O T LY
 From Plotly to Dash
B U I L D I N G D A S H B O A R D S W I T H D A S H A N D P L O T LY

Alex Scriven
Data Scientist
A first Dash App

A complete Dash app:

import dash
from dash import dcc
app = dash.Dash()
app.layout = dcc.Graph(id='example-graph', figure=bar_fig)
if __name__ == '__main__':
app.run_server(debug=True)

Python functionality possible

e.g., String interpolation print("f{my_variable}")

BUILDING DASHBOARDS WITH DASH AND PLOTLY

The main Dash imports

import dash
from dash import dcc

dash is the main library that creates the app itself

dcc ('dash core components') contains the different building blocks to create the app
Two components in our app

More components throughout the course (e.g., user inputs!)

BUILDING DASHBOARDS WITH DASH AND PLOTLY

The app layout

app = dash.Dash()
Create an app object using dash.Dash()

app.layout = dcc.Graph( Set the app.layout

id='example-graph', Here, a single graph
figure=bar_fig)
Using dcc.Graph()
figure = The Plotly figure to render

id = Important for callbacks later

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Running the app

if __name__ == '__main__':
Lastly, running the server

app.run_server(debug=True) Script is run from command-line (not read

into a notebook)
i.e., python my_app.py in the command-
line

debug for helpful feedback when testing

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Our app

Script is run via the command-line ( python3 script.py ), served on a local server

Access via a web browser such as Google Chrome

While served, update and save .py file to see live updates in browser

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Our app in the browser

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Dash in DataCamp

Some differences to other DataCamp exercises:

All code inside the panel (Pre-exercise, dataset etc.)

All executed at once (not line-by-line)

(Much) longer code

dash.Dash(__name__) (The __name__ not needed locally)

Fully-functional dashboards (expand window to see!)

BUILDING DASHBOARDS WITH DASH AND PLOTLY

 Let's practice!
B U I L D I N G D A S H B O A R D S W I T H D A S H A N D P L O T LY
 Positioning Dash
components
B U I L D I N G D A S H B O A R D S W I T H D A S H A N D P L O T LY

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

BUILDING DASHBOARDS WITH DASH AND PLOTLY

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)

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Using Div and H tags

Some HTML code with: <div>

<div style="background-color: red;
Overall div (everything inside) width:250; height:250;">
</div>
Div inside: red background
<div style="background-color: lightblue;
Div with blue background width:250; height:250;">

H tags inside <h1>This box</h1>

<h2>Another Title</h2>
Ignore the style part - more on 'CSS' later! </div>
</div>

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Our example displayed

Our example Take note:

Red background div

Blue background div with H tags

The div tag can nest; lots of possibilities when

structuring our web app.

BUILDING DASHBOARDS WITH DASH AND PLOTLY

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

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Breaking down the layout

HTML tags align to Dash html.() import dash

html.Div() = <div> from dash import html
app.layout = html.Div(
html.H1() = <h1>
children=[

The overall div and the last div have a html.Div(

style={'background-color':'red',
children argument
'height':250, 'width':250}),
A list of components go inside
html.Div(

Second Div doesn't have this (single sub- children=[

html.H1("This box"),
element)
html.H2("Another Title")]
We can put dcc.Graph() components ,style={'background-color':'lightblue',

inside too! 'height':250, 'width':250})

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Graphs in the layout
Graphs can be added inside the children Produces:
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)])

BUILDING DASHBOARDS WITH DASH AND PLOTLY

Adding more structure
Let's add another html.Div() . What Our new dashboard:
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)])

BUILDING DASHBOARDS WITH DASH AND PLOTLY

 Let's practice!
B U I L D I N G D A S H B O A R D S W I T H D A S H A N D P L O T LY