Introduction to Shiny — Pitch Locations for Home Runs


Yesterday I gave an “Introduction to Shiny” talk to our new Data Science Club at BGSU.  Also I have been exploring some 2018 home run data with a research group of ACTION students.  Anyway, these two things motivated me to write a short Shiny app.  The goal is to show you the ease of using the shiny package to develop web applications.  Hopefully, by trying this out, the interested reader will try working on his or own Shiny apps.

The Problem

Generally most baseball hitters will hit a home run given the “right” pitch, that is, a particular type of pitch (fastball, curve ball, etc.) thrown at a desirable location.  I’m interested in comparing visually the pitch locations of home runs for two players.  I’ll be working with all of the pitches put in-play during the 2018 season.  I thought it would be nice to have a Shiny app where the user can easily input the names of the two players and the app would display a graph of the locations of the home run pitches for the two players on adjacent panels.  Batters might react differently to fastballs or off-speed pitches, so it would be nice if the user could indicate as an option if we should look at all home runs, or just the home runs hit on fastballs, or the home runs hit on off-speed pitches.

Getting Started

I set this up by defining a new folder “Compare HR” — inside the folder I have two files app.R (the Shiny script) and the data file sc2018_ip.csv.

The template of the Shiny script app.R is shown here.  The ui is the user interface that describes all of the sliders, radio buttons, pull-down menus where the user indicates the options.  The server is the program that actually does the R work.  If you run this file using the runApp function, you will see a blank screen since we have not programmed any user inputs or outputs yet.


Global Work

Before we write the ui and server portions of the Shiny script, we write some R script in app.R which defines global objects that will be used in the server function.  We load in the shiny and tidyverse packages and read in the 2018 Statcast data for the pitches where balls are put into play.  Also we define a variable Ptype (classifying the pitch type as fastball or offspeed) and a variable plist containing the player names for all batters who hit at least 30 home runs in the 2018 season.


The User Interface

Next we write the ui portion of the Shiny script.  The sidebarLayout and mainPanel functions describe how the output window is arranged.  In the sidebarPanel, we define three user inputs — two select lists (by the selectInput function) to choose the two players among the 30+ home run hitters, and one set of radio buttons  (by the radioButtons) to choose the type of pitch.  The mainPanel contains the graph (the plotOutput function).


The Server Part

In the server component of the Shiny app, I write a short script defining the ggplot2 graph.  The renderPlot function in the server code is associated with the plotOutput function in the ui script.  Note that the player names are retrieved by the input$player1 and input$player2 values, and the pitch type is communicated by the input$ptype variable.


Running the Shiny App

Now I am ready to deploy my app by typing runApp("app.R").  Here is a snapshot of the display that appears.  It allows me to compare any two players among the 30+ home run group.  I decide to compare the pitch locations of the home runs hit by Bryce Harper and Mike Trout.    Generally, Trout appears to hit home runs at lower portions of the zone.


If one selects off-speed pitches by selecting “Off-Speed” in the Choose Pitch Type area, one will see that Harper hit very few offspeed pitches relative to Trout for home runs in 2018.


Try it Out

There are a number of ways to communicate one’s Shiny app to others and I will describe one way.  In a folder called “Compare HR” I have two files — the Shiny code app.R and the data file sc2018_ip.csv (pitches for all ball in play for the 2018 season).   Below, I load the shiny package and download and run the zip file of the folder and contents by the runUrl function.  You should see the Shiny app in a new web window.    (By the way, if you just want the data and don’t care about the Shiny app, just download the zip file to your computer and unzip the file to find the csv dataset.)


The Code

All of the Shiny code shown above is contained in a single file app.R found on my GitHubGist site.  If you want to run this, you will need to download both the code and data from my web site

Baseball History

If you want to see another one of my Shiny examples, I wrote an app to visualizing offensive production in baseball history.  You can play with the Shiny app on RStudio’s server here and you can see the Shiny code here.  (This illustrates another way to communicate an app — upload the app to a server.)  You don’t need any associated data here but you need to install the Lahman package to obtain the season by season baseball data.

Shiny for All?

Why should you be interested in creating Shiny apps?

  • It is an attractive way to communicate R work to folks who are not interested in coding, but are interested in seeing insights from data.  Here one can learn much about locations of home run pitching by playing with the inputs of the Shiny apps.  A few years ago, one of the top awards of a Datafest competition was awarded to a team that used a relatively simple Shiny app to show their insight,
  • Shiny apps are easy to construct.  Once I had the idea, it seemed quick to get something that was useful.
  • Of course, there are a number of new functions to learn to create a Shiny script but you can copy code from examples you like and the Shiny cheat sheet is helpful as a quick reference.
  • The RStudio site provides a lot of guidance on using Shiny including a gallery of nice visualizations and several tutorials.
  • Many years ago, I wrote some web programs using Javascript for my statistics class.  Using R together with Shiny is much easier than the work I did in my Javascript writing days.  If you know Javascript and html, you can use that knowledge to enhance your Shiny app, but this knowledge is not necessary.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: