1. Mass shootings
In this video, we will create the final Shiny app of this course.
2. Explore data
We will use a dataset compiled by Mother Jones, a non-profit organization. It
consists of mass shootings in the US starting from 1982.
Let us start by exploring the data. While it has several interesting fields, we
will restrict our attention to the five fields displayed here.
3. Preview app
The app will allow users to explore the shootings on a map, filtered by the
minimum number of fatalities and a date range. The circles are sized based on the
number of fatalities, and clicking on the circle will display a summary of the
incident.
4. Add UI
Instead of fluidPage, we will use a new layout, bootstrapPage. This layout will
allow the map to be displayed full page, with no margins. We will use the
bootswatch theme simplex.
We want our input panel to appear on the top right of the app. To achieve this,
we will use absolutePanel, and pass it the parameters top and right to position
it correctly. We will also give it an id so we can style it.
Next we will place the map on the UI using leafletOutput, a function from the
leaflet package, a package that helps create interactive maps.
This if followed by a slider input to control the number of fatalities.
And a date range input to select a range of dates.
Finally, we add custom styles so that the panel is white and has some padding.
5. Add output: interactive map
It is now time to create the interactive map. For this, we make use of the leaflet package that makes it simple to create interactive maps.
We start by creating an output named map and using renderLeaflet from the
leaflet package to wrap the mapping code.
To create the base map, we start with the leaflet function, add mapping tiles
using addTiles, set the view to center on the US using setView, and passing it
a latitude, longitude, and zoom level.
6. Preview app
Let us preview our app. It doesn't do anything yet, but definitely looks
beautiful.
7. Add reactive expression
We want to display mass shootings filtered by number of fatalities and the
selected date range. It is always best practice to encapsulate any computation
using a reactive expression.
We start by setting up the reactive expression using reactive.
Next, we take our dataset mass_shootings and filter it, so that we only consider
dates within the date range, and with number of fatalities more than the minimum selected.
8. Update output: interactive map
It is now time to update our map output so it takes this data and displays circles.
To do this, we start by passing the reactive expression to the leaflet function.
Then, we extend the leaflet map by adding circle markers using the function addCircleMarkers.
We set the parameter popup to summary so the case summary appears on clicking it.
We set the parameter radius to fatalities so the circles are sized based on number of fatalities.
Finally, we set the fill and border color to 'red' and set the border weight to 1.
9. Preview app
This looks great right?
10. Update app: add action button and modal
Our final step is to add an About button to the app so we can display a README for app users when a user clicks on the button.
To do this, we first add an actionButton to the UI.
On the server side, we can use observeEvent to trigger the display of text_about as a modal dialog when the action button is clicked.
11. Final app
Our app is done! See the lovely modal dialog.
12. Let's practice!
It is now your turn to build this app from scratch. Good luck!