Plotly Dash: A beginner’s guide to building an analytics dashboard
By: Saurabh Kothari
Tags: Analytics, Dashboard, Data Visualization, Dash, Plotly

Hello World, Welcome to my first medium article! I believe you’re here because you want to create an aesthetic dashboard but don’t know where to start or don’t know what skills you require. Don’t worry, I have got you covered. This article will walk you through the journey one step at a time and I will try to keep it as simple as possible. Let’s get started!

Why bother?

We all have heard this infinite number of times — ‘Data is the new oil’. Well, it’s true, but what does it mean exactly? Data is everywhere. Businesses keep track of user’s activity such as their purchase habits, previously viewed products, location details, etc, and spend a lot of money to refine this data to get valuable insights. Data visualization helps decision-makers to make informed business decisions on the basis of this extracted information that was unseen before which results in increased customer retention and increased profits. Hence, this a very useful and in-demand skill.

What is Plotly Dash?

Dash is an open-source python framework used to build interactive data visualization web applications. It is developed by the plotly team and was released in mid-2017. It is built on top of Flask, Plotly.js, React.js. It is super easy to learn as Dash abstracts away all the hard parts.

Prerequisites

I would recommend you to create a virtual environment for this but it's optional. These are all the things you will require to create a Dash application :

Supports both Python 2 and Python 3 Pandas — Data manipulation and analysis python library

pip install pandas

3. Plotly — Interactive Data visualization python library

pip install plotly-express

4. Dash

pip install dash==1.18.1

That’s all you need.

(Note: starting with dash 0.37.0, dash automatically installs dash-renderer, dash-core-components, dash-html-components, and dash-table, using known-compatible versions of each. You need not and should not install these separately any longer, only the dash itself. — Dash Documentation)

Let’s get started...

Dash apps are composed of the following:

1.Data source / database connectivity

2. Dash Layout consisting of dash_core_components and dash_html_components

3. Interactivity via callbacks.

import dash

import pandas as pd

import plotly.express as px

import dash_core_components as dcc

import dash_html_components as html # Initialise the app

app = dash.Dash(__name__) # Connect to database or data source here #Define graphs here # Define the app Layout here

app.title = 'Analytics Dashboard'

app.layout = html.Div() # Define callbacks here # Run the app

if __name__ == '__main__':

app.run_server(debug=True)

“Dash includes ‘hot-reloading’, this features is activated by default when you run your app with app.run_server(debug=True) . This means that Dash will automatically refresh your browser when you make a change in your code.” — Dash Documentation

Data Source / Database connectivity

There are two ways to get data:

1. CSV file

df = pd.read_csv('dataset_name.csv')

2. Connecting to a SQL database

(if using this, you need to install Python MySQL connector)

# Database Credentials

ENDPOINT=”co9od6lav8.ap-south-1.r1ds.amazonaws.com” #replace

PORT=”3306"

USR=”admin”

REGION=”ap-south-1"

DBNAME=”mysql” # Database connection

try:

conn = mysql.connector.connect(host=ENDPOINT, user=USR, passwd=’sih2020’, port=PORT, database=DBNAME)

c = conn.cursor()

c.execute(‘SELECT * FROM table_name’)

query_results = c.fetchall()

#print(query_results)

except Exception as e:

print(“Database connection failed due to {}”.format(e)) df = pd.read_sql_query('SELECT * FROM table_name',conn)

Dash App Layout

This component describes how the front-end of the app will look like. The app won’t start if we don’t define the layout.

dash_html_components

This is the coolest thing about Dash. One only needs basic knowledge about HTML and CSS. The dash_html_components library provides HTML components that can be rendered via python.

The html.div(children='Hello Dash') component generates a <div>Hello Dash</div> HTML element in your application.The children property is always the first attribute but can be omitted. dash_core_components

The dash_core_components includes a set of higher-level components like drop-downs, graphs, markdown blocks, and more. Graph component uses plotly.js to render interactive data visualizations/graphs.

app.title = 'Analytics Dashboard'

app.layout = html.Div()

Dash Callbacks

Dash helps us to design dynamic UIs that are customizable through reactive and functional Python callbacks. In simple words, callbacks come into the picture when you want to render a graph that depends on user input via dropdown menus, radio buttons, sliders, etc. Callbacks link input components like dropdown menus with output components i.e graphs.

“Every element attribute of the declarative components can be updated through a callback and a subset of the attributes, like the value properties of the dcc.Dropdown , are editable by the user in the interface.” — Dash Documentation

Let’s create a dashboard using all the concepts I explained above…

OUTPUT:

Additional Resources:

https://www.kaggle.com/babyoda/women-entrepreneurship-and-labor-force

https://dash.plotly.com/

Conclusion

Plotly Dash is a great open-source python framework to create an analytics dashboard with good-looking visualizations at no cost. It is beginner-friendly as Dash abstracts away most of the time-consuming work. In this article, you have learned to create an analytics dashboard from scratch. Kudos! The next step will be to understand how callbacks work in Dash. All the best! Keep Learning.

Follow me: https://github.com/skothari07