Show your visualizations in a web-based layout using Plotly Dash
A few years back, Data Scientists/Analysts used to do the data analysis in python and if it became a periodic (weekly, monthly, etc) requirement, the team used to jump to Tableau or any other dashboarding tool out there to create an auto-refresh dashboard but now you can do all of this in python.
Comes the Plotly Dash!
In this blog, you will learn how to create the layout of a dashboard using the Plotly library. For illustration purposes, I will use google trends API for fetching the data and creating the dashboard.
Want to learn plotly Dash ? Read the following article to get a basic understanding of plotly Dash. Get an in-depth understanding by either following the official documentation or check out my course on Udemy where you will learn how to create full fledged interactive dashboard. Use the following link to get upto 70% off: https://bit.ly/311k37f
Let’s start by installing the dash, plotly, and pytrends packages. Using the pytrends package we can access google trends API.
Now, let’s import the required packages :
Get the dataset!
Now, let’s see how we can read the google trends data set and create the dataframes for graphs. The first one is the trend_df dataframe that contains the interest in Netflix over the weeks based on google searches. The 2nd dataframe, int_by_reg, contains the interest in Netflix by countries.
The dataset contains the information around the Interest in Neflix over the weeks based on the google searches. The interest values are scaled between 0–100.
Understand the Layout
Now, let’s have a look at how we can create web-based layouts using Plotly Dash. There are 2 different ways of creating the layouts in plotly dash :
- HTML components
- Bootstrap components
In this blog, we will focus on creating layouts using Bootstrap components because it is very intuitive and easy to follow. Let’s understand the intuition behind the bootstrap component :
Bootstrap considers our web pages as a grid system (rows and columns). The page is divided into 12 equally separated columns (or verticle lines). We can create our layouts by setting the graphs or other elements within these columns. For example, as shown in the illustration below, Graph 1 covers the first 6 columns, and Graphs 2 covers the next 6 columns in the 1st row while Graph 3 and 4 covers the 12 columns (6 each) of the next row. We can add one or more graphs/elements in a row.
I hope you get an idea of the fundamentals of the layouts using the Dash bootstrap component, now let’s do it practically by following the 3 steps process :
Step 1: Create the chart that you want to showcase.
Step 2: Create the body of the dashboard where you can integrate the charts.
Step 3: Set the layout of the app with the body of the dashboard.
Two charts in 1st row!
In this section, you will learn how to show two charts in the same row. We will follow the 3 step process highlighted above.
In step 1, we are creating a line chart showcasing the interest in Netflix over the weeks and a bar chart showing the interest in Netflix by country.
In step 2 (code below), we are creating the body using the container (dbc.container), which is a wrapper within which we set the rows and columns of the body of the app. First, we create the row component(dbc.row) within which we set two column components (dbc.col). Inside the column components, we are setting the graph component(dbc.graph) for showing our graphs. The graph component has 2 arguments :
- id: A unique identifier of the component. Two components cannot have the same id. You can set the id to any name
- figure: This is set to the figure object of the plotly chart. We are setting it to our function trend() in the 1st column, which is returning the plotly graph object.
After setting the graph component, in line 13(above code), we are setting some arguments of the column component to define the height and width of the column. Here, we are setting the style argument as a dictionary with height as key and pixels as value (450 px). The remaining arguments set the column width for different screen sizes : sx (extra small), sm (small), md (medium), lg(large), xl(extra large). We are setting the width to 12 for small size screens (phones) and 6 for relatively large size screens (laptops, TV, etc).
In step 3 (above), we are setting the layout of the app using the Div html component. The Div component has a children argument which is set to the body of the app. After this, in lines 4 and 5, we are running our app using app.run_server(). We can see the dashboard below :
Adding 2 more charts in 2nd row!
Let’s start by creating the dataframes. Here, we are creating a dataframe df_related_topics having top topics related to Netflix as per google search. Another dataframe is df_related_queries containing data around top queries related to Netflix.
Now, let’s repeat our steps.
Step 1: Create the graphs. Both the functions below return the bar graphs showing the top topics or queries related to Netflix.
Step 2: Adding rows and columns of the app. Now, we will add one more row having 2 columns, one each for showing the bar graphs that we created above.
Step 3: This step will be the same as done above.
Bringing it together!
The following is the final code of our google trends dashboard that gets updated automatically upon refreshing the browser. I have also added a navigation bar using dbc.Navbar.
In the dashboard (below), you can see that the graphs cover 6 columns for the large screen and 12 columns for the small screen (when the window size is reduced).
So, we learned how we can quickly convert a repetitive analysis to a basic dashboard using Plotly dash. We used a 3 step process to create the dashboard and also learned about how to make the dashboard screen responsive.
If you like the power of plotly dash and want to learn more about how to create full-fledged interactive dashboards with python, then you can check out my course: https://bit.ly/311k37f
If you find this useful, you can follow me to get direct notification whenever I publish a story.