Creating Page Elements

00:00 Creating the page elements. In this first section on interactivity, you’ll concentrate on creating the elements on the page that the user will interact with and make changes to the rest of the code to allow Dash’s interactivity to function.

00:17 The first element to create is the dropdown menu where the data can be filtered by the user. To enable this, the line which is currently filtering the data is commented out.

00:27 This was providing a fixed filter of the region, which will now be user-selectable. Next, NumPy is imported with a traditional alias of np to allow sorting functions to be created and applied.

00:44 Now the menu is created in its own <div> using the code seen onscreen.

01:33 Let’s take a closer look at dcc.Dropdown, which generates HTML code for the menu. Onscreen, you can see the code that you’ve just seen being added to app.py.

01:47 Here’s what each of the parameters means. id is the identifier of this element. options are the options shown when the dropdown is selected.

01:57 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 selector used for applying styles.

02:15 The dcc.Dropdown component will be used again later on in this course and will be a common component in your own dashboard code, so it’s worth taking the time to understand the available parameters.

02:27 Next, style.css has the following code added.

03:35 This CSS code allows the elements you’ve added to be styled appropriately and provides clear indication to the user of the different sections of the dashboard. Next, the graph components in the page are redefined, as seen onscreen.

04:37 You may notice that compared to the previous version of the dashboard, the components are missing the figure argument—the main segment that defines the graph’s content.

04:47 That’s because the figure argument will now be generated by a callback function using the inputs the user sets. This function will be called when the page loads, creating the initial chart.

04:58 Whenever a watched input is changed, the function is called again, and the page content gets updated. In fact, if you run the app at this point, you’ll see that the charts will be empty, precisely because the callback function that generates the chart is missing, so there’s nothing to display.

05:16 So, in the next section, let’s take a look at how callback functions work.