Develop Data Visualization Interfaces in Python With Dash

How to Set Up Your Local Environment

To develop your app, you’ll need a new directory to store your code and data and a clean Python 3 virtual environment. To create those, follow the instructions below, choosing the version that matches your operating system.

If you’re using Windows, then open a command prompt and execute these commands:

c:\> mkdir avocado_analytics && cd avocado_analytics
c:\> c:\path\to\python\launcher\python -m venv venv
c:\> venv\Scripts\activate.bat

The first command creates a directory for your project and moves your current location there. The second command creates a virtual environment in that location. The last command activates the virtual environment. Make sure to replace the path in the second command with the path of your Python 3 launcher.

If you’re using macOS or Linux, then follow these steps from a terminal:

$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate

The first two commands perform the following actions:

1. Create a directory called avocado_analytics
2. Move your current location to the avocado_analytics directory
3. Create a clean virtual environment called venv inside that directory

The last command activates the virtual environment you just created.

Next, you need to install the required libraries. You can do that using pip inside your virtual environment. Install the libraries as follows:

(venv) $ python -m pip install dash==1.13.3 pandas==1.0.5

This command will install Dash and pandas in your virtual environment. You’ll use specific versions of these packages to make sure that you have the same environment as the one used throughout this tutorial. In addition to Dash, pandas will help you handle reading and wrangling the data you’ll use in your app.

Finally, you need some data to feed into your dashboard. You can download the data as well as the code you see throughout this tutorial by clicking the link below:

Save the data as avocado.csv in the root directory of the project. By now, you should have a virtual environment with the required libraries and the data in the root folder of your project. Your project’s structure should look like this:

avocado_analytics/
|
├── venv/
|
└── avocado.csv

You’re good to go! Next, you’ll build your first Dash application.

How to Build a Dash Application

For development purposes, it’s useful to think of the process of building a Dash application in two steps:

1. Define the looks of your application using the app’s layout.
2. Use callbacks to determine which parts of your app are interactive and what they react to.

In this section, you’ll learn about the layout, and in a later section, you’ll learn how to make your dashboard interactive. You’ll start by setting up everything you need to initialize your application and then you’ll define the layout of your app.

 1import dash
 2import dash_core_components as dcc
 3import dash_html_components as html
 4import pandas as pd
 5
 6data = pd.read_csv("avocado.csv")
 7data = data.query("type == 'conventional' and region == 'Albany'")
 8data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
 9data.sort_values("Date", inplace=True)
10
11app = dash.Dash(__name__)

Defining the Layout of Your Dash Application

Next, you’ll define the layout property of your application. This property dictates the look of your app. In this case, you’ll use a heading with a description below it and two graphs. Here’s how you define it:

13app.layout = html.Div(
14    children=[
15        html.H1(children="Avocado Analytics",),
16        html.P(
17            children="Analyze the behavior of avocado prices"
18            " and the number of avocados sold in the US"
19            " between 2015 and 2018",
20        ),
21        dcc.Graph(
22            figure={
23                "data": [
24                    {
25                        "x": data["Date"],
26                        "y": data["AveragePrice"],
27                        "type": "lines",
28                    },
29                ],
30                "layout": {"title": "Average Price of Avocados"},
31            },
32        ),
33        dcc.Graph(
34            figure={
35                "data": [
36                    {
37                        "x": data["Date"],
38                        "y": data["Total Volume"],
39                        "type": "lines",
40                    },
41                ],
42                "layout": {"title": "Avocados Sold"},
43            },
44        ),
45    ]
46)

This code defines the layout property of the app object. This property determines the looks of your application using a tree structure made of Dash components.

Dash components come prepackaged in Python libraries. Some of them come with Dash when you install it. The rest you have to install separately. You’ll see two sets of components in almost every app:

1. Dash HTML Components provides you with Python wrappers for HTML elements. For example, you could use this library to create elements such as paragraphs, headings, or lists.
2. Dash Core Components provides you with Python abstractions for creating interactive user interfaces. You can use it to create interactive elements such as graphs, sliders, or dropdowns.

On lines 13 to 20, you can see the Dash HTML components in practice. You start by defining the parent component, an html.Div. Then you add two more elements, a heading (html.H1) and a paragraph (html.P), as its children.

These components are equivalent to the div, h1, and p HTML tags. You can use the components’ arguments to modify attributes or the content of the tags. For example, to specify what goes inside the div tag, you use the children argument in html.Div.

There are also other arguments in the components, such as style, className, or id, that refer to attributes of the HTML tags. You’ll see how to use some of these properties to style your dashboard in the next section.

The part of the layout shown on lines 13 to 20 will get transformed into the following HTML code:

<div>
  <h1>Avocado Analytics</h1>
  <p>
    Analyze the behavior of avocado prices and the number
    of avocados sold in the US between 2015 and 2018
  </p>
  <!-- Rest of the app -->
</div>

This HTML code is rendered when you open your application in the browser. It follows the same structure as your Python code, with a div tag containing an h1 and a p element.

On lines 21 to 24 in the layout code snippet, you can see the graph component from Dash Core Components in practice. There are two dcc.Graph components in the app.layout. The first one plots the average prices of avocados during the period of study, and the second plots the number of avocados sold in the United States during the same period.

Under the hood, Dash uses Plotly.js to generate graphs. The dcc.Graph components expect a figure object or a Python dictionary containing the plot’s data and layout. In this case, you provide the latter.

Finally, these two lines of code help you run your application:

48if __name__ == "__main__":
49    app.run_server(debug=True)

Lines 48 and 49 make it possible to run your Dash application locally using Flask’s built-in server. The debug=True parameter from app.run_server enables the hot-reloading option in your application. This means that when you make a change to your app, it reloads automatically, without you having to restart the server.

Finally, here’s the full version of app.py. You can copy this code in the empty app.py you created earlier.

app.pyShow/Hide

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

data = pd.read_csv("avocado.csv")
data = data.query("type == 'conventional' and region == 'Albany'")
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
data.sort_values("Date", inplace=True)

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.H1(children="Avocado Analytics",),
        html.P(
            children="Analyze the behavior of avocado prices"
            " and the number of avocados sold in the US"
            " between 2015 and 2018",
        ),
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["Date"],
                        "y": data["AveragePrice"],
                        "type": "lines",
                    },
                ],
                "layout": {"title": "Average Price of Avocados"},
            },
        ),
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["Date"],
                        "y": data["Total Volume"],
                        "type": "lines",
                    },
                ],
                "layout": {"title": "Avocados Sold"},
            },
        ),
    ]
)

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

This is the code for a bare-bones dashboard. It includes all the snippets of code you reviewed earlier in this section.

Now it’s time to run your application. Open a terminal inside your project’s root directory and in the project’s virtual environment. Run python app.py, then go to http://localhost:8050 using your preferred browser.

It’s ALIVE! Your dashboard should look like this:

The good news is that you now have a working version of your dashboard. The bad news is that there’s still some work to do before you can show this to others. The dashboard is far from visually pleasing, and you still need to add some interactivity to it.

But don’t worry—you’ll learn how to fix these issues in the next sections.

Remove ads

How to Apply a Custom Style to Your Components

You can style components in two ways:

1. Using the style argument of individual components
2. Providing an external CSS file

Using the style argument to customize your dashboard is straightforward. This argument takes a Python dictionary with key-value pairs consisting of the names of CSS properties and the values you want to set.

If you wanted to change the size and color of the H1 element in app.py, then you could set the element’s style argument as follows:

html.H1(
    children="Avocado Analytics",
    style={"fontSize": "48px", "color": "red"},
),

Here, you provide to style a dictionary with the properties and the values you want to set for them. In this case, the specified style is to have a red heading with a font size of 48 pixels.

The downside of using the style argument is that it doesn’t scale well as your codebase grows. If your dashboard has multiple components that you want to look the same, then you’ll end up repeating a lot of your code. Instead, you can use a custom CSS file.

If you want to include your own local CSS or JavaScript files, then you need to create a folder called assets/ in the root directory of your project and save the files you want to add there. By default, Dash automatically serves any file included in assets/. This will also work for adding a favicon or embedding images, as you’ll see in a bit.

Then you can use the className or id arguments of the components to adjust their styles using CSS. These arguments correspond with the class and id attributes when they’re transformed into HTML tags.

If you wanted to adjust the font size and text color of the H1 element in app.py, then you could use the className argument as follows:

html.H1(
    children="Avocado Analytics",
    className="header-title",
),

Setting the className argument will define the class attribute for the H1 element. You could then use a CSS file in the assets folder to specify how you want it to look:

.header-title {
  font-size: 48px;
  color: red;
}

You use a class selector to format the heading in your CSS file. This selector will adjust the heading format. You could also use it with other element that needs to share the format by setting className="header-title".

Next, you’ll style your dashboard.

How to Improve the Looks of Your Dashboard

You just covered the basics of styling in Dash. Now, you’ll learn how to customize your dashboard’s looks. You’ll make these improvements:

• Add a favicon and title to the page
• Change the font family of your dashboard
• Use an external CSS file to style Dash components

You’ll start by learning how to use external assets in your application. That will allow you to add a favicon, a custom font family, and a CSS style sheet. Then you’ll learn how to use the className argument to apply custom styles to your Dash components.

body {
    font-family: "Lato", sans-serif;
    margin: 0;
    background-color: #F7F7F7;
}

.header {
    background-color: #222222;
    height: 256px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-emoji {
    font-size: 48px;
    margin: 0 auto;
    text-align: center;
}

.header-title {
    color: #FFFFFF;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
}

.header-description {
    color: #CFCFCF;
    margin: 4px auto;
    text-align: center;
    max-width: 384px;
}

.wrapper {
    margin-right: auto;
    margin-left: auto;
    max-width: 1024px;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 32px;
}

.card {
    margin-bottom: 24px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}

avocado_analytics/
│
├── assets/
│   ├── favicon.ico
│   └── style.css
│
├── venv/
│
├── app.py
└── avocado.csv

11external_stylesheets = [
12    {
13        "href": "https://fonts.googleapis.com/css2?"
14                "family=Lato:wght@400;700&display=swap",
15        "rel": "stylesheet",
16    },
17]
18app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
19app.title = "Avocado Analytics: Understand Your Avocados!"

Customizing the Styles of Components

To use the styles in style.css, you’ll need to use the className argument in Dash components. The code below adds a className with a corresponding class selector to each of the components that compose the header of your dashboard:

21app.layout = html.Div(
22    children=[
23        html.Div(
24            children=[
25                html.P(children="🥑", className="header-emoji"),
26                html.H1(
27                    children="Avocado Analytics", className="header-title"
28                ),
29                html.P(
30                    children="Analyze the behavior of avocado prices"
31                    " and the number of avocados sold in the US"
32                    " between 2015 and 2018",
33                    className="header-description",
34                ),
35            ],
36            className="header",
37        ),

On lines 21 to 37, you can see that there have been two changes to initial version of the dashboard:

1. There’s a new paragraph element with an avocado emoji that will serve as logo.
2. There’s a className argument in each component. These class names should match a class selector in style.css, which will define the looks of each component.

For example, the header-description class assigned to the paragraph component starting with "Analyze the behavior of avocado prices" has a corresponding selector in style.css:

29.header-description {
30    color: #CFCFCF;
31    margin: 4px auto;
32    text-align: center;
33    max-width: 384px;
34}

Lines 29 to 34 of style.css define the format for the header-description class selector. These will change the color, margin, alignment, and maximum width of any component with className="header-description". All the components have corresponding class selectors in the CSS file.

The other significant change is in the graphs. Here’s the new code for the price chart:

38html.Div(
39    children=[
40        html.Div(
41            children=dcc.Graph(
42                id="price-chart",
43                config={"displayModeBar": False},
44                figure={
45                    "data": [
46                        {
47                            "x": data["Date"],
48                            "y": data["AveragePrice"],
49                            "type": "lines",
50                            "hovertemplate": "$%{y:.2f}"
51                                                "<extra></extra>",
52                        },
53                    ],
54                    "layout": {
55                        "title": {
56                            "text": "Average Price of Avocados",
57                            "x": 0.05,
58                            "xanchor": "left",
59                        },
60                        "xaxis": {"fixedrange": True},
61                        "yaxis": {
62                            "tickprefix": "$",
63                            "fixedrange": True,
64                        },
65                        "colorway": ["#17B897"],
66                    },
67                },
68            ),
69            className="card",
70        ),

In this code, you define a className and a few customizations for the config and figure parameters of your chart. Here are the changes:

• Line 43: You remove the floating bar that Plotly shows by default.
• Lines 50 and 51: You set the hover template so that when users hover over a data point, it shows the price in dollars. Instead of 2.5, it’ll show as $2.5.
• Lines 54 to 66: You adjust the axis, the color of the figure, and the title format in the layout section of the graph.
• Line 69: You wrap the graph in an html.Div with a "card" class. This will give the graph a white background and add a small shadow below it.

There are similar adjustments to the sales and volume charts. You can see those in the full code for the updated app.py in the collapsible section below.

app.pyShow/Hide

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

data = pd.read_csv("avocado.csv")
data = data.query("type == 'conventional' and region == 'Albany'")
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
data.sort_values("Date", inplace=True)

external_stylesheets = [
    {
        "href": "https://fonts.googleapis.com/css2?"
        "family=Lato:wght@400;700&display=swap",
        "rel": "stylesheet",
    },
]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Avocado Analytics: Understand Your Avocados!"

app.layout = html.Div(
    children=[
        html.Div(
            children=[
                html.P(children="🥑", className="header-emoji"),
                html.H1(
                    children="Avocado Analytics", className="header-title"
                ),
                html.P(
                    children="Analyze the behavior of avocado prices"
                    " and the number of avocados sold in the US"
                    " between 2015 and 2018",
                    className="header-description",
                ),
            ],
            className="header",
        ),
        html.Div(
            children=[
                html.Div(
                    children=dcc.Graph(
                        id="price-chart",
                        config={"displayModeBar": False},
                        figure={
                            "data": [
                                {
                                    "x": data["Date"],
                                    "y": data["AveragePrice"],
                                    "type": "lines",
                                    "hovertemplate": "$%{y:.2f}"
                                                     "<extra></extra>",
                                },
                            ],
                            "layout": {
                                "title": {
                                    "text": "Average Price of Avocados",
                                    "x": 0.05,
                                    "xanchor": "left",
                                },
                                "xaxis": {"fixedrange": True},
                                "yaxis": {
                                    "tickprefix": "$",
                                    "fixedrange": True,
                                },
                                "colorway": ["#17B897"],
                            },
                        },
                    ),
                    className="card",
                ),
                html.Div(
                    children=dcc.Graph(
                        id="volume-chart",
                        config={"displayModeBar": False},
                        figure={
                            "data": [
                                {
                                    "x": data["Date"],
                                    "y": data["Total Volume"],
                                    "type": "lines",
                                },
                            ],
                            "layout": {
                                "title": {
                                    "text": "Avocados Sold",
                                    "x": 0.05,
                                    "xanchor": "left",
                                },
                                "xaxis": {"fixedrange": True},
                                "yaxis": {"fixedrange": True},
                                "colorway": ["#E12D39"],
                            },
                        },
                    ),
                    className="card",
                ),
            ],
            className="wrapper",
        ),
    ]
)

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

This is the updated version of app.py. It has the required changes in the code to add a favicon and a page title, update the font family, and use an external CSS file. After these changes, your dashboard should look like this:

In the next section, you’ll learn how to add interactive components to your dashboard.

Remove ads

How to Create Interactive Components

First, you’ll learn how to create components that users can interact with. For that, you’ll include a new html.Div above your charts. It’ll include two dropdowns and a date range selector that the user can use to filter the data and update the graphs.

Here’s how that looks in app.py:

24html.Div(
25    children=[
26        html.Div(
27            children=[
28                html.Div(children="Region", className="menu-title"),
29                dcc.Dropdown(
30                    id="region-filter",
31                    options=[
32                        {"label": region, "value": region}
33                        for region in np.sort(data.region.unique())
34                    ],
35                    value="Albany",
36                    clearable=False,
37                    className="dropdown",
38                ),
39            ]
40        ),
41        html.Div(
42            children=[
43                html.Div(children="Type", className="menu-title"),
44                dcc.Dropdown(
45                    id="type-filter",
46                    options=[
47                        {"label": avocado_type, "value": avocado_type}
48                        for avocado_type in data.type.unique()
49                    ],
50                    value="organic",
51                    clearable=False,
52                    searchable=False,
53                    className="dropdown",
54                ),
55            ],
56        ),
57        html.Div(
58            children=[
59                html.Div(
60                    children="Date Range",
61                    className="menu-title"
62                    ),
63                dcc.DatePickerRange(
64                    id="date-range",
65                    min_date_allowed=data.Date.min().date(),
66                    max_date_allowed=data.Date.max().date(),
67                    start_date=data.Date.min().date(),
68                    end_date=data.Date.max().date(),
69                ),
70            ]
71        ),
72    ],
73    className="menu",
74),

On lines 24 to 74, you define an html.Div on top of your graphs consisting of two dropdowns and a date range selector. It will serve as a menu that the user will use to interact with the data:

The first component in the menu is the Region dropdown. Here’s the code for that component:

41html.Div(
42    children=[
43        html.Div(children="Region", className="menu-title"),
44        dcc.Dropdown(
45            id="region-filter",
46            options=[
47                {"label": region, "value": region}
48                for region in np.sort(data.region.unique())
49            ],
50            value="Albany",
51            clearable=False,
52            className="dropdown",
53        ),
54    ]
55),

On lines 41 to 55, you define the dropdown that users will use to filter the data by region. In addition to the title, it has a dcc.Dropdown component. Here’s what each of the parameters means:

• id is the identifier of this element.
• options is the options shown when the dropdown is selected. It expects a dictionary with labels and values.
• value is the default value when the page loads.
• clearable allows the user to leave this field empty if set to True.
• className is a class selector used for applying styles.

The Type and Date Range selectors follow the same structure as the Region dropdown. Feel free to review them on your own.

Next, take a look at the dcc.Graphs components:

 90html.Div(
 91    children=[
 92        html.Div(
 93            children=dcc.Graph(
 94                id="price-chart", config={"displayModeBar": False},
 95            ),
 96            className="card",
 97        ),
 98        html.Div(
 99            children=dcc.Graph(
100                id="volume-chart", config={"displayModeBar": False},
101            ),
102            className="card",
103        ),
104    ],
105    className="wrapper",
106),

On lines 90 to 106, you define the dcc.Graph components. You may have noticed that, compared to the previous version of the dashboard, the components are missing the figure argument. That’s because the figure argument will now be generated by a callback function using the inputs the user sets using the Region, Type, and Date Range selectors.

How to Define Callbacks

You’ve defined how the user will interact with your application. Now you need to make your application react to user interactions. For that, you’ll use callback functions.

Dash’s callback functions are regular Python functions with an app.callback decorator. In Dash, when an input changes, a callback function is triggered. The function performs some predetermined operations, like filtering a dataset, and returns an output to the application. In essence, callbacks link inputs and outputs in your app.

Here’s the callback function used for updating the graphs:

111@app.callback(
112    [Output("price-chart", "figure"), Output("volume-chart", "figure")],
113    [
114        Input("region-filter", "value"),
115        Input("type-filter", "value"),
116        Input("date-range", "start_date"),
117        Input("date-range", "end_date"),
118    ],
119)
120def update_charts(region, avocado_type, start_date, end_date):
121    mask = (
122        (data.region == region)
123        & (data.type == avocado_type)
124        & (data.Date >= start_date)
125        & (data.Date <= end_date)
126    )
127    filtered_data = data.loc[mask, :]
128    price_chart_figure = {
129        "data": [
130            {
131                "x": filtered_data["Date"],
132                "y": filtered_data["AveragePrice"],
133                "type": "lines",
134                "hovertemplate": "$%{y:.2f}<extra></extra>",
135            },
136        ],
137        "layout": {
138            "title": {
139                "text": "Average Price of Avocados",
140                "x": 0.05,
141                "xanchor": "left",
142            },
143            "xaxis": {"fixedrange": True},
144            "yaxis": {"tickprefix": "$", "fixedrange": True},
145            "colorway": ["#17B897"],
146        },
147    }
148
149    volume_chart_figure = {
150        "data": [
151            {
152                "x": filtered_data["Date"],
153                "y": filtered_data["Total Volume"],
154                "type": "lines",
155            },
156        ],
157        "layout": {
158            "title": {
159                "text": "Avocados Sold",
160                "x": 0.05,
161                "xanchor": "left"
162            },
163            "xaxis": {"fixedrange": True},
164            "yaxis": {"fixedrange": True},
165            "colorway": ["#E12D39"],
166        },
167    }
168    return price_chart_figure, volume_chart_figure

On lines 111 to 119, you define the inputs and outputs inside the app.callback decorator.

First, you define the outputs using Output objects. These objects take two arguments:

1. The identifier of the element that they’ll modify when the function executes
2. The property of the element to be modified

For example, Output("price-chart", "figure") will update the figure property of the "price-chart" element.

Then you define the inputs using Input objects. They also take two arguments:

1. The identifier of the element they’ll be watching for changes
2. The property of the watched element that they should take when a change happens

So, Input("region-filter", "value") will watch the "region-filter" element for changes and will take its value property if the element changes.

On line 120, you define the function that will be applied when an input changes. One thing to notice here is that the arguments of the function will correspond with the order of the Input objects supplied to the callback. There’s no explicit relationship between the names of the arguments in the function and the values specified in the Input objects.

Finally, on lines 121 to 164, you define the body of the function. In this case, the function takes the inputs (region, type of avocado, and date range), filters the data, and generates the figure objects for the price and volume charts.

That’s all! If you’ve followed along to this point, then your dashboard should look like this:

Way to go! That’s the final version of your dashboard. In addition to making it look beautiful, you also made it interactive. The only missing step is making it public so you can share it with others.