Creating Dashboards with Plotly Dash

Duration: 5 min

This module covers the essentials of creating interactive dashboards using Plotly Dash, a powerful Python framework. You will learn how to build web-based dashboards that can display data visualizations, handle user interactions, and update in real-time. Understanding this module is crucial for data scientists and analysts who want to present their findings in an engaging and interactive manner.

Setting Up a Basic Dash Application

To create a Dash application, you need to import the necessary libraries, initialize the Dash app, define the layout using HTML components, and run the server. Dash applications are structured similarly to Flask applications, making them easy to understand for those familiar with web development in Python.

import dash
import dash_core_components as dcc
import dash_html_components as html

# Initialize the Dash app
app = dash.Dash(__name__)

# Define the layout
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),
    html.Div(children='''Dash: A web application framework for Python.''),
    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'
            }
        }
    )
])

# Run the server
if __name__ == '__main__':
    app.run_server(debug=True)

Try it in Google Colab:

A web page titled 'Hello Dash' with a heading 'Dash: A web application framework for Python.' and a bar chart comparing SF and Montreal.

Adding Interactivity with Callbacks

Callbacks in Dash allow you to create interactive elements in your dashboard. By defining a callback function, you can update parts of your dashboard in response to user actions, such as clicking a button or selecting a dropdown. Callbacks use the @app.callback decorator to specify input and output components.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='input-box', type='text', value=''),
    html.Button('Submit', id='button', n_clicks=0),
    html.H1(id='output-text')
])

@app.callback(
    Output('output-text', 'children'), 
    [Input('input-box', 'value'), Input('button', 'n_clicks')]
)
def update_output(value, n_clicks):
    return f'Input: {value}, Number of clicks: {n_clicks}'

if __name__ == '__main__':
    app.run_server(debug=True)

💡 Tip: Ensure that the component IDs in your callback match the IDs defined in your layout to avoid errors.