Chapter 2: Exploring the Structure of a Dash App

We are now ready to tackle the mechanism through which Dash creates interactivity – the heart of Dash, if you will. Once you are comfortable with creating callback functions that link different elements of the layout, combined with what you learned in Chapter 1, Overview of the Dash Ecosystem, you should be well equipped to be able to convert datasets into interactive apps in a very short period of time. The remainder of this book will go into much more detail and offer many more options of how to do this. However, these two chapters should be sufficient for creating visual layouts, as well as connecting them and making them interactive. We will mainly explore callback functions in this chapter; the following topics will be covered:

• Using Jupyter Notebooks to run Dash apps
• Creating a standalone pure Python function
• Understanding the ID parameter of Dash components
• Using Dash inputs and outputs
• Incorporating...

Technical requirements

In addition to the packages that we used in Chapter 1, Overview of the Dash Ecosystem (for example, Dash, Dash HTML Components, and Dash Bootstrap Components), we will be, most importantly, working with Dash Core Components. We will also look at how to run Dash apps within a Jupyter Notebook environment, and for that, we will be using the jupyter_dash package along with JupyterLab. Later in the chapter, when we incorporate new functionality into the app, we will use pandas for data manipulation.

The code files of this chapter can be found on GitHub at https://github.com/PacktPublishing/Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash/tree/master/chapter_02.

Check out the following video to see the Code in Action at https://bit.ly/3tC0ZsW.

Using Jupyter Notebooks to run Dash apps

With a change to imports and a minor change to app instantiation, we can easily start to run our apps within Jupyter Notebook environments. The package that makes this possible is jupyter_dash. Essentially, the difference is that we import the JupyterDash object (instead of importing Dash), and app instantiation occurs by calling this object, as follows:

from jupyter_dash import JupyterDash
app = JupyterDash(__name__)

One of the advantages of running apps in a notebook environment is that it is less tedious to make small changes, iterate them, and see results. Working with an IDE, the command line, and the browser, you need to constantly shift between them, while in a notebook environment, everything is in one place. This makes introducing simple changes and testing them easier. It can make your notebooks far more powerful and interesting as well.

The jupyter_dash package also provides an additional option while running the app, where...

Creating a standalone pure Python function

This function is what we will be using to take the selected value from the dropdown, process it somehow, and use its return value to do something that is visible to the user.

The function is so simple that it doesn't require much explanation:

def display_selected_color(color):
    if color is None:
        color = 'nothing'
    return 'You selected ' + color

If the user doesn't input anything (or deselects the current option), then the color variable is set to 'nothing', and the function returns 'You selected ' + <color>, with whatever value color takes. Later in the chapter, we will create a more involved function to get some information on countries.

A function is essentially a procedure. It takes in one or more arguments (inputs), does something to them, and returns one or more outputs. So,...

The id parameter of Dash components

As briefly mentioned in Chapter 1, Overview of the Dash Ecosystem, every Dash component has an id parameter that you can easily set in order to uniquely identify it. There is actually nothing more to this parameter than making sure that your components have unique and descriptive names.

Note

There are more advanced ways of using the id parameter, and they will be tackled in a later, more advanced chapter. However, for now, we will just focus on it being a unique identifier.

Using descriptive and explicit names for the id parameter becomes more important as the app grows in complexity. This parameter is optional when there is no interactivity, but it becomes mandatory when there is. The following example snippet shows how easy it is to set the id parameter for a basic use case:

html.Div([
    html.Div(id='empty_space'),
    html.H2(id='h2_text'),
    dcc.Slider...

Dash inputs and outputs

The next step is to determine which component is going to become an input (to our pure Python function) and which component will get the return value of the function (as an output) to be displayed to the user.

Determining your inputs and outputs

The dash.dependencies module has several classes, two of which we will be using here: Output and Input.

These classes can be imported by adding the following line to the imports section of our app:

from dash.dependencies import Output, Input

Let's quickly recap what we did earlier before adding the final element that will make this functionality work:

1. We instantiated an app in the Jupyter Notebook environment.
2. We created a dropdown containing three colors.
3. We created a regular function that returns a string, together with the value provided to it: 'Your selected' + <color>.
4. The components were identified with descriptive names through their id parameters.
5. Input...

Incorporating the function into the app

Here is the plan for the functionality that we are going to introduce:

1. Create a drop-down list using the countries and regions available in our dataset.
2. Create a callback function that takes the selected country, filters the dataset, and finds the population of that country in the year 2010.
3. Return a small report about the found data. Figure 2.7 shows the desired end result:
   

Figure 2.7 – A drop-down list used to display the selected country's population

Important note

Now that we are beginning to use our dataset, we will start opening files from the data folder. This assumes that the app you are running is in the same folder. The code for each chapter in the GitHub repository is placed in its own folder for easy access; however, the code only works if the data folder and app.py are both in the same folder.

Figure 2.8 shows what this folder structure might look like:

Figure...

Summary

First, we introduced a new way to run Dash apps, which is by running them in a Jupyter Notebook environment. We saw how familiar the process is, and we created our first interactive app in a notebook. We went through every detail in the process from creating layout components, giving them IDs, and selecting which of their properties will be used, to connecting all of this with the callback function. We ran another example and familiarized ourselves with our dataset. Most importantly, we learned how to incorporate the new work into the app, and we ran an updated version that produced simple population reports. Congratulations!

In the next chapter, we will take a deep dive into Plotly's data visualization capabilities. We will mainly focus on the Figure object, its components, how to query them, and how to modify them. This will give us fine-grained control over the visualizations that we will make.