Dash, by Plotly, is a powerful open-source Python framework that allows you to build interactive web applications and dashboards using pure Python. It’s especially well-suited for creating data visualization tools without requiring extensive knowledge of front-end web development (HTML, CSS, JavaScript). This tutorial will guide you through the basics of getting started with Dash.
Installation
Install Dash and its core dependencies using pip:
pip install dash
You may also want to install some additional packages that are commonly used with Dash:
pip install dash-html-components dash-core-components dash-table
Or, to install all recommended packages at once:
pip install dash[complete]
Creating Your First Dash App
Creating a basic Dash app involves defining the app’s layout using Python components. Here’s a simple example:
import dash
from dash import dcc # Dash Core Components
from dash import html # Dash HTML Components
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Montreal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
Key elements of this code:
dash.Dash(__name__)
: Initializes the Dash app.app.layout
: Defines the structure and content of the app using HTML and Core Components.html.Div
: A basic HTML div element that acts as a container.html.H1
: An HTML heading element.dcc.Graph
: A Dash Core Component for creating interactive graphs.figure
: A dictionary that defines the graph’s data and layout.app.run_server(debug=True)
: Starts the development server.debug=True
enables automatic reloading on code changes.
Adding Interactivity with Callbacks
Dash’s power lies in its interactivity, which is implemented using callbacks. Callbacks are Python functions that are automatically called whenever an input component’s property changes. They then update the properties of output components.
Here’s an example of a callback that updates the graph based on a dropdown selection:
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Dropdown(
id='fruit-dropdown',
options=[{'label': fruit, 'value': fruit} for fruit in df['Fruit'].unique()],
value='Apples'
),
dcc.Graph(id='fruit-graph')
])
@app.callback(
Output('fruit-graph', 'figure'),
Input('fruit-dropdown', 'value')
)
def update_graph(selected_fruit):
filtered_df = df[df['Fruit'] == selected_fruit]
fig = px.bar(filtered_df, x="City", y="Amount", color="City")
return fig
if __name__ == '__main__':
app.run_server(debug=True)