Dabbling In Hockey Data Journalism And Interactives
Making hockey interactives (like interactive shot charts) through Tableau
I’m obsessed with online journalism and storytelling through different platforms. I especially love making hockey interactives, like the one you see above. That particular piece looked at the location of former college hockey players skating for the USA at the IIHF World Championship.
My love for digital journalism started when I was a senior at Boston University. In my first semester I took an online journalism class. With little experience in the online space (save for online writing), I listed to Michelle Johnson as she taught us to take and edit photographs and video, how to create audio slideshows and how to make engaging interactives.
I was hooked.
Initially my interactive pieces were limited to static infographics or enhanced images created through ThingLink and Easel.ly, as I combined the two to make previews of BU men’s hockey games. (I actually used all three of these to make my 2015 Princeton hockey playoff preview.) I also love the Knight Lab’s Timeline tool.
Over the past year, I’ve spent a lot of time searching through top digital tools for journalists. Yesterday I actually spent a couple of hours going through a long list and testing some of them out, especially the free ones.
Anyway, when I was back in Boston at the end of thisJanuary, I stopped by professor Johnson’s office. We chatted, and she told me there was an informative session with a representative from Tableau Public. I’d tried using the site before, but had trouble importing the data and using the software. She suggested I attend the session, so I did.
After that trip (which ended with the craziest Beanpot I’ve ever attended, a Patriots Super Bowl parade and a lot of snow), I returned home and watched all of the Tableau training videos.
I immediately made interactives featuring home states and countries of Division I college hockey players over the past three years, interactives analyzing basic data and, my personal favorite, interactive college hockey shot charts.
Tableau has a really high learning curve. I had to watch all the training videos to understand how to format the data in Excel, how to filter data and how to format the graphs. The learning curve for the shot charts was even more intensive. But if you’re serious about making interactives, it’s worth the time. Especially because there’s so much you can do with Tableau.
As I mentioned, I love making interactive shot charts. I thought it would be cool to be able to filter shot charts by player and by type, so you can see who’s taking shots from where. Are they Grade-A chances? Are they kept to the permitter? Is this player mostly missing or are the shots getting blocked?
So after the National Championship game, I spent a week learning how to make it, and then actually making it.
It turned out like this:

You can see where the shots were taken from. Color indicates the result (goal, save, block) and shape represents the type (even strength, power play). Clicking on a player name highlights that shot in the chart.

Making shot charts interactive is very tedious. First you need to upload the shot chart as the map background. Then you have to plot each shot as a point, and note the X and Y coordinates in the original spreadsheet. The screengrab above shows the plotting process.
Once all the plot points are noted, it takes even more time configuring all the specifics, including what filters to use, how to differentiate between shot types and how to set it up in the dashboard.
And it takes time to make the interactive look coherent. As you can see in the BU-PC shot chart, each player has a different number next to their name. That’s because in the spreadsheet you can’t have the same data value for the first column. So for each shot Ahti Oksanen took, I’d have to label it as Ahti Oksanen, Ahti Oksanen 2, Ahti Oksanen 3, and so on.
When I made that shot chart, I hadn’t figured out how to have one player listed and have all their shots show up.

But if you look at the Big Ten shot chart above , you see that each player comes up once in the table, and if you click on that player’s name, all of his shots are highlighted. It took a really long time for me to figure this part out, but using Tableau’s groups fixed the problem.
The biggest issue with using Tableau is having your excel sheets formatted correctly. That’s the most important step, but the rest is pretty easy to learn through the video tutorials. Once you know the basic filters and graph setups, it’s very easy to make it customizable and make cool things like an interactive shot chart.
Note: I used to manually import data, but now I go to import.io to data scrape. It’s really easy to use and has a short walkthrough while you’re data scraping.