With Super Bowl LI just a few days away, this article will expand on the Visualization lessons from my previous article, “Predicting Super Bowl LI: 4 Quick Lessons in Data Visualization (Part 1)“, to include my 5 rules for building dashboard visualization. Our ultimate objective is to use visualizations to help us predict the results of future Super Bowls. With this in mind, I have assembled 10 methods for predicting the Super Bowl. The methods range from the practical (the Vegas pick) to the ridiculous (Chicken Wing sales). I want a dashboard that can show me any particular Super Bowl, the outcome and how our predictive methods faired.
If you followed my previous article, we ended with this visualization that displays the results of all 50 Super Bowls:
While this chart is packed with information, it’s only a starting point for our analysis.
To look at a single Super Bowl in depth, the best option is a dashboard with a series of charts and indicators. This visualization should give us basic information at a glance (teams, time, date, venue) plus the results of the game. Simply put, we want to know who played, when and where they played, and what the outcome was. Because the ultimate goal is predictive analysis, we will add a few basic team statistics and finish it off with indicators telling us how varying prediction methods worked.
Lesson 1: Just say it – some information doesn’t need charts
Our dashboard needs to convey some basic information for which a chart just gets in the way. What Super Bowl are we looking at? When and where did it take place? What was the attendance? How about the weather?
We could show a map of the States with a dot for the city, a calendar for the date, maybe a little graph showing attendance. All of these ideas would make the dashboard builder feel clever while actually obscuring the key information. One change I might make would be to show the weather as an icon. This would tell the weather just as effectively with a little added impact. The simple rule is if a chart or image doesn’t add impact, or clarity, don’t use it.
Lesson 2: Don’t get too fancy
This is a corollary to lesson 1; Don’t add extra features, fancy fonts or pictures that distract from the objective. The objective is to convey the necessary information as quickly and easily as possible. Think about it in terms of the dashboard of your car, you want information at a glance. Wallpaper is out right away. It only obscures information. I also chose not to use logos. To a Green Bay fan this logo is instantly recognizable. Most NFL fans wouldn’t have an issue either. But to anyone not well versed in the NFL, this just presents a puzzle. What does the G stand for? Our dashboard needs to convey team and city instantly, in this case “Green Bay Packers”. Adding logos might lead to copywrite issues and there are not standard logo sizes. Differing logo sizes are a design challenge and a distraction. I’ve also chosen not to use logos for the Super Bowl name and stadium for similar reasons. Here is the top of our dashboard with header information, teams and results:
Lesson 3: Be careful with color
Color should be added only when it has a specific purpose. Our dashboard, so far, almost has too much color for my liking. But, everything is there for a purpose and adds to the viewer’s ability to get information at a quick glance. The one dubious use of color is the temperature. One of the predictors I dabbled in is game day temperature, though I can’t say what the results were yet. This is why I choose to highlight warmer temperatures in red and cooler temperatures in blue. It works though because nothing else in that section is highlighted with color.
I chose simple red and green to show scores. Winning team is always on the left, but the green/red gives the score a bit more impact. Adding color to the quarterly scores adds meaning and gives a sense of the flow of the game. Team names are highlighted in color to tie back to the all-in-one chart presented above. Everything else is in black.
Color choice is also important. As noted above, the team colors match the all-in-one chart. The colors for that chart come from the official NFL team colors. The Green Bay fan mentioned above should be able to look at that chart and see that his/her team won the first two Super Bowls with a single glance. Red, green, yellow are easy choices to convey meaning as are red/blue for temperatures. As a general rule, I try to keep gradients to no more than three colors otherwise we lose meaning. If you have to use more than three, keep the color progression in line with the rainbow: red, orange, yellow, green, blue and violet.
Lesson 4: Use the simplest chart possible for each task
It’s sometimes difficult to keep to this rule when there are new charts and visualizations every day. But, again our purpose is to convey information quickly, not show how we’ve mastered work clouds or heat map charts. I’ve read entire articles about how useless pie charts can be, but often enough a pie chart shows exactly the information we want to see. Warning, there are pie charts ahead. Sometimes a combination chart, with bars and lines on the same chart is very effective, other times it can be distracting and confusing. Too many elements and our dashboard no longer conveys information at a glance. Single indicators are great when we just want to say right/wrong or good/bad. I also like simple, color coded triangles or arrows. Green is good, red is bad, black or yellow is neutral. Point it up if the data is rising, down if it’s falling. Rising profits are green arrow up. Rising costs are a red arrow up. It’s a simple as that.
Here’s the rest of our Dashboard:
I have also included a PDF version of this dashboard for all 50 previously held Super Bowl Matchups You can downlod it here. Super Bowl Predictors compared 50 years
Lesson 5: Use clear sections and white space
Our dashboard is divided into four quadrants for clarity. Basic information in the upper left, game results at the upper right. Predictor indicators are on the lower left with team records on the lower right. The top half is all about the game, the bottom half is telling us how effective the predictions were. Everything else is white space. The idea is that our viewer can consume this dashboard with one glance at each section.
When I build a dashboard, I keep words and descriptions at an absolute minimum. I will add what information is needed as tool tips. This facilitates one-time learning without cluttering our design with information that is no longer needed once learned. I’ve also added a few extra facts and indicators where pertinent. For the Season and Super Bowl records, I recognize that for some viewers seeing that the Panthers had a 15 and 1 record is more instantly meaningful than a mostly green chart. Similarly, although there is an indicator to show which side of the Vegas spread the game fell on, I also included the actual spread.
Enough dashboard lessons, let’s get to Super Bowl predictors
What follows is a brief description of each of the predictors and how each is shown on the dashboard:
- Vegas: the Vegas pick for the game. If the indicator is green, Vegas picked right.
- Spread: the Vegas spread for the game, probably should be a negative. If the Vegas indicator is red, this will also be red, otherwise it indicates if the winning team beat the spread as well.
- Madden: Prediction from the Madden NFL football video game. Green means Madden got it right.
- Chicken Wings: The story goes the team city that eats the most wings usually wins. Green means the wing sales predicted correctly
- SB Appearances: The team with the most experience at the Super Bowl should win. Green means it did.
- Last SB Win: Green indicates the last time the winning team played in a Super Bowl they won. Red means they lost their last Super Bowl and yellow means this was the team’s first Super Bowl.
- Last SB Loss: Green indicates the last time the winning team played in a Super Bowl they lost. This is the exact opposite of the indicator above. I included it because research shows that it is a better indicator than #6
- Season Record comparison: The team with the best season record should win. Green means they did.
- Super Bowl Record comparison: The team with the best Super Bowl record should win. Green means they did. For this predictor, having a Super Bowl record, even a losing one, beats not having a record at all. Yellow means the records are equal or neither exists.
Note: a yellow diamond for any predictor indicates no prediction was made or the prediction was inconclusive.
In Part 3 we delve into visualizations that will lead us to the best prediction methods and to a Super Bowl prediction.
If you have questions please feel free to leave a Comment and I will do what I do best, provide answers.
Most importantly, look for Part 3 of my analysis on Super Bowl LI.