Introduction
For the final visualization project in Information Visualization, I have decided to continue my exploration of creating National Hockey League visualizations. As a former hockey player and avid hockey fan with an interest in data analytics, it was surprising to see the amount of data that is collected around hockey games to predict outcomes as big as who will win the Stanley Cup to the probability of whether a shot taken at a specific angle will make it into the net or not. Data collected from ice hockey games can give various insights including how a team’s strategy may have changed, whether their line pairings are working, and which ice hockey skills players could benefit the most from. My data visualization focuses on exploring the NJ Devils’ home game shots from 2016 to 2020. The goals for the final visualizations were to see whether there were any strategy changes over the four years, what type of shot was most popular depending on where the shot was made on the ice, and to see how they compared in shooting relative to their competitors.
Let’s face it: 2022 is the only year that Devils fans are hopeful the team will make it to the Stanley Cup Playoffs. Over the course of 2016-2020, the Devils ranked lowest in the Eastern Division of the NHL three out of the four years and were in the bottom six teams of the entire league for three of the four years, both with an exception for their 2017-2018 season. Since 2016, the team has had four different head coaches, and only two players from the 2016-2017 season still remain on the team in the 2022-2023 season. While NJ Devils fans celebrate the Devil’s recent record-breaking win streak of thirteen games in the 2022-2023 season making it the the longest in Devils history, it’s important to look at the team’s previous seasons to understand where they could have been lacking.
My initial plan for these visualizations was to create two separate visualizations featuring the Devils’ goals made and shots missed. After exploring the datasets used further for the project, I decided to create an interactive map that allows the user to explore the different shot maps of the NJ Devils home games as the main visualization. This was also inspired by various shot maps I found online as I was developing the design and style I wanted my graphs to be. There are a variety of shot maps online, for example one by The Commute Sports, that include general data on players, goalies, and teams, but I wanted my shot map to represent a specific team and period in time. In addition to the main interactive shot map, there are supporting graphics that give further insight into the NJ Devils’ performance.
Methodology
The visualizations were created using Tableau Public, a free software program used to make in-depth visualizations. In order to create the visualizations, it was important to find a good data source with enough information to create insightful graphics. The datasets used for this project were found on moneypuck.com, a free resource with copious amounts of data on hockey games starting from the 2007-2008 season. Given the website featured real-time information about who won recent games and their accurate predictions of who would win each game, the website seemed trustworthy enough to be used. Additionally, a lot of their data was sourced from the NHL records website. The shot data provided on the website initially had all shots made by teams in the NHL for that season, so it was necessary to clean the datasets in order to get the NJ Devil home games specifically.
To clean the data, I used Openrefine, an open source program designed to clean and manipulate large scale data sets. I organized each of the four datasets to contain only the home games played by the Devils, taking each dataset from having over 100,000 inputs to about 3,000-4,000 each. After filtering each dataset separately, I uploaded all four to Openrefine to combine them into a master dataset with all Devils home game shots from 2016-2020. The final dataset used for this visualization had 13,160 individual inputs, featuring shots taken by the Devils as well as their competitors from each game.
With the finalized dataset, it was important to reevaluate my initial goal of creating two shot maps. While this would provide good insight to see where on the ice had the highest success rate in terms of making a goal, I felt that it would have provided a very one-dimensional look at their games, with no insight other than what type of shot it was, whether it was a goal, miss, or a shot, and where it was located on the ice. The best course of action to fully engage with the data given was to create an interactive shot map in which the user could explore the shot maps of different seasons, different players, as well as be able to filter between goals, missed shots, and general shots on goal. The interactive map would allow for a more in-depth and personalized analysis of shots made. The first round of visualizations created included the interactive shot map, a side-by-side view of all goals made in each season by the Devils, and goals made per period each year.
To finalize my visualization before performing a moderated user test, it was important to provide a background image of a hockey rink to give proper context for where the shots were made. I used an image from War on Ice, a popular hockey statistics blog which has since been shut down, since the x- and y- coordinates provided by Moneypuck were found using a strategy inspired by War on Ice.
The User Test
With the three visualizations, I performed a moderated user test with three participants. The participants were between the ages of 17-22 and had limited to moderate knowledge of the sport of ice hockey. The test featured four questions:
1. Find three different players of your choice and look at their shot maps. Were you successful, did you run into any issues?
2. Make a shot map featuring the goals from the 2017 season. Were you successful, did you run into any issues?
3. What other information, if any, would you like to see when exploring the shot map?
4. Were there any features that made it difficult to understand the information portrayed in the shot map?
The goal of the usability test was to find any problems in the interactive visualization and make sure information in all graphics were clear, accessible, and contained enough relevant information to draw conclusions from. Two tests were performed in person, and one was performed over Zoom, each taking around 15 minutes to complete. All three users were successful in completing the first two tasks, but two users ran into similar issues in creating a shot map for specific players. They mentioned that some players had empty maps, which could be due to some players included in the list being from away teams. The users liked how the shot map color scheme was categorized by color, as it allowed them to see what type of shot was used the most in certain locations on the ice. One user did mention, though, that it was difficult to see what type of shot had the highest success in terms of scoring a goal and wished there was a way to depict that either on the shot map or in a separate visualization.
In terms of overall design, the users liked the features that could be used to personalize the shot map including selecting the different year, the dropdown menu with the player names, and the ability to select/deselect whatever shot event they did not want depicted. They thought the shot map layout was clear and easy to understand, and thought the supporting visualizations complimented the shot map with information that increased understanding and impact, with one user stating, “I like that the other diagrams had similar information but prove different points”. The overall feedback was generally positive, and achieved the goals set out prior to performing the test. The conversations and feedback from the users provided enough insight to make the following changes to my overall set of visualizations:
1. Replace player filter with shot type filter in interactive map
2. Provide away team statistics in supporting graphics to include more context and make for easy comparison
3. Create an additional graphic that includes the most successful shot types
Rather than including player names in the interactive map, I decided to replace that filter with the ability to filter through the shot maps, since it was more relevant to the initial goals set out for making the visualization. While being able to see a specific player’s shot map is interesting, the goal of this project is to see which shot types are most popular, which had the most success, and their use on the ice.
Analysis
The first and main visualization is the interactive map featuring all home game shots taken by the Devils from 2016-2020.
NJ Devils Home Game Shot Map 2016-2020
Supporting Graphics for NJ Devils Home Games
Along with exploring the individual player’s shot maps, the user can also filter through the different events (goal, shot, or miss) to understand where these events may have taken place and what areas on the ice were most popular for each event. Additionally, the user can toggle between the different years to see how the shots may have changed.
In Figure 1, shots from the 2019-2020 season are featured. This specific shot map features fewer data points in comparison to the others since the season was cut short due to the pandemic. Through the shot maps, it is clear to see which shot types are used depending on where the player is on the ice. Tip, wrap, and back shots seem to be very condensed by the goal, while slap shots are most prominently used between the top of the circles and the blue line. Tip, wrap, and back shots are quick and deceptive shot styles, making them a good option when the player is close to the net, but can easily be blocked by a goalie and require good coordination to be successful. From where the slap shots are located on the map, this is probably a very popular shot style for defensemen, since they need to stay at the top of the zone in case their opponent manages to take control of the puck and get it out of the zone. Slap shots require a lot of power, and are typically used to either try to score or keep the puck in the zone, which is a defensemen’s main priority in the offensive zone. Snap and wrist shots seem to have more general usage, since they are dispersed pretty evenly throughout the offensive zones.The least used shot style is the deflection shot. This could be due partly to its complicated nature and intense precision needed to make the shot.
Looking at the shot map as a whole, there is a light trend with the shots making a subtle “C” shape starting from the goalie’s net and moving outwards towards the corners of the zone. This is most likely due to the different plays the Devils were using, and could be that the areas along that “C” have the most opportunities for scoring due to the angle at which the player is in relation to the net. Now that we’ve seen the prominent locations of different shot types on the ice, let’s take a look at the most successful shot types in terms of scoring a goal.
This graphic follows the same color scheme featured on the interactive map to make it easier for the user to understand and clearly differentiate each shot type. As you can see in Figure 2, snap and wrist shots are the most successful shot types for the Devils. This is most likely due to the high number of times these shot types were used in comparison to the others, but also gives insight into the Devils’ strategy or lack thereof. The lesser used shots happen to be less successful, but also are the shots that require more skill, coordination, and teamwork. In their past seasons, the Devils were playing more for survival rather than to win the game. When in a stressed environment, they resorted to using more general shot styles rather than playing with strategy, which also allowed for more independent play from the players rather than working together as a collective. Diving deeper into goals scored, let’s take a look at the most popular period for Devils to score a goal and how their opponents may have played into that.
In Figure 3, the Devils are depicted in red to match their logo and the opponents are grey. In the first period, it is pretty evenly distributed between the opponents and the Devils for who scores the most goals. 2017 was the Devil’s most successful season out of the four, which can explain the higher gap between goals scored. In 2016 and 2019, there is a large jump between the first and second period for the Devils. This is most likely them realizing they need to kick it into high gear after most likely being behind in the first period. In the third period, almost every year the away teams score more goals than the Devils; this could be due to them getting tired by the end of the game, as simple as it sounds. Overall, the Devils tend to score the most goals in the second period, which could be the result of them realizing they need to play better in order to beat their opponents, but they quickly lose steam by the third period.
For our final graphic, we will be looking at the goals scored by the Devils vs. their opponents, which gives insight into how the Devils were playing strategy-wise.
In Figure 4, the shot maps feature the goals from the Devils and their opponents. Let’s break this down a little bit. When the shot map more clearly represents a “C” shape, it shows that the team was using all players on ice to their advantage and working as a team in order to score a goal. In 2016 and 2018, the Devils were the worst in the Metropolitan division, and the shot maps show a very little resemblance to the “C” shape. What’s worse is that their opponent’s maps were similar, meaning they most likely dumbed down their playing to match the Devils. The goals scored by away teams are also dispersed farther from the net, showing the ease of scoring against them in these two years. In 2017 and 2019, the better seasons of the four, there is a closer resemblance to a “C” but still show the away team’s ability to score farther from the net.
Overall, the graphics show two main weaknesses that Devils faced through 2016-2020. First, the shot maps show they were not focusing on strategy in order to play the game, but rather just shooting on the net whenever they had the chance to. Their second weakness was the inability to use more complicated shot types, which could have made them more successful if they worked as a team. These two worked hand in hand to limit the success of the Devils, and we can only hope that they have learned from this (and that their new head coach, Lindy Ruff, is coaching them better!)
Reflection
Overall, I am very happy with my visualizations, especially the interactive map since I did not intend nor know how to to make an interactive visualization at the beginning of this project. I feel my design choices were made to clearly display the visualizations created, and all graphics made go together to paint a picture of the Devil’s performance. Additionally, I feel like the goals I set for myself at the beginning of this project were met. The process to make these visualizations was not the easiest, as I had either Tableau Public or Openrefine shut down on me multiple times, but alas I persisted! I am also very happy that I was able to learn a few more things about each software that I did not know prior to this project and brush up on my skills. I am afraid, due to the size and detail in the dataset I used, that I may have missed some categories that would have provided some more insight into the Devils’ performance. In the future, I do think I will create a map featuring specific player maps since I decided against it for the purposes of this project, and also take the opportunity to explore more parts of the data set that I may not have paid attention to during this project.
References
The Commute Sports. 2020. “NHL Interactive Shot Map.” Tableau Public. https://public.tableau.com/app/profile/thecommutesports/viz/NHLInteractiveShotMap/Dashboard1.
National Hockey League. 2016. “2016-2017 NHL Hockey Standings.” NHL.com. https://www.nhl.com/standings/2016/division.
National Hockey League. 2020. “Lindy Ruff | New Jersey Devils.” NHL.com. https://www.nhl.com/devils/team/coaching-staff/lindy-ruff.
National Hockey League. 2022. “NHL Hockey Standings.” NHL.com. https://www.nhl.com/standings/2022/division.
Tanner, Peter. 2016. “Download Datasets.” MoneyPuck.com. https://moneypuck.com/data.htm.
War On Ice. 2014. “Make your own NHL rink plot in R.” WAR On Ice: The Blog. http://blog.war-on-ice.com/make-your-own-nhl-rink-plot-in-r/index.html.
Hall, Meghan. 2019. “So You Want to Make a Hockey Data Viz.” Medium. https://medium.com/nightingale/so-you-want-to-make-a-hockey-data-viz-dda7b347f117.