Setting up a dash application

Let’s explore the realm of interactive web applications using Python Dash. Dash is a framework designed for creating web apps with a focus on data visualisation. It works by combining the analytical capabilities of Python with the interactive features of web pages. Let’s see how to setup a minimal app as an introduction to dash.

What is Dash?

Before we dive into the code, let first understand kind of framework dash is and how it came to be. Developed by the team at Plotly, dash is an open-source framework built on top of Flask a python web & API framework, Plotly a visualisation library, and ReactJS a library for building user interfaces. This make dash a perfect tool for creating analytical web applications without requiring extensive knowledge of web development. With Dash, you can create stunning and interactive visualisations with just a few lines of Python code. How you make ask? Let’s setup the app.

Project setup

Create a new directory in your preferred projects folder for your dash app and navigate into it i.e.

1mkdir dash-demo && cd dash-demo

Inside this directory, create a new python file. Let's call it `app.py`.

Installing the dash package

Next let's get dash installed. Open up your terminal or command prompt in your project folder and type:

1pip install dash

This will install the core dash package along with its dependencies.

Writing Your First Dash App

Now comes the fun part 🤩 writing some code! 🧑🏾‍💻 Open `app.py` in your favourite code editor and start with the following

1#load all libraries
2from dash import Dash, html
3
4# Initialize the Dash app
5app = Dash(__name__)
6
7# Define the app layout
8app.layout = html.Div(children=[
9    html.H1(children='Hello Dash!'),
10
11    html.Div(children='''
12        Dash: This is our gcp-dash project
13    '''),
14])
15
16# Run the app with debug True
17if __name__ == '__main__':
18    app.run(debug=True) #Runs the app only if the code is correct

Here's a quick breakdown of the code above

• We import Dash and HTML components from the dash module. This components give us the power of HTML in a python application.
• We initialise the Dash app. If you are familiar with flask you will notice that this is how we initialise a flask app.
• We define the layout of the app using HTML components provided by Dash. In this case, we're creating a simple page with a header and a paragraph.
• Finally, we run the app with debugging enabled which allows us to make changes to the app without needing to restart the server manually.

Let’s start our application.

Save your `app.py` file and head back to your terminal and run the following command.

1python app.py

If everything is set up correctly, you should see output indicating that the app is running on http://127.0.0.1:8050/. Open this URL in your web browser, and voila! You've just created your first Dash app.

Can we do more ?

Yes. Let's make our app a bit more interesting by adding some interactive components. For example a graph that updates based on user input?

Let's update the `app.py` file to include a dropdown menu and a graph. We shall use one of the most common datasets which is the Iris Dataset. It is a dataset containing four features (length and width of sepals and petals) of 50 samples of three species of Iris (Iris setosa, Iris virginica and Iris versicolor). The goal here is to add a graph showing a scatter chart of the sepal width and sepal length based on the selected species.

1# load all libraries
2from dash import Dash, dcc, html
3from dash.dependencies import Input, Output
4import plotly.express as px
5import pandas as pd
6
7# Initialize the Dash app
8app = Dash(__name__)
9
10# Read your data(in this case iris dataset)
11df = px.data.iris()
12
13# Define the app layout
14app.layout = html.Div(
15    style={"max-width": "800px", "margin": "0 auto"},
16    children=[
17        html.H1(children="Interacting with the Iris Dataset"),
18        dcc.Dropdown(
19            id="species-dropdown",
20            options=[
21                {"label": species, "value": species}
22                for species in df["species"].unique()
23            ],
24            value="setosa",
25        ),
26        dcc.Graph(id="species-graph"),
27    ],
28)
29
30
31# Define callback to update graph
32@app.callback(Output("species-graph", "figure"), [Input("species-dropdown", "value")])
33def update_graph(selected_species):
34    filtered_df = df[df["species"] == selected_species]
35    fig = px.scatter(
36        filtered_df,
37        x="sepal_width",
38        y="sepal_length",
39        title=f"Sepal Width vs. Length: {selected_species}",
40    )
41    return fig
42
43
44# Run the app
45if __name__ == "__main__":
46    app.run(debug=True)

With the updated app save the changes and run your app again with `python app.py`, or if your server is still running then you should see the changes reflect. You should see a drop-down menu and a scatter plot that updates when you select a different species like shown below. Pretty cool, right?

Dash app iris dataset

Conclusion

And there you have it! You've successfully set up and created an interactive web application using Python Dash. From a simple `Hello Dash!` to a dynamic data visualisation tool, you've taken your first steps into the world of Dash which is very exciting.

This article will be part of a series where we showcase dash, build dash templates and use it to solve real world problems. Look out for the next articles where we build a reusable template and another where we introduce a problem and build a dashboard around it.

Happy coding! 🚀