Python Dash Data Visualization Dashboard Template
In this tutorial, we 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.
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 pxImport 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
),
]
)We are using Dash Boostrap Layout for the layout of the main content page
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 figExample 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/
Originally published by Ishan Mehta at Medium
#data-science #plotly #dashboard-design #data-visualization #python
