From Plotly to Dash

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

A first Dash App

A complete Dash app:

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

Python functionality possible
- e.g., String interpolation print("f{my_variable}")

The main Dash imports

from dash import Dash, dcc

Dash initializes the app
dcc has UI components like graphs and inputs
- One component in our app
- More components throughout the course

The app layout

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Create an app object using Dash()
Set the app.layout
- Using dcc.Graph()
  - figure = The Plotly figure to render
  - id = Important for callbacks later

Running the app

if __name__ == '__main__':
    app.run(debug=True)

Script is run from command-line
- i.e., python my_app.py in the command-line
debug for feedback when testing

Our app

Access via a web browser such as Google Chrome
While served, update and save .py file to see live updates in browser

A screenshot of what is seen in a terminal once a dash app is run. There is white text on a black background showing the details mentioned in the script.

Our app in the browser

A gif of a horizontal bar chart of total sales on the x-axis by country on the y-axis. This is the same graph as in the previous lesson; however, it is in a Chrome web browser, and a server address can be seen in the URL bar. The mouse hovers over the graph and clicks into the URL bar to demonstrate the server is present.

Dash in DataCamp

Some differences to other DataCamp exercises:
- Setup lines at the top of the exercises.
- All executed at once (not line-by-line)
- (Much) longer code
Fully-functional dashboards (expand the window to see!)

A screenshot of the top of a dash coding exercise that has been run, highlighting the button used to expand the HTML output so the app can be viewed in full screen.

Let's practice!

Building Dashboards with Dash and Plotly