Many of us at InterWorks are avid sports fans, as you can see from our various blog posts and the many examples in the Viz Gallery. While these examples tend to focus a lot on football (pro or college) and various other sports, I wanted to bring a bit of hockey into this blog. What better time to do that then right before the Stanley Cup Playoffs!
Not only are the Stanley Cup Playoffs a great time to watch and get into hockey (playoff season was actually the time I became a fan), but the NHL has incorporated a bit of March Madness into their tournament in recent years. With conference realignment came the Stanley Cup Playoff Bracket Challenge. There were a couple of reasons for this:
- Now divisional foes will face each other in the first two rounds of the playoffs, breeding bitter rivalries.
- We as fans can now fill out our very own NHL bracket, much like March Madness (as if you didn’t already have enough of busted brackets).
Using Data to Fill a Bracket
Unlike for March Madness, I have some sense of which teams are contenders and which teams are not so much. Furthermore, I have a better understanding of which stats are indicators of success. I wanted to share this with others who might be hockey fans (or new fans who want to play along with a bracket challenge) and build a Tableau viz.
Much to my dismay, the functionality that I wanted to incorporate into a dashboard wasn’t readily available within Tableau itself. I was hoping to be able to select any two logos in the dashboard and show the head-to-head matchup for those two teams in the same dashboard, comparing key stats quickly and easily. Although a solution in Tableau desktop does exist, the solution was rather messy and inelegant. I opted to solve this problem another way.
Step 1: Building the Webpage
Step 2: Embedding My Tableau View
The next thing I needed to do was to embed my simple Tableau view and have it come up once the page was loaded. Using Tableau’s online JS API tutorials, I was able to easily accomplish this using the code below:
Step 3: Matching & Filtering Data
First, when I click on an image, I need to be able to pass some sort of information from my webpage to my Tableau visualization. In this case, I want to select a logo and filter my viz to show that team’s data. So, I needed to add an attribute to my images that identically matches a specific field in my data.
- I needed to target specific sheets in a dashboard.
- I needed to filter those sheets by the team a user would select.
I created a pair of functions to accomplish this for each set of sheets (right and left) and plugged them into my conditional statement that counted clicks.
Once this was in place, viola! My webpage was then filtering my Tableau visualization!
The Final Word
Tableau is a great tool for data visualization, and we often times get really excited about designing our dashboards with exciting interactions. Every once in a while, we might hit a point where what we want to implement pushes the limits of Tableau desktop’s functionality. Often times there are two ways to handle these limits:
- Push Tableau’s limits and find a solution, regardless of how janky it might be.
- Try for an alternate, more elegant solution using some of Tableau’s more peripheral features.
Now, head on over to the NHL website and fill out a perfect bracket using my viz to predict who will win each best-of-seven series all the way to the Stanley Cup!