Callbacks, Layouts, & Bootstrap: How to Create Dashboards in Plotly Dash
By: Mitchell Krieger
Tags: Data Visualization, Dashboard, Dash, Data Science, Plotly

Photo by Luke Chesser on Unsplash

One of the most important roles of data scientists & analysts is to present data and insights in an understandable way to stakeholders. Creating dashboards is a great way to display what you are discovering in your data exploration and machine learning modeling. Plotly offers a robust open-source version of their library for building dashboards called Dash. In addition, there are multiple additional open-source libraries that make building a dashboard in Dash easy. This tutorial is an overview of one way to implement your first multi-page Dashboard app using Dash.

What is Dash?

Dash is a framework that allows you to create highly customizable and interactive data visualization apps that are rendered in your web browser using only Python. Dash is also available in R and Julia but this tutorial will focus on Python. Built on top of Plotly, Flask, and React, Dashboards in Dash have the capability to be deployed to the internet and displayed cross-platform and on mobile devices. Essentially Dash is able to create web applications without the use direct of HTML or CSS. We’ll focus on the free open source version here but Plotly offers an enterprise version for Dash for use in managing enterprise dashboards.

Key Elements of Dash

Before we dive into specifics, let’s go over some key ideas that we’ll use in building our first multi-page dash app:

Layouts & Components:

Layouts describe what your dashboard will look like. This includes style choices like fonts and colors generated by CSS scripts and what components will populate the app. The dash_core_components and dash_html_components libraries provide a variety of frequently used components of dash apps. HTML components are python versions of HTML tags that can be used in your dash app, allowing you to create Divs, display text, structure paragraphs/headers, and so on. You can also assign them a style, a class, or an id just like in HTML. The core components are various useful elements to place on your dashboard just as dropdown menus, graphs, sliders, buttons, and so on. There are many additional Dash component libraries that you can find in Dash’s documentation.

Layouts describe what your dashboard will look like. This includes style choices like fonts and colors generated by CSS scripts and what components will populate the app. The and libraries provide a variety of frequently used components of dash apps. HTML components are python versions of HTML tags that can be used in your dash app, allowing you to create Divs, display text, structure paragraphs/headers, and so on. You can also assign them a style, a class, or an id just like in HTML. The core components are various useful elements to place on your dashboard just as dropdown menus, graphs, sliders, buttons, and so on. There are many additional Dash component libraries that you can find in Dash’s documentation. Callbacks:

Callbacks are python decorators that control the interactivity of your dash app. A decorator is a function that wraps around another function, executing code before and/or after the function they decorate. In Dash, the callback decorator uses this property to look for changes made by the user to your dashboard app’s components and executes any associated changes you define. For example, you could set up a callback that takes in information from a slider component on your dashboard and then executes changes to a graph based on the input from the slider.

Callbacks are python decorators that control the interactivity of your dash app. A decorator is a function that wraps around another function, executing code before and/or after the function they decorate. In Dash, the callback decorator uses this property to look for changes made by the user to your dashboard app’s components and executes any associated changes you define. For example, you could set up a callback that takes in information from a slider component on your dashboard and then executes changes to a graph based on the input from the slider. Bootstrap:

If you are already familiar with CSS, you can style your Dash app by writing your own CSS script. But, if you are not familiar with CSS or don’t want to take the time to write your own, Bootstrap is the way to go. Bootstrap is a popular CSS Framework for creating interactive and mobile-ready applications. The dash_bootstrap_components library by faculty.ai provides CSS styling as well as additional components like app navigation tools, collapsable content, dialog boxes, and more. Bootstrap makes it easy to organize your content by giving you the ability to create columns and rows that contain components. Here’s a good rundown of how it operates and check out the documentation for how to translate it into python.

Getting started with your dashboard

First, you need to install Dash and Dash Bootstrap Components (core and HTML components should come pre-installed with Dash)

$ pip install dash==1.19.0

$ pip install dash-bootstrap-components

Once you have dash installed you’ll want to create a directory to keep all of your python scripts that build your app. Note that there are multiple ways to structure this directory and the python files in it, the following is only one way to structure it. I like to structure it this way because I find it helps me keep my code organized. In this structure you’ll have four files:

PyFile #1: The App

app.py : This script is short and simple. It creates your dash app and connects it to a server. If you choose to use Bootstrap CSS styling (or another pre-made CSS stylesheet), you can also do so here.

PyFile #2: Index

index.py : This will be your main point of entry into the dashboard. Meaning when you want to run the dashboard app, in your command line you’ll type python index.py . Here’s you’ll also define which layouts to display on what pages of your app. The app.layout will be your overarching structure. In this example, I have a location component that ties the structure to a URL, instantiates a horizontal navigation bar, and the page content in an HTML div. This structure will display the same on all pages of the app. The callback below that is a special callback that sends the page layout to the page-content HTML div in the structure when you click on the links in the navigation bar to a new page. Be sure to import the layouts, components, and styles you want to display from layouts.py .

PyFile #3: Layouts

layouts.py : Here’s where you’ll design your dashboard app. You’ll want to set each layout, component, or style equal to a variable or store it in a function so you can access it in index.py and in other places in this layouts script. Remember, layouts.py is just defining the layouts of each page and various additional components such as a navigation bar. We’ll discuss how to implement interactivity in callbacks.py after.

In this example, I’ve imported the classic iris dataset to generate two Plotly Express graphs to display. I’ve also created a navigation bar, two styles, and two layouts. Each layout consists of a 1 row by 2 column bootstrap grid. In the first layout, the column on the left has two tabs that will display different graphs. The column on the right displays text associated with a click on the graph from the user. For the second layout, it demonstrates two dash core components that are great for interactivity: the dropdown menu and radio buttons. They don’t do much right now except display the selected value, but that’s where you can get creative and figure out how to use the selected value to interact with other components and graphs.

layouts.py is likely to be your longest py script.

PyFile #4: Callbacks

callbacks.py : Any interactivity you want to create should go here. You’ll notice that many of these elements in the above layouts.py script have an id= argument passed through them. These id’s are how the callbacks in callbacks.py will identify which components to listen to for user input and where to display the output of the callback. The structure of a callback is the following:

@app.callback(

Output("component-id-to-output-to", "children"),

Input("component-id-to-listen-to", "valuesIn")

)

def callback_name(valuesIn):

#code for callback to execute

return output_to_children

Each callback listens to a component and takes in values from it. This is the Input() piece. Then the callback function is executed using these values. Once the function returns a value or object, it is sent to Output() . "children" is a common output for every callback. Children are sub-elements of a component. We’ve actually already used children a lot. Each time we nested components inside another in the scripts above we’ve added a child component. So essentially, when children is in the output of the callback, it tells Dash to place the returned content inside the component with the id that matches the id listed in the output. For example, the first callback in callbacks.py takes in the value active_tabs from the component with the id tabs and returns the output of the callback to the component with the id tab-content . That returned content is now a child of the tab-content component.

I’ve set up four callbacks in the following script:

Listens to which tab is currently clicked & returns the associated graph Listens to clicks on the graph and returns text associated with that click Listens to the dropdown menu and returns the selected value as in a string Listens to the radio buttons and returns the selected value as in a string

Most of these callbacks aren’t that interesting, but it helps to understand simple callbacks before starting to build more complex ones.

Once you’ve got all four files set up, edit them to your data, visualizations from Plotly, and more. Also, try altering the structure/layouts and creating your own callbacks. The best way to learn Dash is to play around and try to experiment with different layouts and styles. When you want to see what your app head enter python index.py into your command line. It should look something like this:

$ python index.py Dash is running on http://127.0.01:5000/ * Serving Flask app "app" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on

Type the URL where Dash is running into any web browser to see what you’ve created! If debug mode is on, you should be able to update your scripts and your app will change live. You can turn debug mode off in index.py by setting debug=False .

Dash is a vast, flexible, and powerful library and there’s so much to learn it can be a bit overwhelming at first. But it’s a great tool to have in your toolbelt and worth it once you dive in.

Find a GitHub Repository of this project here.