Creating a Stunning Interactive Dashboard with Plotly Express and Dash
By: Eugenia Anello
Tags: Plotly Express, Data Visualization, Programming, Dash, Data Science

1. Requirements

You need to install pandas , plotly and dash before starting this tutorial with the command pip install <package-name> .

, and before starting this tutorial with the command . Create a file.py with all the code. I also tried to use the Jupiter notebook, but it didn’t seem to work. But since the dash tutorial on the official website suggested the format .py, I preferred to keep it.

2. Libraries and dataset

After the required installations are done, we can import the following libraries:

The library dash contains python classes with all components of the web application, such as dash_html_components and dash_core_components .

dash_html_components provides components for HTML tags, while dash_core_components components for HTML tags generated with JavaScript, HTML, and CSS through the React.js library.

We also import the Plotly express and pandas libraries.

Later, we import the famous Iris dataset, like in the tutorial I wrote about Plotly Express. My purpose is to group the plot obtained before into a unique page using Dash.

3. Initialize app

As you can deduce from the title of the paragraph, we start to build the app through initialization.

In other words, the application uses a custom CSS stylesheet (https://codepen.io/chriddyp/pen/bWLwgP.css) to modify the default styles of the elements.

5. Web app with one plot

Let’s begin showing the code to produce a web page with only two sentences, without any plot. We specify the layout that we want in our application:

This output should be returned when you run the code. When it appears, you should copy http://127.0.0.1:8050/ in your web browser and you’ll see something like this:

You can observe that the line of code html.H1(children=''Dashboard of Iris dataset'') is like to write <h1>Dashboard of Iris dataset</h1> in HTML, where the tag <h1> is typically used for the headings.

The same thing for html.Div(children=''Dash: A web application framework for Python'') that corresponds to <div>Dashboard of Iris dataset</div> in HTML.

If we want to add the plot to the app, we should add the component dcc.Graph .Before defining the layout, we first create a scatterplot using the Plotly express library. After we pass the figure into dcc.Graph

Above you have the dashboard you should obtain after modifying the code.

6. Three plots on the page

In the previous paragraph, I showed only one plot on the page to start from the simplest case. But as you know, the dashboard is typically used to contain more than one plot. For this reason, let’s put three graphs on the page, a plot for each line.

Now, it’s possible to observe the three plots on a unique page! But at the same time, each plot takes a lot of place within the application. Wouldn’t it be better to have two plots for a row?

7. Two plots in the same line within the page

Now, I want to show two plots side by side. It’s possible by defining two blocks with <div> tag. In each block, we specify the class name, “six columns”, which is the width, not the number of plots to display. The class name of the row, which contains the two graphs, is “row”.

We can also add two additional plots in the same way:

In the way, we have two rows and two columns, where each row will contain two plots.

7. Display plot with Callback

In the previous paragraphs, I showed how to use app.layout , which provides the hierarchical structure of the app, and the examples were mostly static. Now, the goal is to build a dynamic app, where you can change the x variable and the y-variable of a plot. This is possible with the callback functions, that allows changing the input component’s property. Let’s start the example:

In this example, we can the function update_graph when the input variables are changed of the Input properties. The @app.callback decorator describes the inputs and the output of the application’s interface. We have as input the “value” property of the components with ids ‘x-axis column’ and ‘y-axis column’, while the output is the ‘figure’ property of the graph.

8. Summary:

I made a summary to see fastly the apps we created in the previous paragraphs:

Example 1: One plot

Example 2: Three plots within the web page

Example 3: two plots side by side

Example 4: Display plot with Callback

Final thoughts:

Nice results, don’t you think? I only the most simple examples focusing only on the layout, but other advanced properties can be added. There are many examples in the dash tutorial on the official website. I hope that this guide helped you to understand how to apply dash and Plotly express to create a dashboard. At first, it can seem hard, but after some trials, it’s really intuitive. Thanks for reading. Have a nice day!