Data Visualization with Dash and Bootstrap Components

I’ve been ignoring Dash for years, preferring to use a combination of Flask and HTML. My argument was that if you need to create your user interface in HTML (which you kind of have to in Dash), then why not go the whole hog and actually write it in HTML? As I wrote here, it’s not so difficult.

Anyway, then along came Streamlit, which made things easier.

But I occasionally got a bit annoyed with Streamlit - it is too easy to mix the UI with the rest of the code, and if you aren’t careful, it can be a mess.

So I started looking at other platforms, Taipy and Mesop, for example - both of these nicely separate the program logic from the UI. Much less messy, but designing the UI on these platforms was much closer to writing HTML in Python - my original bugbear with Dash.

So, belatedly, I decided it was time to take another look at Dash. Also belatedly, I found that I could use my favourite Bootstrap components with it (I rarely write HTML without Bootstrap), and I made the app you can see above.

It’s a simple dashboard-type app with two interactive charts (a choropleth and a bar chart) along with their controls (a drop-down menu and a slider).

As you can see from the image, it’s not so bad!

Well, I was fairly happy with the result, anyway. I’ve never properly engaged with Dash before, and I was quite pleased that it didn’t feel any more difficult than Streamlit (or Taipy or Mesop).

The whole app is around 80 lines of well-spaced-out code. A fair chunk of that is to draw the choropleth, and the Dash/Bootstrap UI is only about 20 lines.

So, let’s look at how it’s put together.

A Dash app

A Dash app consists of four parts:

• the preliminary code that sets up the app and does any data set up and so on,
• the page layout, which is defined as Dash and Bootstrap components,
• callbacks, which are the functions that are called in response to user interaction,
• the app run command.

We’ll look at all of these and how they are put together shortly, and you will find all of the code in my GitHub repo.

But first, let’s look at the way we define the page.

Page layout

When deployed, a Dash app consists of two parts: the web page displayed in the browser and the code that supports it, which remains on the server. This separation is hidden; the HTML page layout, which will become the web page, is defined in the app code.

Both Dash and Bootstrap provide us with components that get converted to HTML. Bootstrap also incorporates styles we can adopt to make our page look good and stylistically consistent.

I have defined a default style using Bootstrap that gives every component a common look: a border, a light background, margins around the component and padding inside it. This is a single line of code (that we will see soon) that is applied to each component. The layout of the page looks like the image below. You might find the design a little fussy, but one of my aims is to demonstrate the use of Bootstrap styles, and this does the job, as we will see later.

There are four main components to the UI: the outer container that wraps the whole page; a header that is styled a little differently to make it stand out; and two columns that contain the charts, the user controls and some text. At the bottom of the outer container, there is a footer - just a string of text.

In HTML, we would write this page as a set of tags, mostly <div> tags, that are nested inside each other. With Dash, we use the components provided and code the UI in Python.

A first Dash app with Bootstrap styling

Let’s have a quick blast through a simple Dash app that uses Bootstrap components.

Below is the code for a very simple Dash app that uses Bootstrap styling, and below that is a screenshot of the result. We will use this as the basis of the full app.

from dash import Dash, html
import dash_bootstrap_components as dbc

# Initialize the Dash app with Bootstrap stylesheet
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# Define a default CSS class for styling
DEFAULT_CLASS = 'border border-primary rounded bg-light p-2 m-2'

# Define the layout of the app
app.layout = dbc.Container(
    [
        html.H1("A Bootstrap 'primary' styled header",
        className="text-primary"),
        html.Div("Some normal text in a 'secondary' style",
        className='text-secondary'),
    ], className=DEFAULT_CLASS
)

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

The first couple of lines import the required libraries. If you want to follow along with the coding, you’ll probably want ot create a virtual environment and pip install these (or use whatever your favourite installation method is). Later, you will also need plotly, pandas and numpy.

After that, the Dash app itself is created, and here we need to tell Dash that we will be using the Bootstrap themes.

There are two aspects of the Bootstrap components: one is the component themselves (e.g. the rows and columns we’ll see later). Styles are defined as classes by Bootstrap, and we can string them together to make quite complex styles. For example, there are classes that define borders, ones that define margins and padding, and those that determine how the text and the background should look.

As I mentioned before, I set up a default style, and that is the next line of code that you see.

DEFAULT_CLASS = 'border border-primary rounded bg-light p-2 m-2'

The meaning of each part is as follows:

• border - there is a border around the component

• border-primary - that is the colour of the border

• rounded - the border has rounded corners

• bg-light - the background colour

• p-2 - two pixels of padding

• m-2 - a two-pixel margin

There are many, many ways of setting up the way that Bootstrap components look. See the Bootstrap docs for the full set of components and styles and the Dash Bootstrap Components for how to use them in Dash.

We can see the usage of this default style in the first component in the layout. Because that is the next thing we come across. The app.layout defines how the app will look, and here we assign it to a component called dbc.container. This is a general-purpose container provided by Bootstrap, which contains a list of elements or other containers. At the end of that list, we can specify the style of the container, and it is here that we use the default style.

Inside the container, there are two more elements: a header and a div container. The purpose of a header is self-explanatory, and a div is another general-purpose container (that will create an HTML <div> tag).

Each of these elements contains a string, which will be displayed and a classname which defines the style (in this case, the colour).

The last couple of lines of code run the app, and in this case, we set the debug flag to True. This is convenient for development, as it will reload the app whenever it detects a change.

The thing we don’t see in this app is the dynamic part - the callback functions. These are invoked when a UI component changes, and we need something to be done. We’ll get on to those later.

Callbacks - adding charts and controls

The final app displays charts of CO₂ emissions that come from a local CSV file.

Our next app gets part of the way there by reading data and building a chart from it. Furthermore, it incorporates a user control (a slider) that lets the user choose the particular aspect of the data to be displayed (the year).

This illustrates how Dash deals with user input via callback functions. These functions are linked to values in the user interface: the input that has changed and an output value that the callback will calculate from that changed input.

Here is what our data looks like.

It is a simple table that records CO₂ emissions for a country (‘Entity’) in a particular year and is sourced from Our World in Data.

The application allows users to explore CO₂ emissions data over time by selecting a specific year from a slider. A choropleth map updates dynamically, displaying emissions for each country using a color scale.

First, we import the necessary libraries - there are a couple more this time:

from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc

• Dash and Dash Bootstrap Components (dbc) as before.
• Plotly Express (px) is used to generate the choropleth map.
• Pandas loads and manipulates the CO₂ emissions dataset.

As before, we create an instance of Dash and apply an external Bootstrap stylesheet for styling:

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

The dataset, stored in a CSV file, is loaded using Pandas. We record the minimum, maximum, and midpoint years for configuring the slider later:

df = pd.read_csv("data/co2_total.csv")
marks = {int(i): str(i) for i in df.Year.unique() if i % 50 == 0}

min_year = df.Year.min()
max_year = df.Year.max()
mid_year = (max_year + min_year) // 2

Again, we define the default layout.

DEFAULT_CLASS = 'border border-primary rounded p-2 bg-light m-2'

Defining the Layout

As we have seen above, Dash uses a declarative layout structure and here, we organize components using Bootstrap’s Container and Row:

app.layout = dbc.Container([
    html.H1('Dash App with Bootstrap Components - CO₂ Emissions', 
             className="{DEFAULT_CLASS} text-center text-dark bg-dark-subtle"),
    dbc.Row([
        html.Div('Global CO₂ Emissions', className='h3 text-danger'),
        html.Div("Move the slider to display CO₂ emissions by country for a specific year", className='text-secondary'),
        dcc.Slider(min=min_year, max=max_year, value=mid_year, step=1, marks=marks, id='slider-value'),
        dcc.Graph(id='graph2-content'),
        dcc.Markdown("""
            The data used in this article is derived from Our World in Data.
            OWD publishes articles and data about the most pressing problems that the world faces.
            All its content is open source and its data is downloadable.
            See [Our World in Data](https://ourworldindata.org/) for details.
        """, className='text-secondary')
    ], className='border border-primary rounded p-2 bg-light m-2')
], className="container-fluid")

Here are the components in detail:

• Container: This is a a general purpose container for the whole app

• Title (H1): The main heading is styled with Bootstrap classes - the text and background style from the default style are overridden.

• Row: by itself, a row doesn’t do anything except act as another container. The reason for using a row here is because the final app will create two columns in the row for the two graphs

• Divs: These are text containers that provide user guidance and context - the first is an H3 header that is coloured red (the ‘text-danger’ class).

• Slider: Allows users to select a year to update the map.

• Graph: Displays CO₂ emissions using a choropleth map.

• Markdown: A markdown container can contain any valid markdown text and here provides data attribution..

Creating the Callback for Interactivity

Dash uses a callback function to update the map when the slider value changes. A callback function is preceded by the @callback decorator, which defines the input and output for the function. The input and output consist of two parts: the ID of a UI element and a value type. In this case, the input comes from the slider, and it is a ‘value’ (the year), while the output goes to the graph container and is a ‘figure’.

@callback(
    Output('graph2-content', 'figure'),
    Input('slider-value', 'value')
)
def update_graph(value):
    col = 'Annual CO₂ emissions'
    max_val = df[col].max()
    min_val = df[col].min()

    fig = px.choropleth(df[df['Year'] == value],
        locations="Code",  # Country ISO codes
        color=col,  # CO₂ emissions data
        hover_name="Entity",  # Country name
        range_color=(min_val, max_val),
        scope='world',
        projection='equirectangular',
        title=f"CO₂ Emissions by Country in {value}",
        color_continuous_scale=px.colors.sequential.Reds
    )

    fig.update_layout(
        margin=dict(l=0, r=0, t=60, b=0),
        coloraxis_colorbar=dict(title="Tonnes"),
    )

    return fig

The function is quite simple: it listens for changes in the slider value and draws a Plotly choropleth with the dataframe filtered by value which is the year selected by the slider. The updated figure is returned to the graph component.

Finally, we start the Dash server to launch the app.

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

The result can be seen in the screenshot below.

That is all you need to know to create the complete app, so I won’t go into great detail more here (the complete code is in my GitHub repo and the README file will give you details of which file is which, so please visit that).

Below is the code that changes in the UI. You can see that we add two columns to the original row, and the second column contains code very similar to the first. In this column, a bar chart will be drawn, and the input is from a drop-down menu that contains a list of countries.

        dbc.Row([
            dbc.Col( # ...the original row content
            ),
            dbc.Col([
                html.Div('Total CO₂ Emissions', className='h3 text-danger'),
                html.Div("Choose a country to display the CO₂ emissions over time", className='text-secondary'),
                dcc.Dropdown(df.Entity.unique(), 'Canada', id='dropdown-selection'),
                dcc.Graph(id='graph-content'),
                ],
                className= DEFAULT_CLASS
            ),
        ]),

To cater for this new chart, we need another callback function.

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.Entity==value]
    return px.bar(dff, x='Year', y='Annual CO₂ emissions', 
                  template='plotly_white')

This simple function takes the value from the drop-down menu (the country) and plots a bar chart of emissions over time and returns the updated figure to the graph container with the ID ‘graph-content’.

Conclusion

In this tutorial, we built a Dash web application that visualizes CO₂ emissions using a choropleth map. We integrated Bootstrap components to enhance the layout.

Is this easier than Streamlit? You’ll probably think it is more in line with the way that Taipy or Mesop work, but which is the easiest method? This, at least to some extent, is down to personal preference.

I’ve used the open-source version of Dash here - there is an Enterprise version which provides you with tools to make developing and deploying sophisticated apps easier. I’ve no idea how much it costs.

This was, in the main, an exercise to help me make my mind up which data visualisation framework I prefer, and I have to report that I still don’t think I am any the wiser. Perhaps you are. I’d very much like to hear what you think.

Thanks for reading, and I hope this was useful. If you would like to read more of my stuff, most of it is on Medium and also on my website (if you aren’t a Medium member). I also maintain a Substack where I post when I publish something new.

Here are some useful links:

• Dash (open source docs)

• Dash Bootstrap Components

• Our World in Data

• The repo for this code.

All images are by me, the author, unless otherwise indicated

I am not connected with any of the companies mentioned in this article except as a user of their products