Dash is a Python framework to build web applications specifically for interactive analytical dashboard or visualization (like pie chart, line plot etc.). It is open source and built on top of Plotly.js, React.js (for the JavaScript user interface) and Flask (for serving the pages).
I am dividing full basic dash tutorial into two parts:
1. Build basic dash application structure
2. Making interactive dash application (communication between two dashboards)
In this post I will cover first part where I will focus on how to learn basic dash with python by spending minimal amount of time. I will explain only those portions of dash framework which is required to understand whole Dash framework.By knowing those portion you can easily start developing web app in python using dash.
Note: Assuming you have prior basic knowledge in Plotly.How to plot dashboard using Plotly kind of knowledge I am expecting.
Also Read:
Prerequisites and installations
While writing codes for this post I had below software and package versions:
- Python Version: 3.6.3
- Dash Version: 1.7.0
You can install dash by typing below command in cmd:
pip install dash
Applicationstructure of Dash with python
So now let’s first make our first dash app and then I will explain its structure.
Note: I am writing this application in a notepad++/ Sublime Text (not Jupyter notebook). To run this application type below command in cmd inside particular directory:
python code_name.py.
## 1st Example Application: Basic
import dash
import dash_core_components as dcc
import dash_html_components as html
# Read plotly example dataframe to plot barchart
import plotly.express as px
df = px.data.gapminder().query("country=='India'")
# Start Application
app = dash.Dash()
# Define application window name/ title
app.title = 'FirstApp'
# Application Layout
app.layout = html.Div(
html.Div([
html.H1(children='First Dash Application: Indian Population over time'),
html.H3(children='Indian Population over time'),
html.Div(children='Dash: Python framework to build web application'),
dcc.Graph(
id='bar-chart',
figure={
'data': [
{'x': df['year'], 'y': df['pop'], 'type': 'bar', 'name': 'SF'},
],
'layout': {
'title': 'Bar Chart Visualization'
}
}
),
])
)
if __name__ == '__main__':
app.run_server(debug=True)
Now open any browser, your plots will be visible at below link:
Default link for dash web application:
The application should look like below. You can hover to the plot to view the value. In this application I am trying to visualize Indian Population over the years.
Now let’s understand the code in detail. We can divide above code into four parts like below:
1. Import packages: Import all required packages
2. Python coding/ Function: In this portion you can write any python codes or functions required to manipulate data or anything. You can say backend/ server side portion of the application.
3. Dash Application Layout: This is the dash frontend application design portion. Here you can style and arrange your application page with different dashboard, table or anything you want at frontend portion of your dash application by using different type of html componentsand dash core components (dcc).
4. Calling Dash Application:This portion needs to be written at the end of the code to run dash application in flash local hosted server.
Hope you understand application structure of Dash Application using Python.Now above application have only one dashboard. Now we should know how to add multiple plots/ dashboards in dash application.
Multiple plots in dash application with Python
## 2nd Example Application: Multiple App
import dash
import dash_core_components as dcc
import dash_html_components as html
# Read plotly example dataframe to plot barchart
import plotly.express as px
df = px.data.gapminder().query("country=='India'")
app = dash.Dash()
app.title = 'MultipleApp'
app.layout = html.Div(
html.Div([
html.H1(children='Multiple Application: Indian Population over time'),
html.H3(children='Indian Population over time'),
html.Div(children='Dash: Python framework to build web application'),
dcc.Graph(
id='bar-chart',
figure={
'data': [
{'x': df['year'], 'y': df['pop'], 'type': 'bar', 'name': 'SF'},
],
'layout': {
'title': 'Bar Chart Visualization'
}
}
),
# Adding one more app/component
dcc.Graph(
id='line-chart',
figure={
'data': [
{'x': df['year'], 'y': df['pop'], 'type': 'line', 'name': 'SF'},
],
'layout': {
'title': 'Line Chart Visualization'
}
}
)
])
)
if __name__ == '__main__':
app.run_server(8051, debug=True)
In this application I am trying to visualize Indian Population over the years by using bar chart and line chart.
Now let’s have a look into only those parts of this code where I made changes to plot single to multiple visualizations.
Changes are listed below:
1. Added one more dash core component (line chart)
2. Changed the server port to 8051 (default is: 8050). So now your application link for multiple application is http://127.0.0.1:8051/
But as you can see two plots are appearing one after one (row wise) in the page. Now let’s see how to showcase multiple plots column wise or side by side in dash with python. You can even divide your entire webpage into so many parts (row wise or column wise) by using bootstrap.
Bootstrap in Dash with Python
In this part I will show you by using bootstrap how you can arrange your entire webpage developed by using Dash.
What is Bootstrap?
Bootstrap is a CSS Framework to develop responsive websites. By using bootstrap/ CSS you can arrange/ style your entire webpage and make it responsive (works properly for different screen size).
Let me explain the architecture of bootstrap I have used for this tutorial.
Row: To divide page into multiple rows. Total number of row can be anything
Column: To split page into multiple columns. Total number of column should be 12 to fit everything properly.
 |
|
So let’s see how our code and output will look like if we are using bootstrap in Dash.
|
## 3rd Example Application: Bootstrap
import dash
import dash_core_components as dcc
import dash_html_components as html
# Read plotly example dataframe to plot barchart
import plotly.express as px
df = px.data.gapminder().query("country=='India'")
# Define Dash app with extarnal style sheet (bootstrap)
app = dash.Dash(external_stylesheets=['https://codepen.io/amyoshino/pen/jzXypZ.css'])
app.title = 'MultipleColumn'
app.layout = html.Div(
html.Div([
# Adding one extar Div
html.Div([
html.H1(children='Multiple Application'),
html.H3(children='Indian Population over time'),
html.Div(children='Dash: Python framework to build web application'),
], className = 'row'),
html.Div([
html.Div([
dcc.Graph(
id='bar-chart',
figure={
'data': [
{'x': df['year'], 'y': df['pop'], 'type': 'bar', 'name': 'SF'},
],
'layout': {
'title': 'Bar Chart Visualization'
}
}
),
], className = 'six columns'),
# Adding one more app/component
html.Div([
dcc.Graph(
id='line-chart',
figure={
'data': [
{'x': df['year'], 'y': df['pop'], 'type': 'line', 'name': 'SF'},
],
'layout': {
'title': 'Line Chart Visualization'
}
}
)
], className = 'six columns')
], className = 'row')
])
)
if __name__ == '__main__':
app.run_server(8052, debug=False)
Now here you can see two plots are coming side by side (horizontally) instead of one by one vertically. This is the effect of bootstrap or css.
Dash Bootstrap Code explanation
To arrange entire page like above I have added some lines to previous code, which is marked in red lines or box. Changes are listed below.
1. Divided each section of the entire page by html.Div which is a html component of dash.
2. Inserted css/ bootstrap class name at the end of each html.Div component.
I have divided entire page into
1. Two rows: One for heading of the page and another for plotting section
2. Now plotting section further divided into two columns.
Note: One extra thing you can observe is id. Id is nothing but id of a div element. It is required to make any plot interactive, which I will cover in my next article.
Also Read:
Conclusion
In this tutorial you learned
- What is dash framework in python?
- How to make dash application or dashboard
- How to plot multiple dashboards in one page by using dash with python
- How to arrange multiple plot in dash using bootstrap css
If you have any question or suggestion regarding this topic see you in comment section. I will try my best to answer.