The world’s leading publication for data science, AI, and ML professionals.

A Dive into Dash

A Python Web Framework For Creating Dashboards

Photo by Stephen Dawson on Unsplash
Photo by Stephen Dawson on Unsplash

Around my office job, there are have been several discussions about the inclusion of dashboards. Typically, we used them to represent data to our business users, but with the new system, it was pushed to the back burner. With dashboards on my mind, I wondered what Python had, not for work but personal use. After a quick google search, I found a web framework called "Dash". So let’s look into what Dash is, get it installed, then run through a brief tutorial, or trial run, of how to use it.

What Is Dash?

Dash is a Python open-source web framework used to build graphical representations of data. This data is displayed in a browser, which may then be shared via URL. It was first released in 2017. Dash is based on Flask for the webserver functionality, but may also be built with React.js to create a more interactive web page, and plotly.js to use more chart options.

Dash is used for data science, and, more specifically, the study of data. While you could arguably use something like PowerPoint or Libre Office Impress, Dash allows you to create graphs based on data through pure Python. Dash also does not require extensive knowledge in web development, as its Flask implementation is beginner-friendly and could be studied with no background experience.

There are a variety of options with Dash when creating graphs, such as a simple bar graph or a pie chart, but additional features may also be included. One such feature is using a drop-down menu or a range to provide more custom data. While analyzing your graph, you can display multiple on-screen, which would allow you to view data in different formats.

For our introduction to Dash, we won’t get too fancy with the options. We will simply create two basic graphs and only utilize Dash. This means we won’t need Plotly for our needs yet. This also means we won’t need to install anything more than basic Dash. So now that we’ve learned a little more about Dash, let’s jump right into the installation.

Installing Dash

Installing Dash is fairly simple. We will only need one command to get it to run. Make sure if you haven’t recently, update your version of pip.

sudo pip3 install dash

For me, that was all I needed to install. In a tutorial, I found that you may also need to install the following:

sudo pip3 install dash-html-components
sudo pip3 install dash-core-components

The extra packages there should have installed during your first installation of Dash. When I ran the extra installs, I received "requirement met" messages back from the attempt. Still, it’s better safe than sorry to include those, just in case something didn’t install properly or if any versions were out of date.

Creating Simple Graphs Using Dash

Now that we’re ready to begin coding, I first created a file called graph_app.py. For our first lines, we will need to include our imports. For the HTML components and core components, an alias is used for easier referencing later on.

import dash
import dash_core_components as dcc
import dash_html_components as html

Next, we will create the application using Dash. This can be done simply by using the following line:

app = dash.Dash()

Our next code will focus on creating the actual graphs. For the data, I entered data instead of reading from a file for now. This is mainly for learning purposes. To create a Dashboard, we interact with the web page using a Div, which contains the graphs.

First, we create an H1 header to create a basic name on our page. You can use any descriptor you would like.

Next, we will create our first graph, which will be a bar graph. Inside this graph, we will first declare the ID. Next, we will declare the figure portion. This portion will contain our data. In the data, we will also declare our graph type, which is "bar". To declare our graphs, we use dash core components.

After, we will create our second graph, which will be a line graph. For this graph, we will need to contain the data within a dictionary. That data itself will be in another dictionary for our values. We will then also declare the size of the graph. Finally, we will declare the id for the graph. When this is finished, we can close out the Div.

Finally, we will start our app in the Flask portion of our code. While we set the app to run the server, I also declared the host location, as the default was not accessible on my machine due to running the code across a server. If you are running locally, you may not need to declare the host.

if __name__ == '__main__':
     app.run_server(debug=True, host="your_host_address")

Now, all we have to do is run the code.

App running locally.
App running locally.

Finally, we simply navigate to the web page.

Conclusion

Dash is a Python Web Framework used to visualize data on a web page. It utilizes Flask to create a web server, making it easy for a page to be created with little front-end experience. Graphs can be created using this library to study and analyze data. It is similar to graphs from PowerPoint or Libre Office Impress but written in pure Python.

Dash was very simple to start, and understanding the components involved, such as where to enter the values, or where to set the graph type, was fairly straightforward and beginner-friendly. Maybe the next time you need to create a graph, you may consider using Python to visualize your data. I think Dash could be a very useful tool and was interesting to learn. Although we only stuck to the basics, there are a variety of other options that Dash offers. The project could expand from where we left it, so I think Dash may be a tool I will use again in the future. I only regret now having learned a little Dash while still in my College days. It could have been a lot more fun to utilize Python than using Excel to finish homework. Hopefully, you have found Dash just as interesting. Let me know what you think, and feel free to comment on what graphs you’ve built using Dash. Until next time, cheers!

Read all my articles for free with my weekly newsletter, thanks!

Want to read all articles on Medium? Become a Medium member today!


Check out my recent articles:

Getting the Weather With Python

MySQL vs PostgreSQL

GraphQL vs. REST

Build Your Own Plex Client Using Python

MySQL vs. SQLite

References:

Introduction | Dash for Python Documentation | Plotly

Part 2. Layout | Dash for Python Documentation | Plotly

dash

Dash Core Components

Develop Data Visualization Interfaces in Python With Dash – Real Python


Related Articles