Chapter 2:
Build the user interface

Now that we have our data added to our app and the Python environment is configured, we can actually start building our app.

Step 1: Add a title

Navigate to ‘App’ in the sidebar menu, then choose Form1. Here we can see the Design view of our app. Drag and drop a Label from the Toolbox and add it to the top of the app. In the Properties Panel, change the label’s text to “Uber Pickups in NYC” and its role to ‘headline’.

Dragging and dropping a Label from the Toolbox then changing its text and role properties

Step 2: Add the plots

Our dashboard is going to have two plots: a histogram of the number of pickups per hour and a map of the pickup locations. Drag and drop two plot components to the Form and two Labels to act as titles for the plots. Change the name property of one plot to be bar_chart and the other to be mapbox_map.

Change the Label above the bar_chart to be “Number of pickups per hour” and change its role to ‘title’. We’ll set the other Label’s text property in code, so we can leave that blank. Change its name to mapbox_title and its role to ‘title’.

We’re going to want users to be able to filter the map data based on the hour of pickup. Add a DropDown component above the mapbox_map and rename it to hour_dropdown. We’ll populate the dropdown later in code. (You can add a Spacer component over the bar_chart title to make the UI look more even)

Our Form should now look something like this:

Screenshot of the Form Editor showing the finished UI

In Chapter 3, we’ll set up a function to read our CSV data and take a look at the first few lines.

Chapter complete

Congratulations, you've completed this chapter!