So You Want to Make a Hockey Data Viz?
As the 2019–20 NHL hockey season kicks off, Tableau data-vizzists (data visualizers? data viz artisans?) Meghan Hall and Sean Tierney took some time to discuss how they got started with visualizations in hockey, their processes for creating interactive charts, and what they see as the future of data visualization for the NHL.
Sean Tierney (ST): What’s your origin story? How did you get involved in data viz with hockey?
Meghan Hall (MH): I’ve been a data viz fan longer than I’ve been a hockey fan, actually, since I do a lot of data viz work in my day job. I came into the hockey world analytics-first, which I don’t think is a very common experience, so when I started to get involved with that community, data viz was a really clear entry point for me. I was a beginner in hockey analytics (and still feel that way most days!), but I knew I could do the visualization part. What about you, how did you get started?
ST: My origin story goes in the other direction — I was a hockey fan first, collecting hockey cards and studying stats for as long as I can remember. Eventually, I found advanced stats sites like Extra Skater and became really interested in how new stats offered deeper ways of understanding hockey. As I began digging through analytics, I quickly stumbled upon Dom Galamini and Emmanuel Perry, both visionaries in terms of stats and visuals. Dom was using Tableau, and Manny recommend the tool as a great way to visualize stats, so I downloaded the program and was hooked. Through tutorials, inspiration, trial-and-error, and experimentation, I feel I’ve developed a lot of viz that can be useful for condensing large amounts of information into digestible stories, both static and interactive in nature.
MH: Okay, let’s start with a super broad question. What do you think makes a good hockey visual?
ST: For me, I think the meaning of the viz should be fairly immediately evident. The point of a data viz is to communicate complex information in an easily understood way. Many hockey visualizations have layers that allow users to drill down and find deeper understandings, but a basic point should be communicated upon initial viewing. One example from my own work is the Shot Maps I create using data from Moneypuck. In the example below, I think a few pieces of information are clear on first-view: Alex Ovechkin plays for the Washington Capitals, he takes a lot of shots, scores a lot of goals, and is pretty fond of his slapshot from the left faceoff dot. After that initial wave of insight, there are ways to interact (e.g., choose a different player or team, highlight specific shot types, view the expected goal trends-over-time pane in the bottom-right of the viz), but the most important thing for me is that the basics are clear from the outset. What do you think makes for a good visualization?
MH: I totally agree on the first point: I think it needs to have a clear purpose. I see too many charts or dashboards that are trying to show too many things. It’s easy to reach that point when you’re brainstorming and just throwing things in, but it’s important to include only what’s essential to your point; otherwise you create this weird “Frankenstein” of seemingly disparate information. I also really like to see details about where the data came from and how things were calculated. I saw a graph recently that referenced “offensive percentile,” for example, in reference to hockey, and I had no idea where that came from. As you can see in the example below, I like to give a lot of details on the data and give people links to even more information.
ST: To that extent, I think it’s really about striking a balance between keeping your purpose clear with a viz and also giving your audience credit for being savvy enough to understand what’s happening. I’m a big fan of the work you do because you create great charts that give your viewers clarity and the option to dig deeper into the data too.
MH: You have so many great dashboards out in the public sphere. When you decide to make one of those dashboards, what sparks that? How do you start, and what’s your process like?
ST: I actually have several set templates now that I update daily. But when I’m starting something new, I enjoy getting data into Tableau and experimenting. I ask myself over and over, “If someone didn’t know anything about this topic, would they understand what they’re looking at?” That usually guides my early process in selecting view types and which pieces of the data to include and emphasize. I’m also stuck on a mental loop of “a picture is worth a thousand words.” I aim for dashboards that are visually “clean” — I don’t think that’s the best or only way but it’s the kind of thing that motivates me.
MH: I always like to start on paper, especially if I’m building a bigger dashboard or a set of connected pieces. It’s easier for me to sketch my ideas out that way and experiment with different chart types. By the time I open Tableau, I usually have a pretty good idea of what I want my graph or dashboard to look like. There’s always a lot of development and iteration, of course, but it really helps me mentally to start on paper. And yes, I completely agree with you about the main question: “If someone didn’t know anything about this topic, would they understand what they’re looking at?” It’s easy when you’re deep in the weeds, focusing on the details, to forget about the important point, and then you completely lose the forest for the trees.
Here’s another interesting question about coming up with new visualizations — when creating something new, how do you determine the purpose of your viz?
MH: This can be tricky! It usually comes down to whether you want something to be explanatory or exploratory, and I often have both within the same dashboard.
For example, in my goalie pulling viz, I have some explanatory sections, like the one above, where I’m trying to explain something very specific and show a trend. And then I also have exploratory sections, like the one below, where the reader can select a team and examine things on their own. This is an essential piece of sports viz because every fan always wants to see how their team is doing compared to everyone else’s!
ST: I’d just like to echo your answer on this one. I think the constant debate in creating a new visualization is that decision between exploratory versus explanatory. In your work, you always combine a bit of both — options to explore with filters along with explanatory notes to frame the user experience. I think the beauty of interactive data viz work is the ability to do both of these jobs at once; highlighting explanatory notes while offering users the ability to do a little data exploration too.
MH: How then do you specifically tailor your charts for your users?
ST: I like to provide options for fans of individual teams. A lot of the Twitter engagement I’ve enjoyed over the past few years has come from fans who want to know everything about their particular team. I always include team-specific filters, either with drop-down menus or logo filters, so that users can drill-down to the team level as quickly as possible. I think this helps facilitate entry into the data by allowing fans who watch their team play to check data for just their team first before looking at league-wide results. Something like this viz that shows the rates at which players take shots versus the rate at which they pass to their teammates for shots:
MH: This is probably a topic for another article, but in general, the public’s adoption of analytics in hockey has lagged behind in comparison to other sports. Data viz can be a fantastic gateway into “advanced” stats, in my opinion, and I always keep that in mind when designing my viz. That means I stray away from terms that someone might not know (e.g., I always write “shot attempts” instead of “Corsi”), and I try to include lots of explanatory text. I link to everything in my graphics, whether it’s a data source, a page that has a more detailed explanation of what I’m talking about, or a place where I got my inspiration, and I try to spell everything out as meticulously as possible. I remember that when I was first getting into hockey, I would see terms like “FF/60” and struggle to internalize what that meant, especially on the fly. Writing out “Rate of Unblocked Shot Attempts Per 60 Minutes” does not take much more effort, and it’s much more accessible. The greatest compliment someone can give me is when they tell me that they learned something new about advanced stats when looking at a viz of mine.
ST: I see this as one of your most important contributions around #HockeyTwitter — that ability to bridge new fans into the analysis by offering links, explaining new terms, and keeping the content accessible to all levels of users whenever possible.
MH: Thank you! You do a great job with it, too, I really enjoy how you often split your scatter plots into quadrants, like in the example above, to give the user a quick guide as to what the numbers mean and how they translate into results as well as a baseline context of how to interpret those results.
ST: Creating strong, original visuals from scratch isn’t an easy task, though, and sometimes you gotta just catch a burst of inspiration from an external source. Are there specific places or people that you look towards to get your ideas and find that inspiration?
MH: Is it cheating to say you? There are a lot of people doing great data viz work in hockey, and you’re at the top of my list, I love seeing how you interpret data!
ST: I’ve decided it isn’t cheating because I’d like to say you as well [editor’s note: this is definitely cheating]. My favorite part about the way you approach data in sports is that you offer explanations and clearly flowing “stories” within your viz. For someone new to the sport, it would be easy to catch on and follow the story your visuals tell.
MH: Thank you! Some of my dashboards result from talks that I’ve given, and even for the ones that don’t, I try to make sure that the flow of information matches how I would present that data to someone in person. For example, I always start with broad, league-wide trends and then drill down to team-specific results or particular aspects that I’ve investigated within that trend.
As for inspiration outside of hockey, I often browse Tableau Public and #MakeoverMonday, just to see how other people approach different kinds of data. Once you start looking for it, data viz is everywhere. Just the other day, I saw a graphic in the New York Times that included a basic top 10 list of universities with a particular metric, but you could also make your own selection and see where that university was ranked compared to the top 10. It was a neat feature that they presented in a really nice way, and I immediately added something similar to a dashboard of mine.
Also, I’m a little embarrassed to admit this, but I often get inspired by bad data viz too. If I see interesting data presented in a less-than-ideal way, I can’t help but stop and think about it for a few minutes to come up with better alternatives in my head.
ST: I also like to dig through non-Tableau graphics to see how those ideas might work in Tableau. Excel-based tools, statistical projection visualizations at fivethirtyeight, and Dom Luszczyszyn’s work at The Athletic all inspire me to think about new ways to visualize sports data.
MH: Okay, we’ve held off long enough. Let’s talk tools. You do nearly all of your viz work in Tableau, right?
ST: Tableau has such robust functionality that I create the vast majority of my data viz there. I’m also a fan of using Excel/Google sheets in certain cases for shared forms (like my WAR Lineup Projection Tool) that allow others in the community to interact with the “visual,” but I feel that, ultimately, Tableau offers the best blend of data analysis function with beautiful dashboards and charts that can be shared publicly.
MH: I agree, I do almost all of my viz in Tableau. Sometimes I move over to R; ggplot is really powerful, but I just haven’t spent enough time with it that I can make custom graphs and charts as easily as I can in Tableau. I do use R for all of my data analysis, though. And I know a lot of people do some really cool things in D3.js, so I’d love to learn that someday too.
ST: You mentioned that you got into hockey analytics through data visualization. How has your viz evolved over time? What are some of the things you’ve learned over that span?
MH: My biggest evolution has come mostly in design. I’m constantly trying to make everything cleaner and clearer, both in design and in purpose. Previously, I used to really limit the amount of explanatory text that I used, for reasons that aren’t entirely clear to me reflecting back, but now I include a lot, just back to the earlier point on accessibility for a broad audience. My design used to be a lot more scattershot and inconsistent as well, but I’ve now settled into a distinctive “look.” That is, I always use the same font, and as anyone who has ever seen any of my data viz would know, I always use the same color pink as an accent color. It’s something that I hope helps to establish a consistent “connective tissue” across my various data viz products. My dream is that my style of viz is recognizable, even if someone didn’t see my name right away. What about your viz evolution?
ST: Yep, a big focus for me has been in improving the clarity of design. Through this new season, I’m also planning to re-introduce game charts, which offer a post-game look at which players controlled the flow of play in each game. Recently, when I revisited my work from a couple of seasons ago, I wasn’t happy [editor’s note: is anyone ever, really?] with my font choices, the use of grid lines, etc. I think for anyone working with data viz, it’s a process over time of making better views and, much like writing, a data viz practitioner has to find their own “voice.” A distinctive style goes a long way in establishing a consistent message for your audience.
MH: How do you recommend that someone start finding that voice and get involved in hockey data viz?
ST: The best advice I received early on was to “do your homework.” For hockey data in particular, the literature is manageable. There is even a repository of research indexed over at Meta Hockey. Reading the work that’s been done is important for finding niches in the data that have yet to be explored, finding understandings that need to be updated and challenged, and identifying voices in the community who can offer assistance. My experience with the hockey community, specifically #HockeyTwitter, on the data and visualizations side is that people there are willing to field questions, offer help, and point newcomers in the right direction to get started in hockey data.
MH: Great point about doing your homework. As I mentioned earlier, I’m fairly new to hockey analytics, so I still find that I’m coming across new topics (to me, at least!) on a daily basis. Whether that’s on Hockey Graphs or other sites that tend to publish analytics-focused work like The Athletic or Broad Street Hockey, there’s a ton of great stuff out there. Reading the canon will familiarize you with both the current state of hockey research and the quirks of working with hockey data (e.g., the location listed for a blocked shot is the location of the block, not the shot!), as well as, like you mentioned, hopefully reveal new and interesting questions to explore. And the people in this community really are so helpful.
ST: Alright, to wrap up, what’s been keeping you busy, data viz-wise, this offseason?
MH: I’ve been doing a lot of offseason tidying, mostly. I overhauled one of my main dashboards, where I track when goalies get pulled, with some new data and a new style, and I did the same for my project on power plays. I also published a viz to go along with a presentation I did on the penalty kill.
Additionally, one interesting challenge I’ve taken up is making sure that all my dashboards have a mobile-friendly version, since the newer versions of Tableau make it really easy to develop separate dashboards for different device types. I want that to be a standard going forward because virtually all of us are on our phones all the time, and it’s annoying to open a data viz that isn’t able to be viewed effectively on a small screen. That’s been a fun task, and I hope to get better at designing dashboards for mobile accessibility as I continue. What about you?
ST: For me, I’m really focused on some interactive roster projections for teams and am working to include standings projections, all within one viz (have a look for yourself here):
The tricky part with managing a “living dashboard” is keeping current the data pipeline which feeds into the dashboard. But, overall, I’m pretty pleased with the ability to get a snapshot of the entire NHL at a glance, with lots of extra details available for users who hover over different areas of the viz to uncover unique narratives for themselves.
MH: So quick aside there — what’s your process for maintaining a data pipeline? I run into that issue as well, and I usually update any live visualizations every week or so.
ST: It’s a great question. Because of the daily work I do, I’ve been tempted to automate processes for downloading data in the past. Ultimately, I have resisted that urge and instead manually update many of my visuals daily. While time-consuming, I think it is important that I’m able to correct any issues (e.g., data outside set axis ranges, new player names that do not appear) by manually checking my work each day. It’s certainly not the only way to do it but I really enjoy being connected to work I produce in that way.
MH: Do you have any big plans for projects you want to tackle next season? I’m still waiting for some inspiration to strike, personally.
ST: I’m really excited to see if the public is granted much access to the tracking data that the NHL has discussed. It’ll be a true test of streamlining huge amounts of information into digestible visuals if the NHL decides to roll out player and puck tracking. It’s exciting and fairly difficult to prepare for in advance without knowing how the league will structure its data. Can’t wait to hear more on this!
MH: I’m excited to see the new data we get, too, but I’m trying to temper my enthusiasm a bit because I feel like it might be a while until we see any actual data. And from what I’ve heard, the dataset is quite large, since it tracks the location of players and the puck, so I’m very curious to see which aspects or transformations of that data we might eventually get access to. What kind of viz would you be excited to create with tracking data?
ST: Among many other things, I think it will be great to have access to passing data and skater routes. I think of the incredible data access in the NFL right now via Next Gen stats, which allows for tracking many types of patterns we just don’t have the capacity to chart out in the NHL…yet. Imagine a chart like the one below for Baltimore Ravens quarterback Lamar Jackson but, instead of Jackson’s passes, we could see details on Carolina Hurricanes defenseman Jake Gardiner’s stretch passes as he moves the puck from the defensive zone into the neutral or offensive zones.
MH: I love that example. I can’t wait to see what new insights people are able to create with the new data — personally, I’m hoping for some advancements in measuring defensive ability — and of course, to see what kind of new viz we are able to conjure up as well!
Regardless of the specific tool being used, whether it’s pivot tables in Excel, interactive forms, Shiny apps in R, or dashboards in Tableau, the power of data viz in sports stats has become apparent. With ever-increasing streams of data becoming available to the public, coupled with a growing appetite for stats among fans, media, and teams, tools for processing and communicating insights from that data have become key parts of the analysis landscape. Sports data visualization is here to stay, and the best part is that the communities around many data viz tools are vibrant places with numerous sources of inspiration and help for those looking to wade into the field.
You can reach out to Meghan Hall or Sean Tierney on Twitter for more.
