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’.
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
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
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:
In Chapter 3, we’ll set up a function to read our CSV data and take a look at the first few lines.