Shiny Contest Submission: National Hockey League Play-by-Play App

shiny
#1

Unveiling the National Hockey League (NHL) Play-by-Play App!

The NHL PBP App is your #1 destination for interactively visualizing shot data for all games in the 2017-2018 NHL season. Using real-time scoring stats (RTSS) from Corsica Hockey, see all the shot locations on the official NHL ice rink embedded with your team logo, enjoy a gganimate animation of each shot, and even find out where your favorite player took all his shots.

This application was motivated by Ryo's blog post: Animating the Goals of the World Cup, BallR by Todd Schneider, and football animations by Michael Lopez on the NFL Big Data Bowl Repo

Technical Features:

  • gganimate rendered animation of all shots + animated line graph of all the probabilities that a shot becomes a goal throughout the game (please be patient as this takes a few seconds to load).
  • Using shinycssloaders package, I've added css animated loaders to all my plots.
  • Depending on game selection, I've embedded team logos on the official NHL ice rink in the animation and shot chart.
  • iframe generated webpage of Official Recap of each game
  • Using the rintrojs package, I've included a short tour of the application.

Link to shinyapps.io: https://jsonbaik.shinyapps.io/nhl-pbp/
Link to RStudio Cloud Project: https://rstudio.cloud/project/217132
Walkthrough of the App: http://jsonbaik.rbind.io/2019/02/24/hacking-the-nhl-play-by-play-app-in-shiny/
Github Repo: https://github.com/jasonbaik94/nhl-pbp


1 minute Demo:

final-overview-nhlpbp

12 Likes
Shiny Contest Winners 2019 - Full List
#2

Feature Update

  1. Access to 10+ seasons of shot data & this season (2018-2019) updated daily at 11:00AM EST
  2. Interactive Shot Chart for in-depth info(shooter, type of shot, distance from goal, and expected goal probability) using plotly
  3. Took out adjustment for puck size feature

nhl-pbp-feature-update

Throughout this update process, I learned to use crontab to schedule running R scripts, use reactives inside the server Shiny code to reactively load datasets, and embedding images in plotly graphs

Link to shinaypps.io: https://jsonbaik.shinyapps.io/nhl-pbp/
Link to RStudio Cloud Project: https://rstudio.cloud/project/217132

3 Likes
#4

Feature Update

With help of this StackOverflow answer, I’ve changed the #gganimate code and made the puck move smoother.

nhl-smooth-puck

Always appreciate the support of the #rstats community.

Link to shinyapps.io: https://jsonbaik.shinyapps.io/nhl-pbp/
Link to RStudio Cloud Project: https://rstudio.cloud/project/217132

1 Like
#5

Hi @howardbaek

The NHL animation is really fascinating. Did you actually crawl the NBA API or does it allow enough requests such that you can do it live inside the app? This was one of the main problems in my app, as the STRAVA API I used is really restricted.

Thanks

1 Like
#6

Hello @zappingseb,

I actually didn't use the NHL API since I have the raw csv file on hand. So, I simply hosted all the data on Github and used a reactive function to call each season depending on the user's selection. For current season, I use crontab to automatically upload the dataset to the app.

Hope this helps and thanks for your interest

1 Like
#7

UPDATED LINKS:

Walkthrough of the App: http://insidethetv.rbind.io/post/hacking-the-nhl-pbp-app-in-shiny/
Github Repo: https://github.com/howardbaek/nhl-pbp

1 Like
#8

App Link: https://howiebaek.shinyapps.io/nhl-pbp/

#3

Feature Update

  • Player Density Plot: Density Plot of Shots and Goals where the redder the region, the higher the density of shots (goals)
    shot-density

Throughout this update process, I learned to use stat_density_2d and draw shapes inside ggplot2 with the help of ggforce

Link to shinaypps.io: https://jsonbaik.shinyapps.io/nhl-pbp/
Link to RStudio Cloud Project: https://rstudio.cloud/project/217132