Creating Interactive Dashboards using Plotly Dash

Dash is an open-source Python library used for building interactive web-based applications. It is a powerful tool that can be utilized for building reporting dashboards.

Why you should try it

1. It is free and open-source unlike other popular BI tools such as Tableau or Microsoft PowerBI.

2. If you handle your data in Python and are looking for a data visualization library.

3. It is written on top of Flask, Plotly.js and React.js, which allows you to easily deploy your Flask based web server on AWS or Azure. Plus, you can create customizable and reusable components.

4. It provides very cool and appealing plots and charts which are both cross-platform and mobile supported.

5. It requires only Python and some basic knowledge of HTML to start with. No Javascript/d3.js is required for building dashboards.

Installation

We need to install several packages as following -

1
2
3
4
5
pip install Flask
pip install dash
pip install plotly
pip install dash_html_components
pip install dash_core_components

Dashboard

Let’s start by discussing different components of Dash and then we’ll build our first dashboard.

Dash divides its components into two categories -

1. Dash HTML Components - This part helps us to create HTML elements inside our application. It supports a variety of HTML tags.

1
2
3
4
5
6
7
8
import dash_html_components as html

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('This is a paragraph.')
    ])
])

This Python structure will be converted into HTML elements.

2. Dash Core Components - This part gives interactive elements to our dashboard like dropdowns, sliders, datepickers, etc. Let’s see an example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import dash_core_components as dcc

dcc.Dropdown(
  options = [
    {
      'label': 'United States of America',
      'value': 'USA'
    },
    {
      'label': 'India',
      'value': 'IND'
    },
    {
      'label': 'Japan',
      'value': 'JPN'
    }
    ],
  value = 'IND'
)

Now let’s build a sample application. For the dashboard, we can read the data simply with pandas or create our own data.

1. First we need to import all dependencies.

1
2
3
4
5
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

2. We need to instantiate Dash object.

app = dash.Dash(__name__)

3. Let’s create some dummy data for our dashboard.

1
2
3
4
5
df = pd.DataFrame({
  "Indicator": ["Total Cases", "Recovered", "Total Cases", "Recovered"],
  "Cases": [19111326, 11219123, 10147468, 9717834],
  "Country": ["USA", "USA", "India", "India"]
})

4. Now let’s create a bar plot.

fig = px.bar(df, x="Indicator", y="Cases", color="Country", barmode="group")

5. To add this bar plot to our dashboard we will create a graph component and put this figure inside it.

1
2
3
4
dcc.Graph(
  id = 'example-graph-2',
  figure = fig
)

This graph component will come inside our app.layout. This layout contains a tree of components like html.Div and dcc.Graph. We can put nested HTML components inside our layout and create more complex ones. This is how our final codebase will look.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({
  "Indicator": ["Total Cases", "Recovered", "Total Cases", "Recovered"],
  "Cases": [19111326, 11219123, 10147468, 9717834],
  "Country": ["USA", "USA", "India", "India"]
})

fig = px.bar(df, x = "Indicator", y = "Cases", color = "Country", barmode = "group")

app.layout = html.Div(style = {
  'backgroundColor': '#111111'
}, children = [
    html.H1(
    children = 'Hello Dash',
    style = {
      'textAlign': 'center',
      'color': '#7FDBFF'
    }
  ),

    html.Div(children = 'Dash: Python based web framework for interactive data visualization.', style = {
    'textAlign': 'center',
    'color': '#7FDBFF'
  }),

    dcc.Graph(
    id = 'example-graph-2',
    figure = fig
  )
])

if __name__ == '__main__':
  app.run_server(debug = True)

You can save this as index.py and run it using python index.py inside terminal. This is how it will look -

Callbacks

Callbacks are functions which are called when a particular event occurs. Suppose we select a dropdown item, and we want our graph to be updated accordingly. In such cases, we can use callbacks. In Dash we use app.callback decorator for callbacks.

1
2
3
4
5
6
7
8
@app.callback(
  Output(component_id = 'my-output', component_property = 'children'),
  Input(component_id = 'my-input', component_property = 'value')
)
def update_figure(input_params):
  # # # code
for callback
function

Let’s see an example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies
import Input, Output
import plotly.express as px

import pandas as pd

df = pd.read_csv('https://covidtracking.com/data/download/national-history.csv')
df['month'] = pd.to_datetime(df['date'])
  .dt.month
df = df.groupby(by = ['month'])
  .agg(sum)
  .reset_index(drop = False)

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id = 'graph-with-slider'),
    dcc.Slider(
    id = 'month-slider',
    min = df['month'].min(),
    max = df['month'].max(),
    value = df['month'].min(),
    marks = {
      str(month): str(month) for month in df['month'].unique()
    },
    step = None
  )
])

@app.callback(
  Output('graph-with-slider', 'figure'),
    [Input('month-slider', 'value')])
def update_figure(selected_month):
  filtered_df = df[df.month == selected_month]

fig = px.bar(filtered_df, x = "month", y = "positive", hover_name = "month",
  log_x = True)

fig.update_layout(transition_duration = 500)

return fig

if __name__ == '__main__':
  app.run_server(debug = True)

This will create a slider. On changing the slider values, a callback will be generated which will change the plot values.

So we have shown how exactly Plotly works. Now let’s build another dashboard. We’ll be using [this dataset] (https://archive.ics.uci.edu/ml/datasets/Bank%2BMarketing) from UCI Machine learning repository.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies
import Input, Output
import plotly.express as px
import seaborn as sns

import pandas as pd

df = pd.read_csv('bank.csv')
#print(df.head())
app = dash.Dash(__name__)

fig1 = px.scatter(df, x = "age", y = "balance", color = "job",
  #size = "duration", color = "deposit", hover_name = "job",
  log_x = True, size_max = 60)

vals = df['marital'].value_counts()
  .tolist()
labels = ['married', 'divorced', 'single']

fig2 = px.bar(x = labels, y = vals)

fig3 = px.pie(df, "deposit", color = "deposit")

fig4 = px.imshow(df.corr())

fig5 = px.histogram(df, x = "age", y = "duration", color = "loan",
  marginal = "box", # or violin, rug hover_data = df.columns)

app.layout = html.Div([
    dcc.Graph(
    id = 'bubble',
    figure = fig1
  ),
    dcc.Graph(
    id = 'bar',
    figure = fig2
  ),
    dcc.Graph(
    id = 'pie',
    figure = fig3
  ),
    dcc.Graph(
    id = 'correlation_matrix',
    figure = fig4
  ),
    dcc.Graph(
    id = 'histogram',
    figure = fig5
  ),
    dash_table.DataTable(
    id = 'table',
    columns = [{
        "name": i,
        "id": i
      }
      for i in df.columns],
    data = df.head(20)
    .to_dict('records'),
  )
])

if __name__ == '__main__':
  app.run_server(host = '0.0.0.0', port = 8000, debug = True)

Below are some of the screenshots of our dashboard:

Deployment to cloud

Dash Enterprise provides the facility to deploy our Dash apps on cloud based platforms like AWS, Azure or GCP. Dash Enterprise provides a variety of features including job queue, password vault, Kubernates, reporting and user analytics. It ensures the safety of our application and keeps our application private to our organization. If you want to deploy it on a public platform, you can try Heroku. Take a look at this link for more details.

That’s all for now. Now it’s your turn to try this awesome library. Happy coding :)