Create Dashboards in Python for Data Science Projects | Towards Data Science

I don’t have to convince you why we need an interactive dashboard. But what most people don’t know is that they don’t have to buy expensive licenses of Tableau or PowerBI. You don’t have to enroll in a JavaScript course either.
Dash apps allow you to build interactive dashboards purely in Python. Interestingly, it could reach heights that popular BI platforms can not. Also, you can host it on your servers and your terms.
BI Platforms such as Tableau and PowerBI do a fantastic job. It allows even non-technical managers to do data exploration themselves. I don’t have complaints about them.
They are excellent tools to perform analysis on read-only datasets. But in large data science project, you’ll have to perform complex actions. For instance, you have to trigger a backend function and start the model retraining.
In such cases, my best solution was to build a web app from scratch. JavaScript data visualization libraries such as HighCharts are excellent tools for this. They have callbacks for almost every possible user action. I use them to send data back to the server and control it better.
But this wasn’t a walk in the park. My data science team is exceptional in Python and R but not in JavaScript. Not on web frameworks such as Django either. And that’s not enough; to build modern web apps, you need frontend web frameworks such as React.
As we progressed, we realized the harsh truth. Every new technology in our stack inflates the difficulty exponentially.
And we were fortunate to find Dash.
If you’re looking for a lightweight alternative, check out Streamlit. Read along if you need a flexible, complete Python dashboarding solution.
Now, this is how I create dazzling dashboards in Python.
Yes, building dashboards in Dash is that simple. Install Pandas and dash with the following command, then start the timer.
pip install dash pandas
In your project directory, create a file called app.py with the below content.
Showtime! let’s run the dashboard with the following command:
python app.py
You’ll see it starting a server at port 8050. If you visit http://127.0.0.1:8050 on your browser, you’d see the dashboard that looks like the following:
If you’ve created a similar app using JavaScript libraries, you’d appreciate the difference. Dash saves a ton of time by eliminating an incredible amount of boilerplate code. Even popular BI tools have lots of prework to get to this point.
Awesome. That’s quite a thing for inspiring you to build dashboards. But you might have realized that it’s not dazzling yet. In the following sections, we’ll discuss how
we can improve the layout;
add interactions and callbacks to the widgets, and;
style the app further.
With this, you can create the dazzling dashboard you need. Browse the Plottly Dash gallery for more of such dashboards for inspiration.
Dash follows an HTML-like element hierarchy. You can attach any of Dash’s HTML components or Core components to the layout property of the app. The layout property is the root of a Dash app’s element hierarchy.
Core components are a pre-configured set of widgets such as dropdowns and sliders.
Dash’s HTML components cover almost every HTML element available. To create a heading, you can use html.H1 and html.Pto create a paragraph. The children attribute allows you to nest one HTML component within another.
In the above code, we’ve included three core components — two dropdowns and a slider. These controller elements allow us to filter the chart data and create interactivity in the next section.
Dash’s core components have callbacks to control the response for a user action. This feature is remarkable of why Dash apps outshine popular BI platforms.
You can use this call back to control a chart re-rendering or to trigger a heavy analysis too. Check out my article on performing massive computation to use Dash apps along with Celery.
Here in this post, we use callbacks to filter the chart data.
The callback function is annotated with the @app.callback decorator. The first argument of this decorator is the Output component in the element tree. We need to specify the id of that element and the property we need to change. This property will change to the return value of the callback function.
Then the decorated will accept any number of input arguments. Each will be tied to a core component in the same way we attached the output component. We can specify the id of the element and the property that emits the change value. Usually, this would be ‘value.’
Each input in the decorator should have a respective argument in the callback function’s definition.
Finally, we moved the figure component inside the callback function. Every time we run the callback function, it creates a new figure instance and updates the UI.
You can use the inline styling options available in Dash app. But with little CSS, you could have spectacular results.
In-dash, you can style elements in three different ways.
Every Dash component accepts a style argument. You can pass a dictionary and style any element. This is the most convenient way to style a Dash app.
Alternatively, you can pass a class name attribute to any Dash component and use a separate CSS file to style it. You should place this CSS file inside an asset folder in your project directory. Dash will automatically pick it and apply its styles to the components.
You can also use stylesheets from the internet. For instance, dash has this preconfigured stylesheet that comes with convenient utility classes. You can specify the style sheet and use its class names in elements to make them beautiful.
Here is the complete styled source code of the application. We’ve used a local stylesheet and organized the HTML in a way to support styling. You can find the complete code and the local stylesheet in this GitHub repository.
Your web app refreshes as you update your code with the above. And it may look like the below — your first version of a dazzling dashboard.
plotly, Dash apps are an incredible tool for Python developers. Since most data science teams are not specializing in JavaScript, building dashboards with Dash saves a ton of their time.
We can use Tableau, PowerBI, and similar BI platforms for data exploration and visualization. But Dash apps outshine them as they tightly integrate with the backend code.
In this article, we explored the surface of Dash apps. I trust this would’ve given you the kickstart to build outstanding dashboards without worrying about scary technology stacks.
As a next step, I strongly recommend exploring Dash’s documentation page and their example gallery.
Thanks for the read, friend. It seems you and I have lots of common interests. Do check out my personal blog too.
Say Hi to me on LinkedIn, Twitter, and Medium. I’ll break the ice for you.
Not a Medium member yet? Please use this link to become a member because, at no extra cost for you, I earn a small commission for referring you.