Interactive Dashboards with Dash and Python

Pythoneo

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.
See also  How to convert cm to inch?

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)