In this tutorial, you’ll learn how to create Python interactive dashboards using plotly Dash, with an example.
Web-based dashboards are an efficient way to display and share information with others. But it often involves a complicated process that only expert web developers can achieve. As Python programmers in data science, how can we build an interactive web application with data visualizations?
Dash is the go-to library. It empowers us to build beautiful looking, interactive, and easy to share dashboards, all in Python.
Following this Python Dash tutorial, you’ll learn:
- What is Dash
- How to build the Dash app layout with data visualization
- How to add interactive features (callbacks)
- How to run and display the dashboard
So if you want to build your first interactive dashboard with Python Dash, this tutorial will walk you through an example step-by-step.
Let’s get started!
Editor’s Note: This tutorial is updated in April 2022 to include the new features in Dash 2.0.
Further learning: to learn more details and depth about Dash, please take our video course: Python Interactive Dashboards with Plotly Dash. It includes step-by-step explanations, more advanced functions, all with real-world dataset examples.
To follow this Python interactive dashboard in Dash tutorial, you need to know Python, including basic knowledge of
pandas. If you need help, please check out the below resources:
- Python basics: FREE Python crash course
pandas: Python for Data Analysis with projects course. This course teaches
pandas, which is necessary to transform the dataset into a dashboard, and much more!
What is Dash?
Dash is a free Python library built by the same company that created the
Each Dash app has two main parts:
- layout: determines what the Dash app looks like
- callback functions: the function that connects the Dash components and defines their interactive features
We’ll build both parts in this tutorial. Now let’s go through our example to make an interactive data visualization using Dash.
Step #1: Exploring the dataset
Before building the Dash app, we need to explore the dataset. We recommend doing this in JupyterLab/Notebook. Since it has an interactive interface, we can easily code and examine the outputs.
First, we’ll import two libraries (please install them if you haven’t):
pandas: for loading and manipulating datasets
plotly.express: for generating data visualizations
Dash is built on top of plotly, so it’s easy to put plotly figures into Dash apps. This is why we are using plotly, instead of other Python data visualization libraries
In this tutorial, we’ll use the Avocado Prices dataset to build our example dashboard. So let’s load it and take a look at its summary.
As you can see, the dataset contains information about avocados.
<class 'pandas.core.frame.DataFrame'> RangeIndex: 30021 entries, 0 to 30020 Data columns (total 13 columns): # Column Non-Null Count Dtype --- ------ -------------- ----- 0 date 30021 non-null object 1 average_price 30021 non-null float64 2 total_volume 30021 non-null float64 3 4046 30021 non-null float64 4 4225 30021 non-null float64 5 4770 30021 non-null float64 6 total_bags 30021 non-null float64 7 small_bags 30021 non-null float64 8 large_bags 30021 non-null float64 9 xlarge_bags 30021 non-null float64 10 type 30021 non-null object 11 year 30021 non-null int64 12 geography 30021 non-null object dtypes: float64(9), int64(1), object(3) memory usage: 3.0+ MB
Now suppose we want to present the average prices of different types of avocados for various geographies across time, i.e., we want to focus on presenting the information of the columns
Let’s explore these columns more. What are the different
geography of avocados? Let’s take a look at the categories using the
value_counts method. This will show us the unique categories for these variables.
From the results below, you can see that there are two categories of
type, and many different categories for
conventional 15012 organic 15009 Name: type, dtype: int64
Phoenix/Tucson 556 Northeast 556 Las Vegas 556 Sacramento 556 Tampa 556 Spokane 556 Southeast 556 New York 556 Raleigh/Greensboro 556 Syracuse 556 Plains 556 California 556 Orlando 556 Albany 556 Boise 556 Boston 556 Houston 556 West 556 Portland 556 Harrisburg/Scranton 556 Cincinnati/Dayton 556 Miami/Ft. Lauderdale 556 Dallas/Ft. Worth 556 Hartford/Springfield 556 Great Lakes 556 Louisville 556 Philadelphia 556 Pittsburgh 556 Baltimore/Washington 556 Roanoke 556 Jacksonville 556 Midsouth 556 Chicago 556 San Francisco 556 South Central 556 San Diego 556 Detroit 556 Grand Rapids 556 Nashville 556 Charlotte 556 Seattle 556 Los Angeles 556 Northern New England 556 Indianapolis 556 Buffalo/Rochester 556 Total U.S. 556 Richmond/Norfolk 556 New Orleans/Mobile 556 Denver 556 St. Louis 556 Atlanta 556 South Carolina 556 Columbus 556 West Tex/New Mexico 553 Name: geography, dtype: int64
Since there are only two avocados types, we can plot their
average_price time series on the same line chart. Let’s try creating such a figure when
geography is ‘Los Angeles’.
Further Learning: If you are not familiar with plotly, please look at our tutorial, Plotly Python Tutorial: How to create interactive graphs.
This is a nice chart, but it’s only for one
geography of ‘Los Angeles’.
How can we make it easy for users to explore this information from different
If we have a dropdown with
geography options, the users would be able to choose among them. Then according to the
geography selected by the users, we can display the above line plot to them for that specific
This is something we can do easily with Dash!
It’s time to use Dash.
Step #2: Setting up the Python environment
After exploring the dataset in Jupyter Notebook, we recommend using one of the Python editors to implement Dash apps. This is because when working on Dash apps, we want to focus on building and running the dashboards as a whole script. So it’s easier to test in Python editors such as PyCharm.
We’re using the PyCharm Editor – Community Edition. It’s free and has many useful features for writing Python code. However, if you still prefer Jupyter Notebook, you can try out the library jupyter-dash, which will not be covered in this tutorial.
It’s also necessary to use the
pip install dash command in your terminal to install Dash before using it.
Step #3: Preparing to build the Dash app
We can head over to the Python editor such as PyCharm to start writing the Dash app.
The code snippets below need to be combined and run as a single Python script. We are breaking them down into pieces so that it’s easier to explain. You can either type them into your Python file or copy and paste the complete version, which will be provided in the last step of this tutorial.
First, we need to import the libraries. The necessary ones for our dashboard are:
dash: the Dash library, which includes:
Dash: class Dash
html(Dash HTML Components module): for building the layout, which contains components for every HTML tag, such as the H1 heading
dcc(Dash Core Components module): for building the layout, which contains various higher-level components such as dropdown and graph
Output: for defining callback functions
pandas: loading and manipulating the data
plotly.express: creating figures
Then we can load the dataset as a
pandas DataFrame, which is the same as earlier. Please make sure you’ve saved this Python script and the dataset
avocado-updated-2020.csv in the same directory to avoid setting the path in the
We’ll also create a Dash app object called
app is what we’ll be focusing on for the rest of the tutorial.
Step #4: Building the layout of the dashboard
The app-building process always starts from the layout. So first, we need to design the look of the dashboard.
The layout has the structure of a tree of components. And we use the keyword
layout of the
app to specify its layout. Then, using the two modules:
dcc, we can display three components on our dashboard, from top to down:
- an H1 heading (
html.H1) as the dashboard’s title. We specify its children property to be the text ‘Avocado Prices Dashboard’
- a dropdown menu (
geo_dropdown, which is a
dcc.Dropdown) based on the
We’ve built it as a variable outside and then referenced it within the
options: this property specifies the options of unique geographies the dropdown has
value:this property is the selected geography when we first launch the app. We made it as ‘New York’
- a graph (
dcc.Graph) with id ‘price-graph’
Below is the code to set up the layout.
As you might have noticed, we are using an
html.Div component to hold our three Dash components. The
html.Div is a container component, which is always used when we have multiple Dash components in the layout. We put the other Dash components as a list inside its
After setting up the dashboard’s look, it’s time to add a callback function to make it interactive.
Step #5: Adding interactivity to the dashboard
The callback functions are Python functions. They get automatically called by Dash whenever their inputs change. As a result, the functions run and update their outputs.
The two main sections of the callback function are:
- decorator, which starts with
- function itself, which begins with
Below is the code of our callback function to make the plotly figure dependent on the dropdown.
Within the decorator
@app.callback, we specify the
Output and the
Input objects of the callback function. They are both the properties of Dash components.
In our example, the output is the
figure property of the Dash component with id = ‘price-graph’, which is the
dcc.Graph component set in the
layout. While the input is the
value property of the Dash component with the variable name
geo_dropdown, which is the
dcc.Dropdown component set in the
layout. So you’ve seen two ways of specifying components in the callback function:
- pass the ID to
- pass the variable name directly to
component_id, in which case Dash autogenerates IDs for the component
After specifying them, we use them within the function below. Within the parenthesis after the
def update_graph, we name the input as
selected_geography. This corresponds to the
Input(component_id=geo_dropdown, component_property='value'). Then within the body of the function, we ask the function to:
- generate a filtered dataset
- create a plotly line figure called
line_figbased on this filtered dataset
The function returns this
line_fig as the output, which corresponds to
Here is an example. When the user selects ‘Los Angeles’ in the dropdown component, its
value property will become ‘Los Angeles’, which means the input of the function
selected_geography='Los Angeles'. This change will trigger the callback function, and update the output, as the line figure is only for Los Angeles.
That’s all the work needed for the callback function!
We are ready to run the dashboard.
Step #6: Running the dashboard
By default, the Dash app runs on our local computers. To complete the script, we need to add code to run the server. We can add these two lines of code after the callback function.
And that’s it!
As mentioned earlier, we need to run all the code as a whole script. So if you haven’t, you can copy the complete script below and save it into your Python editor:
So we can name this Python script
avocado_example, and save it under the same directory as the dataset
avocado-updated-2020.csv. Then we can go to the terminal to run it by typing in the command
After running successfully, you should see the below messages in the terminal window.
Dash is running on http://127.0.0.1:8050/ * Serving Flask app "avocado_example" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on
Remember that Dash creates web applications? So this URL
http://127.0.0.1:8050/ is the default address to access the app. You can go to it and see your first Python interactive dashboard opening in the browser!
This is what it should look like:
If you haven’t got the chance to run your app, look here. We have deployed this app on Heroku so that you can interact with it as a user. Try to select different geographies within the dropdown and see the updated graph.
In this tutorial, you’ve successfully created your first Python interactive dashboard with plotly Dash!
Again, to learn about how to:
- set up more Dash components such as range slider, radio items, datatable
- customize the look of the dashboards
- create a grid layout dashboard
- more dynamic interactive features
Please take our video-format course: Python Interactive Dashboards with Plotly Dash. You’ll also get an overview of HTML and CSS within the course to better understand Dash.
Leave a comment for any questions you may have or anything else.