Project Report

INFO 3312/5312 - Spring 2026

Introduction

Our project is a multipage Quarto website that explains NHL shot quality through a short visual story. The main question behind the project is: what makes a hockey offense dangerous beyond simply taking a lot of shots?

This matters because hockey is a spatial game. Where a shot comes from, how far it is from the net, what angle it is taken from, who takes it, and what game situation it happens in can all affect how dangerous the chance is. Our website uses NHL shot-event data to help readers see these differences visually. The intended audience is hockey fans, beginner sports analytics readers, and students interested in data visualization. We wanted the website to be understandable for someone who watches hockey casually but may not already know expected goals or rink-based analysis.

The final product is a guided website with a welcome page, an NHL overview page, a case study comparing the Colorado Avalanche and Vancouver Canucks, an FAQ page, a report page, and a presentation page. The goal is not only to show charts, but to explain why shot quality matters.

Data and Methods

The project uses 2022–23 NHL regular-season shot-event data accessed through hockeyR. The cleaned dataset is stored locally as data/nhl_shots_clean.csv, so the website can render from a stable local file. Each row represents one shot-related event: a shot on goal, a missed shot, or a goal. The main variables used in the project include team, shooter, event type, shot distance, shot angle, rink coordinates, expected goals, and strength state.

Expected goals, or xG, is the key metric in our project. It estimates the probability that a shot becomes a goal based on similar historical shots. For example, a shot with an xG value of 0.10 has about a 10% chance of becoming a goal. This lets us compare shot quality, not only shot quantity. A team that takes many low-danger shots may look active in the box score, while a team that creates fewer but higher-quality chances may be producing better offense.

We also created helper variables to make the data easier to communicate. Shots are folded into one attacking zone so all attempts are shown as if they are moving toward the same net. This makes rink maps easier to compare. We also created categories for close shots, central shots, perimeter shots, and high-danger shots. These categories simplify the game, but they help readers understand broad differences in offensive style.

Product Design and Justification of Approach

We chose a Quarto website because our goal was explanation rather than open-ended exploration. A dashboard would have let users filter many teams and players, but it could also make the main story harder to follow. Instead, we designed the project as a guided visual story that moves readers from league-wide patterns to rink geography and then to a focused Avalanche–Canucks case study.

Our design rationale was partly inspired by the Our World in Data article “The baby boom in seven charts.” That article takes a complex topic and breaks it into a sequence of short, readable charts, where each visual answers one specific question. We adapted that model to hockey. Instead of making a dense analytics report, we created a quick informative website where each graph is framed as a question and adds one layer to the story.

The website is organized around an overview page and a case study page. This order moves from broad context to team strategy to player-level explanation.

Design Decisions

Our design decisions were guided by our intended audience: hockey fans, beginner sports analytics readers, and students interested in data visualization. Because these readers may have different levels of familiarity with expected goals, shot maps, and hockey strategy, we designed the website to feel like a guided blog rather than a technical report. The homepage framing, “Data you need to understand to become an amateur NHL commentator,” makes the topic approachable and gives readers a reason to care. Instead of assuming advanced hockey knowledge, the website gradually builds from familiar ideas like shots and goals toward more analytical ideas like xG, shot danger, and offensive style.

The overall website structure supports this audience. We separated the project into a welcome page, NHL overview page, Avalanche–Canucks case study, FAQ, report, and presentation. A casual hockey fan can follow the main visual story, a beginner analytics reader can use the overview and FAQ to understand key terms, and a data visualization student can use the report and presentation to understand our process and limitations. The navigation bar keeps these sections accessible without forcing every reader through one dense document.

Our first graph-level decision was to begin with the league-wide team style chart. Before showing detailed rink maps, we wanted readers to see that NHL teams differ in both shot volume and shot danger. This connects to a familiar hockey question: is a team dangerous because it shoots a lot, or because it creates better chances? The dashed median lines divide teams into broad offensive styles, making the chart easier to interpret without advanced statistical knowledge. We highlighted the Avalanche and Canucks because they become the focus of the case study later.

Our second decision was to pair shot volume and shot danger maps side by side. A shot count map shows where shots happen most often, while the average xG map shows where shots are most dangerous. Placing them together makes the contrast visible: the most common shot locations are not always the most valuable ones. We used sportyR because the rink background gives readers familiar landmarks, such as the net, blue line, faceoff circles, and slot area, while making the coordinate data easier to read.

Our third decision was to use the Avalanche and Canucks as a focused case study. A league-wide comparison can be useful, but it can also overwhelm newer analytics readers. By narrowing the story to two teams, the case study gives readers a concrete example of how offensive style can differ. The animated rink map shows common shot-on-goal locations and common goal locations, making team strategy more visual and intuitive. We kept the animation simple because the goal is not to recreate exact plays, but to compare offensive geography.

Our fourth decision was to end with a player-level chart because hockey fans often understand teams through players. After showing that the Avalanche and Canucks attack differently, we wanted to show that those patterns are partly shaped by individual players. The chart plots players by shots on goal and average danger per shot, while hover tooltips provide more details. We used ggiraph because interactivity lets us include player-specific information without overcrowding the chart.

Beyond the graphs, we used short subtitles, bolded takeaways, and question-based section titles to guide interpretation. The FAQ page uses expandable question blocks so definitions of expected goals, power play, even strength, slot, and crease are available when needed but do not interrupt the main story. Finally, we used a hockey-themed visual identity based on the Avalanche and Canucks color palette, including team logos and matching accent colors, so the website feels connected to the case study while staying readable.

Main Findings

The first finding is that NHL teams have different offensive styles. Q1 shows that teams vary in both shot volume and average shot danger. Some teams create many shot events but do not necessarily produce the most dangerous average chances, while others may take fewer shots but create higher-quality opportunities. This helps readers move beyond the simple idea that more shots always equal better offense.

The second finding is that shot location changes how we understand danger. Q2 shows that the areas where shots happen most often are not always the same as the areas with the highest average expected goals. This is why rink-based visualization matters. A box score can tell us how many shots a team took, but a rink map helps show whether those shots came from central, close, and dangerous areas or from wider, lower-danger locations.

The third finding is that the Avalanche and Canucks attack differently. Q3 applies the league-wide shot-quality framework to a focused team comparison. The Avalanche appear to create chances closer to the net and around more valuable scoring areas, while the Canucks show a different pattern in how common shot locations relate to common goal locations. This does not explain an entire season by itself, but it shows how team strategy can become visible through offensive geography.

The fourth finding is that player roles help explain team-level offense. Q4 shows that individual players on the Avalanche and Canucks have different combinations of shot volume and shot danger. For the Avalanche, players such as Mikko Rantanen and Nathan MacKinnon stand out because they combine high shot volume with meaningful chance creation. For the Canucks, players such as J.T. Miller, Elias Pettersson, and Bo Horvat show different profiles of volume and danger. This connects the team-level story to player behavior.

Limitations

There are several limitations to this project. First, the analysis focuses on one NHL regular season. Team style can change across seasons because of roster changes, coaching changes, injuries, and playoff adjustments. Because of this, the findings should be understood as patterns from the 2022–23 season, not permanent team identities.

Second, expected goals is an estimate. It is more informative than raw shot count, but it does not capture every factor that affects a scoring chance. Screens, defensive pressure, goalie movement, pre-shot passing, rebounds, and whether a player had time and space can all matter. Some of these details may not be fully represented in the data. This means the website should be read as a tool for understanding shot-quality patterns, not as a complete explanation of every goal or every team’s full strategy.

Third, our location categories and animations are simplified. Labels like central shot and perimeter shot help communicate broad differences, but real hockey chances are more complicated. The animated team map shows common shooting areas moving toward the net, but it does not represent exact puck paths. We made this choice because the goal was to communicate offensive geography clearly, not reconstruct every play.

Future Work and Conclusion

If we had more time, the most useful extension would be adding multiple seasons. This would let us see whether team offensive styles are stable or change year to year. Another extension would be adding a team selector so readers could compare any two teams, not only Colorado and Vancouver. We could also improve the player-level analysis by adding position, ice time, and line combinations, since player role is shaped by more than shot events alone.

This project shows that hockey offense is better understood through shot quality, location, and player roles than through shot count alone. By combining expected goals, rink maps, animation, interactivity, and accessible writing, our project helps readers understand offense as a spatial pattern instead of only a box-score total.