Photo by cottonbro

Building a Web Application Interfacing the NHL API in R with Shiny

A brief discussion of the process of making a desktop hockey data visualization application with Shiny.

Christian Lee
Published in
3 min readApr 2, 2022

--

Outline

  1. Rationale
  2. Current features
  3. Upcoming features
  4. Discussion
  5. Code and references

Rationale of building the app

There were three main motivations behind this project. First, I wanted to see for myself the capabilities of Shiny applications and the process behind building one. Second, I figured it would also be a great way to share data visualizations and allow users to interact with plots. Third, I wanted to test the nhlapi R package created by Jozef Hajnala. Previously, I have outlined the process of scraping NHL data and I wanted to see how that compared to interfacing the API directly.

Current features

The app currently has three main pages:

Live player stats

Example figure displaying live NHL player stats from https://calee.shinyapps.io/hockeystatsapp/

This page showcases a radar plot comparing updated season totals for two user-selected players from a list of 40 skaters, the “top” 20 forwards and 20 defensemen. This list will be expanded in the future, but it is currently restricted as to maintain adequate loading speeds. Below the plot is a table of results where users can toggle between season totals, per game, or per 60 min stats.

Live team stats

Example figure displaying live NHL team stats from https://calee.shinyapps.io/hockeystatsapp/

This page allows users to select the X-axis and Y-axis variables for all 32 NHL teams with updated season totals. Currently, points are colored by their division rank. This plot is also wrapped using ggplotly, such that hovering over the points reveals more information.

Blog

Gallery of blog posts from https://calee.shinyapps.io/hockeystatsapp/

This showcases and links to articles posted here on Medium at hockey-stats.

Upcoming features

  1. Live-game stats
  2. League leader visualizations
  3. User-selection of a specific season(s) and/or season-ranges (currently only 2021–2022)
  4. Expanded player lists and goalies

Discussion

Shiny itself is intuitive and is a great visualization tool. Of note, deployment is extremely straightforward and hosting is also free with basic accounts. This component was completed in a matter of minutes.

As for challenges, the application does not scale perfectly on mobile. Considering I only tested the app on two laptops throughout the development process, it still looks decent on other devices. This is an area that will require more attention in the future and likely some more mobile-friendly design.

The nhlapi R package is user-friendly and great for accessing basic player and team data. At times I just had to write a couple of special extraction functions to access nested data. It is faster than scraping data and has the benefit of efficiently updating in real time. However, the latter has the benefit of being able to see data before pulling it and not limited by documentation.

Overall, building the application was an enjoyable process and I look forward to incorporating more features in the future. Any and all suggestions are welcome!

Code and references

Code is available here.

References

nhlapi by Jozef Hajnala.

Shiny from RStudio.

--

--

Christian Lee

Medical student. Computational biologist. Sport stats enthusiast.