Build a web data dashboard in just minutes with Python | by JP Hwang | Towards Data Science

I don’t know about you, but I occasionally find it a little bit intimidating to have to code something. This is doubly so when I’m building something akin to web development rather than doing some local data analysis and visualisation. I’m a competent Python coder, but I wouldn’t call myself a web developer at all, even after having more than dabbled with Django and Flask.
Still, converting your data outputs to a web app leads to a few non-trivial improvements for your project.
It is just much easier to build in true, powerful interactivity into a web app. It also means that you can control exactly how the data is presented, as the web app can become the de facto report as well as the access point to your data. Lastly, and most importantly, you can exponentially scale the accessibility to your outputs; making them available anywhere, any time. There is always a web browser at a user’s fingertips.
So, I bit the bullet and started to do just this with some of my data projects recently, with surprisingly fast speed and efficiency. I converted one of my outputs from this article to a web app here in just a couple of hours.
I thought this was rather cool, and wanted to share how this came together in just a few lines of code.
As always, I include everything you need to replicate my steps (data & code), and the article is not really about basketball. So do not worry if you are unfamiliar with it, and let’s get going.
I include the code and data in my GitLab repo here (dash_simple_nba directory). So please feel free to play with it / improve upon it.
I assume you’re familiar with python. Even if you’re relatively new, this tutorial shouldn’t be too tricky, though.
You’ll need pandas, plotly and dash. Install each (in your virtual environment) with a simple pip install [PACKAGE_NAME].
For this tutorial, I am simply going to skip *most* of the steps taken to create the local version of our visualisation. If you’re interested in what is going on, take a look at this article:
towardsdatascience.com
We will have a recap session, though, so you can see what is happening between plotting the chart locally with Plotly, and how to port that to a web app with Plotly Dash.
I have pre-processed the data, and saved it as a CSV file. It is a collection of player data for the current NBA season (as of 26/Feb/2020), which shows:
What share of their team’s shots they are taking, and
How efficient / effective they are at doing it.
For this portion, follow along by opening local_plot.py in my repo.
Load the data with:
all_teams_df = pd.read_csv(‘srcdata/shot_dist_compiled_data_2019_20.csv’)
Inspect the data with all_teams_df.head(), and you should see:
Each player’s data has been compiled for each minute of the game (excluding overtime), with stats pl_acc and pl_pps being the only exception, as they have been compiled per quarter of the game (for each 12 minute period).
The dataframe contains all NBA players, so let’s break it down to a manageable size, by filtering for a team. For instance, the New Orleans Pelicans’ players can be chosen with:
all_teams_df[all_teams_df.group == 'NOP']
Then, our data can be visualised in Plotly, as below:
import plotly.express as pxfig = px.scatter(all_teams_df[all_teams_df.group == 'NOP'], x='min_mid', y='player', size='shots_freq', color='pl_pps')fig.show()
At the risk of doing this:
I do add a few small details to my chart, to produce this version of the same graph.
This is the code that I used to do it.
Now, while it’s a lot of formatting code, I thought it useful to show you how I did it, because we are going to be re-using these functions in our Dash version of the code.
Now, let’s get to the main event — how to create a web app out of these plots.
You can read more about Plotly Dash here, but for now all you need to know that it is an open-source software package developed to abstract away the difficulties in putting your visualisations on the web.
It works with Flask under the hood, and you can happily reuse most of the code that you used to develop plots in plotly.py.
This is the simple version that I put together:
Try it out! It should open this plot on your browser.
What’s the big deal? Well, for one — it is a live web app, in under 25 lines of code. And notice the drop-down menu on the top left? Try changing the values on it, and watch the graph change *magically*.
Go on, I’ll wait.
Okay? Done.
Let’s briefly go through the code.
At a high level, what I’m doing here is to:
Initialise a Dash app;
Get a list of available team names, and provide it to a dropdown menu (with DOM id group-select) with a default value or ‘TOR’;
Instantiate a Graph object as the shot-dist-graph identifier within Dash; and
Create a callback function where if any of the values are changed, it will call the update_graph function and pass the returned object to the Output.
If you take a look at the code, so many of what is probably trivial for web devs but annoying for me is abstracted away.
dcc.Graph wraps the figure object from plotly.py into my web app and HTML components like divs can be called and set up conveniently with html.Div objects.
Most gratifying for me personally is that Input objects and callbacks from those inputs are declaratively set up, and I can avoid having to deal with things like HTML forms or JavaScript.
And the resulting app still works beautifully. The graph is updated the moment that the pulldown menu is used to select another value.
And we did all that in fewer than 25 lines of code.
At this point, you might be asking — why Dash? We can do all this with a JS framework front end, and Flask, or any one of myriad other combinations.
To someone like me who prefers the comfort of Python than natively dealing with HTML and CSS, using Dash abstracts away a lot of stuff that doesn’t add a lot of value to the end product.
Take, for instance, a version of this app that includes further formatting and notes for the audience:
(It is simple_dash_w_format.py in the git repo)
Most of the changes are cosmetic, but I will note that here, I just write the body text in Markdown, and simply carry over my formatting functions from Plotly to be used in the formatting the graphs in Dash.
This saves me a tremendous amount of time between doing data analysis and visualisation to deployment to clients’ views.
All in all, from starting with my initial graph, I think it probably took less than an hour to deploy it to Heroku. Which is pretty amazing.
I will get into more advanced features of Dash, and actually doing some cool things with it functionality-wise, but I was very happy with this outcome in terms of ease and speed.
Try it out yourself — I think that you’d be very impressed. Next time, I plan to write about some really cool things you can do with Dash, and building truly interactive dashboards.
Edit: I’m starting a Substack for all things Data and Visualisation — it is going to be a way for me to engage directly with you. I would love for you to join me here.
visualnoise.substack.com
I also wrote a little about why I’m starting a Substack.
If you liked this, say 👋 / follow on twitter, or follow for updates. This is the article that the data viz is based on:
towardsdatascience.com
Also, here is another article I wrote about improving data-based storytelling through better visualisation of time series data: