You’ve polished up some data, trained a model for endless epochs and finally have a nice pipeline capable of decent predictions. It seems like everything in life makes sense and all pieces of the puzzle fit together seamlessly. Yet still — somehow — something is missing.
Sure the puzzle looks nice, all pieces are there and the landscape it depicts looks fabulous, but how will people get to see it?
How are you — an absolute pro at machine learning — supposed to present your results to those who are absolute pros in other domains? The stakeholders who know all about the business problem and need a simple, intuitive and most importantly, an interactive solution.
If you’re anything like me, then the last part of the project can seem daunting. How are you supposed to build an interactive webpage with no web dev experience?
These idle fingers haven’t touched a lick of HTML, let alone Javascript or CSS styling. Dash is a Python library, brought to you by the people behind Plotly, that takes care of all the web wizardry behind the scenes for you.
Dash lets you focus on what you are best at — working with data in Python — while it generates all the tricky front-end parts for you.That’s right, I know a sentence in Spanish. That’s about all the Spanish I know though. But seriously, why don’t we just use the incredibly simple and lightweight Streamlit library to build a quick POC for the stakeholders?
While Streamlit is an excellent library for quickly moving your data analyses to interactive webpages, it lacks the polished finish and customisability of Dash. Streamlit is great when a data pro communicates with other data pros in development, but often is not enough when communicating with business domain experts in production.
Dash has three important features that help it deliver a seamless front-end experience; Flask server integration, component layouts and function callbacks. All three combine together to deliver an interactive front-end that’s rendered in React.js and allows for full customisability through CSS styles.
Before we get into the details of these three features let me quickly mention that Dash is super simple to install. Just like any other Python library, you can pip install Dash in your (virtual) environment of choice. It will also install any and all dependencies it needs, such as Flask, for you.
Never mind adding the correct padding to HTML objects, what about all the fancy server-client communication that needs to be set up? Well Dash has that covered for you as well.
By packaging any and all content you build into serialised JSON objects, Dash can parse your app through simple HTML requests in Flask. This means two things; scaling your web app to users will most likely not be throttled by Dash, and your end-users will be accessing a lightweight and therefore fast-loading webpage.
In practice this is also fairly straightforward and should be familiar to anyone who has used Flask before (maybe from the pre-FastAPI days).
Right now our app doesn’t contain any functionality, but at least it can already be run through the terminal. Just type in python app.py (or whatever you name your Python file) and you should see a blank webpage pop up on http://127.0.0.1:8050/.
You’ll notice that I set debug=True in the run_server method, this and many other options (like changing the host address and port) can be tweaked. See some documentation here.
So we have our basic app running, now all we need is to actually fill it up with content. Now I’m sure you have plenty of cool visuals in mind — a basic analysis of your data or maybe an interactive graph of your model’s predictions — but we first need something to place these components in.
For this Dash has a layout property. It defines exactly which components should be placed on your webpage, with each part of the layout capable of being a different object. You could combine a nice title and bit of text (HTML’s <h1> and <p> for the nerds among us) with a line plot, all while remaining in Dash’s framework.
To do this I’ll import the dash_core_components or dcc, to generate figures and plots, and dash_html_components or simply html for some basic HTML functionality. These will be automatically added as dependencies during Dash’s installation process.
Notice how I also need to first define my data and actually generate a figure before I place it in my web app’s layout. In this case I’m using Plotly’s express package, as it integrates nicely with Dash to offer an interactive plot.
Head over to http://127.0.0.1:8050/ again and you should see an updated webpage! The underlying Flask package is always on the lookout for changes in your source code and updates the front-end accordingly.
Just because we have a nice plot doesn’t mean that our webpage is interactive. What we need is a way for the user to make changes in the data or the way that it is displayed. This can include data filters and transformations, different tabs to segment information and buttons to trigger events.
Let’s keep things simple this time — we’ll look into some more advanced apps in later blogs. How about a toggle for changing our y-axis from a linear to a log scale?
Dash works with a handy callback decorator, as a method of the app we declared earlier. In order to use this feature we will need to first add both the Input and Output modules to our imports. These will be used for, you guessed it, defining the input and output to be fed into and out of our functions.
Here we create an update_graph function to parse a user input and modify the figure we created earlier.
While it may seem confusing at first, inputs and outputs are fairly straightforward. Two important rules to keep in mind when writing callbacks is that they must contain at least one Input and one Output. This is because Input relates directly to the parameters you pass to your function, while Output tells Dash what to do with your function’s return value.
In our code we tell Dash to take the value parameter from our newly added yaxis_type component in the layout. You can see this as a variable that is always assigned to either being Linear or Log and that the end-user can change.
Meanwhile we tell Dash to take the figure that update_graph returns and throw it into our dcc.Graph component in the layout. We do this using the component’s id and its figure parameter.
Dash ‘listens’ to the value of our yaxis-type and as soon as it changes will trigger the update_graph function to run. This is what makes our webpage truly interactive.
This is what your final result should look like:
Now I know it doesn’t look like much right now, but we just touched on some important basics regarding Dash. Understanding how Dash works under the hood is a good first step.
We took a quick look at Dash, a powerful and elegant tool for communicating your hard work to stakeholders. Although we rushed through a basic app in this post, glossing over tons of details, keep an eye out on more in-depth posts in the future.
