Get startedGet started for free

Mass shootings

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!