Comment on page
Dash Overview
Create data apps in Python.
Dash is a Python-based dashboarding library that makes it easy to build detailed, Enterprise-grade dashboards and data apps.
To understand Dash, there are three basic concepts to understand:
- 1.A Dash App instance: a single running instance of your data app.
- 2.The app layout: how to configure what is actually displayed in your dash app.
- 3.Callbacks: how to make your dash app interactive.
To see how each of these come together, consider the following simplest example of an interactive Dash application:
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')
# (1) The Dash App instance
app = Dash(__name__)
# (2) The app layout
app.layout = html.Div([
html.H1(children='Title of Dash App', style={'textAlign':'center'}),
dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
dcc.Graph(id='graph-content')
])
# (3) A callback
@callback(
Output('graph-content', 'figure'),
Input('dropdown-selection', 'value')
)
def update_graph(value):
dff = df[df.country==value]
return px.line(dff, x='year', y='pop')
if __name__ == '__main__':
app.run(debug=True)
To create a new Dash app instance, all you need is the following code (in a file
app.pyfrom dash import Dash
app = Dash(__name__)
# Code elided from above
if __name__ == '__main__':
app.run(debug=True)
Running this code with
python app.py will start a server that serves a blank webpage. Congrats, that's your first data app! But because you havent set a layout, or configured any callbacks, it's not super interesting. Ok, so you actually want something to be displayed. Let's add in more code - to set the layout.
1
from dash import Dash, html, dcc, callback, Output, Input
2
import plotly.express as px
3
import pandas as pd
4
5
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')
6
7
# (1) The Dash App instance
8
app = Dash(__name__)
9
10
# (2) The app layout
11
app.layout = html.Div([
12
html.H1(children='Title of Dash App', style={'textAlign':'center'}),
13
dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
14
dcc.Graph(id='graph-content')
15
])
16
17
if __name__ == '__main__':
18
app.run(debug=True)
If you run this code, a webpage with some content will be served! It will have two things:
- 1.A title - set on line 12. The title is set to
Title of Dash Appand some additional styling is added to center the text. - 2.A dropdown - set on line 13. The possible options of this dropdown are the various countries in the dataframe defined on line 5, and the starting value is
Canada
app.layout is how you actually tell the Dash app what to display. You can nest components like div's (which are just containers), or H1 (which is a large header) or Dropdown (which lets you select from a variety of options). See the Dash documentation for all components.However, nothing happens when you change the dropdown item that is selected! That's no good -- we want to update the graph component defined on line 14...
Callbacks are how you add interactivity to your application. By registering a series of Outputs that change when a different set of Inputs change, you can make pieces of your application respond changes in other pieces of your application.
1
from dash import Dash, html, dcc, callback, Output, Input
2
import plotly.express as px
3
import pandas as pd
4
5
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')
6
7
# (1) The Dash App instance
8
app = Dash(__name__)
9
10
# (2) The app layout
11
app.layout = html.Div([
12
html.H1(children='Title of Dash App', style={'textAlign':'center'}),
13
dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
14
dcc.Graph(id='graph-content')
15
])
16
17
# (3) A callback
18
@callback(
19
Output('graph-content', 'figure'),
20
Input('dropdown-selection', 'value')
21
)
22
def update_graph(value):
23
dff = df[df.country==value]
24
return px.line(dff, x='year', y='pop')
25
26
if __name__ == '__main__':
27
app.run(debug=True)
Here's what's happening above:
- 1.On line 18, a callback is registered. The callback is the function
update_graph - 2.The Input to the callback is the
valueof thedropdown-selectioncomponent - defined on line 13. - 3.The Output from the callback is the
figureof thegraph-contentcomponent, defined on line 14.
Here's what this accomplishes:
- 1.When the
valueof the component with iddropdown-selectionchanges because the user selects something different from the dropdown, the functionupdate-graphchanges. - 2.When this function runs, the
valuethat is passed to the function as it's singular argument is the new value of the Dropdown the user has selected on the frontend. - 3.This function runs, creates a new Plotly line chart, and then returns it.
- 4.This returned line chart is written to the
graph-contentcomponent, specifically for it'sfigurevalue, which then updates on the frontend.
By reading the documentation for a component, you can see what the correct props are to write to with outputs!
New to writing Dash applications and looking to understand more? Check out the Dash docs to learn more core concepts.