Python Dash Data Visualization Dashboard Web App Template
By: Ishan Mehta
Tags: Plotly, Python, Data Science, Dashboard Design, Data Visualization

In this tutorial, I will share a sample template for the data visualization web app dashboard using Python Dash which will look like below.

This is a sample template that can be used or extended to create dashboards quickly using Python Dash and connecting the correct data sources. Prior background with Python and Dash will be good to grasp the article.

I will run through the code in the article and share the link of GitHub code for anyone to use.

import dash

import dash_bootstrap_components as dbc

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output, State



import plotly.express as px

Import the relevant libraries. pip install any missing libraries.

The template uses Dash bootstrap, Dash HTML and Dash core components.

‘dbc’ are dash boostrap components, ‘dcc’ are dash core components and ‘html’ are dash html components

The layout consists of the sidebar and main content page

The app is initialized as:

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([sidebar, content])

Sidebar consists of Parameters header and controls.

sidebar = html.Div(

[

html.H2('Parameters', style=TEXT_STYLE),

html.Hr(),

controls

],

style=SIDEBAR_STYLE,

)

Below are all the controls of the sidebar which consist of a dropdown, range slider, checklist, and radio buttons. One can extend to add their own.

controls = dbc.FormGroup(

[

html.P('Dropdown', style={

'textAlign': 'center'

}),

dcc.Dropdown(

id='dropdown',

options=[{

'label': 'Value One',

'value': 'value1'

}, {

'label': 'Value Two',

'value': 'value2'

},

{

'label': 'Value Three',

'value': 'value3'

}

],

value=['value1'], # default value

multi=True

),

html.Br(),

html.P('Range Slider', style={

'textAlign': 'center'

}),

dcc.RangeSlider(

id='range_slider',

min=0,

max=20,

step=0.5,

value=[5, 15]

),

html.P('Check Box', style={

'textAlign': 'center'

}),

dbc.Card([dbc.Checklist(

id='check_list',

options=[{

'label': 'Value One',

'value': 'value1'

},

{

'label': 'Value Two',

'value': 'value2'

},

{

'label': 'Value Three',

'value': 'value3'

}

],

value=['value1', 'value2'],

inline=True

)]),

html.Br(),

html.P('Radio Items', style={

'textAlign': 'center'

}),

dbc.Card([dbc.RadioItems(

id='radio_items',

options=[{

'label': 'Value One',

'value': 'value1'

},

{

'label': 'Value Two',

'value': 'value2'

},

{

'label': 'Value Three',

'value': 'value3'

}

],

value='value1',

style={

'margin': 'auto'

}

)]),

html.Br(),

dbc.Button(

id='submit_button',

n_clicks=0,

children='Submit',

color='primary',

block=True

),

]

)

I am using Dash Boostrap Layout for the layout of the main content page

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

The main content page has a header and then divided into 4 rows.

The first row has 4 cards, the second row has 3 figures, the third row has one figure and the fourth row has 2 figures.

content = html.Div(

[

html.H2('Analytics Dashboard Template', style=TEXT_STYLE),

html.Hr(),

content_first_row,

content_second_row,

content_third_row,

content_fourth_row

],

style=CONTENT_STYLE

)

Following is the first row containing 4 cards.

content_first_row = dbc.Row([

dbc.Col(

dbc.Card(

[



dbc.CardBody(

[

html.H4(id='card_title_1', children=['Card Title 1'], className='card-title',

style=CARD_TEXT_STYLE),

html.P(id='card_text_1', children=['Sample text.'], style=CARD_TEXT_STYLE),

]

)

]

),

md=3

),

dbc.Col(

dbc.Card(

[



dbc.CardBody(

[

html.H4('Card Title 2', className='card-title', style=CARD_TEXT_STYLE),

html.P('Sample text.', style=CARD_TEXT_STYLE),

]

),

]



),

md=3

),

dbc.Col(

dbc.Card(

[

dbc.CardBody(

[

html.H4('Card Title 3', className='card-title', style=CARD_TEXT_STYLE),

html.P('Sample text.', style=CARD_TEXT_STYLE),

]

),

]



),

md=3

),

dbc.Col(

dbc.Card(

[

dbc.CardBody(

[

html.H4('Card Title 4', className='card-title', style=CARD_TEXT_STYLE),

html.P('Sample text.', style=CARD_TEXT_STYLE),

]

),

]

),

md=3

)

])

More reference on dash cards can be found here

The following is the second row have 2 columns with figures.

content_second_row = dbc.Row(

[

dbc.Col(

dcc.Graph(id='graph_1'), md=4

),

dbc.Col(

dcc.Graph(id='graph_2'), md=4

),

dbc.Col(

dcc.Graph(id='graph_3'), md=4

)

]

)

Following is the third row with one column with a figure.

content_third_row = dbc.Row(

[

dbc.Col(

dcc.Graph(id='graph_4'), md=12,

)

]

)

The following is the final row with two columns with figures.

content_fourth_row = dbc.Row(

[

dbc.Col(

dcc.Graph(id='graph_5'), md=6

),

dbc.Col(

dcc.Graph(id='graph_6'), md=6

)

]

)

Example of a sample callback for a graph. This can be extended to use data sources and figures of anyone’s choice.

@app.callback(

Output('graph_1', 'figure'),

[Input('submit_button', 'n_clicks')],

[State('dropdown', 'value'), State('range_slider', 'value'), State('check_list', 'value'),

State('radio_items', 'value')

])

def update_graph_1(n_clicks, dropdown_value, range_slider_value, check_list_value, radio_items_value):

print(n_clicks)

print(dropdown_value)

print(range_slider_value)

print(check_list_value)

print(radio_items_value)

fig = {

'data': [{

'x': [1, 2, 3],

'y': [3, 4, 5]

}]

}

return fig

Example of a sample callback for Card. This can be extended to have dynamic text displayed on cards.

@app.callback(

Output('card_title_1', 'children'),

[Input('submit_button', 'n_clicks')],

[State('dropdown', 'value'), State('range_slider', 'value'), State('check_list', 'value'),

State('radio_items', 'value')

])

def update_card_title_1(n_clicks, dropdown_value, range_slider_value, check_list_value, radio_items_value):

print(n_clicks)

print(dropdown_value)

print(range_slider_value)

print(check_list_value)

print(radio_items_value) # Sample data and figure

return 'Card Tile 1 change by call back'





@app.callback(

Output('card_text_1', 'children'),

[Input('submit_button', 'n_clicks')],

[State('dropdown', 'value'), State('range_slider', 'value'), State('check_list', 'value'),

State('radio_items', 'value')

])

def update_card_text_1(n_clicks, dropdown_value, range_slider_value, check_list_value, radio_items_value):

print(n_clicks)

print(dropdown_value)

print(range_slider_value)

print(check_list_value)

print(radio_items_value) # Sample data and figure

return 'Card text change by call back'

CSS for the components. The sidebar is position fixed ( scrolling the page does not change the sidebar). Width, margin-right, and margin-left are in terms of percentage in order for the webpage to dynamically change size according to the size.

# the style arguments for the sidebar.

SIDEBAR_STYLE = {

'position': 'fixed',

'top': 0,

'left': 0,

'bottom': 0,

'width': '20%',

'padding': '20px 10px',

'background-color': '#f8f9fa'

}



# the style arguments for the main content page.

CONTENT_STYLE = {

'margin-left': '25%',

'margin-right': '5%',

'top': 0,

'padding': '20px 10px'

}



TEXT_STYLE = {

'textAlign': 'center',

'color': '#191970'

}



CARD_TEXT_STYLE = {

'textAlign': 'center',

'color': '#0074D9'

}

Github repository for the template source code.

You can find the dash_template.py file in the ‘src’ folder. Run this and can check the web app page on http://127.0.0.1:8085/

Few reference links

https://plotly.com/python/plotly-express/