Basic Ploty Dash App with Scheduled Data Update— Part 3
So what did we do in part 2?
- We created a backend service
- The service can initially build our data file
- The service can provide ongoing updates on a schedule
In this part we are going to build out the Plotly Dash app that consumes the data file created in part 2. This will be a super simple app used to show how quickly you can spin up something usable in plotly.
Plotly Framework
Plotly Dash for python has been around for sometime now and is popular for a myriad of good reasons. It’s used quite frequently in data analytics and machine learning to build dynamic dashboards. It’s a framework that sits on top of Flask and React and provides a developer-friendly structure for quickly developing top-notch reactive UIs and visualizations.
In ./app/app.py we are going to start writing our app. In this section we will break down what we are importing and the basics of how Plotly Dash works.
The dash imports are as follows:
- dash — the core library for plotly dash
- dash_html_components — html tags and css, all using python
- dash_core_components — components for building out a rich UI (plots, date pickers, dropdowns, search box and so on)
- dash_bootstrap_components — basically bootstrap that ties into the plotly framework
Aside from these we have pandas, os and datetime.
The basic way Plotly Dash works is the following
- Create an app by instantiating the Dash object from the dash library
- Develop your UI using core components, html components, and optionally the bootstrap components
- Combine these UI elements into a layout, which is a property of the app creating in step 1.
- Create callback functions to manage the dynamic and interactive features of your app. For example, if someone selects a value from a dropdown, it should trigger a callback function to return some change in an element in your UI layout.
Setup
Let’s continue to write out our app in app.py. In this part of the code we are instantiating our app and defining some functions and variables for global use.
We first set the timezone to central to match our backend service. The reason will become apparent in the callback function. Next we define a couple of functions. The function get_data retrieves the data as a pandas dataframe and sets the date column to datetime. The get_last_date function just returns the max date.
Next we instantiate the app and do so with a bootstrap theme. Then we get the data for the app by calling get_data and we set a variable last_date by calling get_last_date. We have also defined some colors that will be used later in setting up the plot.
Components
As we continue in app.py, we now setup the components that will go into the UI. We have 3 parts here — header(title and dropdown), a section where we link to the data source, and then the plot.
The title variable is where we use start utilizing dash_html_components where we set an h3 and apply inline styling.
Next, the dropdown variable is using a combination of dash_html_components and dash_core_components. Inside the div element we have an h5 element that is the label for the dropdown component, which comes from dash_core_components. The dropdown component is setup with 4 options. We also apply some inline styling for the component, utilizing the colors dict.
The header variable uses dash_bootstrap_components to align the title and the dropdown. This structure would look very familiar to you if you’ve ever used Bootstrap before.
We have the info variable that is a section that references the John Hopkins repo. And lastly we have the placeholder for the plot, which is a div with an id called plot.
The key takeaway here is that we are utilizing dash to write html and css using a very friendly python syntax. Additionally, dash_core_components provides us with pre-built useful components such as a dropdown as we see in the code above.
Layout
Next up in app.py is an important property of our app called layout. It is here we we combine our components into its final structure.
Callback
Perhaps the most interesting part we will write in app.py is our callback function. The purpose of this function is to sense a change in the dropdown (selecting a new value) and then create a plot and return it to the plot div (id=plot) we had set up in the components and layout section.
Firstly, we use a decorator provided by dash where we state the output. In this case the output is the plot id. Next we create a list of inputs used to trigger the callback. We only have one, which is the dropdown defined by id covid-dropdown.
The first part in the body of the function defines the global variables data and last_date. If last_date goes back 2 days and its after 3am central, then we look to refresh the data in the app to be most up to date.
Next up is the plot which is the fig variable. The plot uses the Graph object in the dash_core_components library. There is a data portion of this Graph object which defines information about the actual data to be represented. And then there is the layout section where we can apply some customization. Notice we are using the colors dictionary from the top of the script.
There are two dynamic parts of this code. First is the definition of the data on the y axis. The dropdown input determines the column that will be chosen in the dataframe. Second is the title of the plot which uses the input value. For more information on the Graph object please visit https://dash.plotly.com/dash-core-components/graph.
Running the app
Finally, we can run the app as we did in part 1.
In this project we can go ahead and run the app using docker compose.
docker-compose up --buildIn the browser
If we go visit the app at port 5252 we can see it looks like the below. We have basic tooltips out of the box as well as an array of tools at the upper right hand corner of the plot such as download, zoom and so on.
Conclusion
This three part blog didn’t have a sole focus on Plotly Dash but instead took an overall look at how we can use Docker, python and a framework like Plotly Dash to write a simple app, with nightly updated data, very rapidly.
I’ve found that the larger the app gets the more cumbersome it becomes to work in this framework. At that point something like React itself could be a better option. But even for some mildly complex apps, Plotly Dash is worth learning. And as for Docker, it is becoming a necessity.
As a summary, here are the parts of this blog:
