Skip to content

#197: Creating Interactive Dashboards With Dash

Wit Plotly we can already create interactive plots and find the data points we are interested in. Would it not be great if we could add some more interactivity and combine multiple plots to a dashboard? Luckily for us, we can do exactly that with Dash.

Installation

Dash is written by the same people who created Plotly and allows us to create a dashboard application on top of Flask. You can install Dash with this command:

1
pip install dash

Dash comes in an open-source edition and as a commercial tool. For my posts I will only cover the open-source edition.

Our first Dash application

We reuse our knowledge for Plotly and take the tips data set for our first interactive dashboard:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

# Use the tips data set
df = px.data.tips()

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children='Tips App', style={'textAlign':'center'}),
    dcc.Dropdown(df.day.unique(), 'Sun', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])


@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)


def update_graph(value):
    dff = df[df.day==value]
    return px.scatter(dff, x='total_bill', y='tip', color='smoker')


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

This reads the data set, creates a minimalistic Flask app with a title label, a dropdown list for the day, and a placeholder for our plot. The callback brings us the interactivity and when we change a value in the dropdown list, the plot is refreshed automatically.

We can run this little application in the command line with this command:

1
2
3
4
5
6
python basic.py

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app 'basic'
 * Debug mode: on

If you open the web browser, you should see this minimalistic application:

Our first dashboard with the tips data set and a dropdown list to select the day.

Our visualisation is a full-featured Plotly interactive plot, where we can zoom in, hover over data points, and save it to disk.

Main components of Dash

In Dash we need these three main components to create an interactive dashboard:

  • Layout: The html.* methods allow us to control the appearance of our application. Instead of writhing the HTML tags directly, we use them through the html.* methods. You can find the full list of supported tags in the documentation.
  • Core components: The dcc.* methods are there for the placement of graphs and interactive widgets. The full list of components contains the plot area we used above, buttons, date pickers, confirmation dialogs, and nearly everything that allows you to interact with a web site.
  • Callbacks: The @app.callback() decorator is where we combine the interactive controls with our own methods and enforce the updates of the plots. We can bind Input() to Output() and filter the data on the go.

Fast development loops

Since Dash is built on top of Flask, we can profit from the auto-reload feature of Flask. If we run our Dash application from the command line, everything we need is already in place through the debug=True parameter in app.run(). We can make a change in our Dash application file, save it and Flask automatically reloads the application in the browser.

For IDEs like Visual Studio Code, we need to change the configuration, as I described it in my older post Python Friday #33: Activate Auto-Reload for Flask in VS Code.

Next

The great benefit of Dash is that we can reuse all our knowledge of Plotly. We created a small but interactive Dash application to work with the tips data set.

Next week we extend this small app into one with multiple plots that we can update based on our selections.