Join Bill Shander for an in-depth discussion in this video How to think interactively, part of Learning Data Visualization.
So you've decided to create an interactive experience which is good, as I said I think you should pretty much always do it if you can. But if you're new to interactive, it can seem like a new world, you know, how to think about being interactive versus creating static experiences if that's what you're used to doing. But you probably use interactive technology all day everyday, right, your phone, you're on the web all the time. You're on Facebook, et cetera. So the leap really isn't that huge, if you think about as a user. In this movie, we're going to cover a few ways to take the information you have and sort of flip it on its head a little bit, think interactively and create productive experiences for your audiences.
The first rule in thinking interactively, is don't think interactively, so it sounds a little counter intuitive but I recommend that you don't think about features and buttons and actions at first the first thing you want to do is look at your data. Think about the story that you want to tell, think about your audience. All things we talked about at the beginning of this course. So thinking interactively really is sort of like a of this entire course. The of the whole design experience. We are just sort of taking it to another level. Creating ways to explore more knowledge for your users through touching and clicking and rolling over.
Really you want to go back to the basics in thinking about your design in general before you think about features. A good to start, is to think about, when I look at the data I have, what's missing? What's not there that I wish I could see? And I don't mean what's literally missing, but what's not available to me? What's not easy to parse? This is where I usually start to think about features to add to an interactive experience to expose what's missing. In addition to what's missing, what can't I see? It may be there, but it's sort of like a forest versus the trees issue.
Can I bring more to the surface, and showboat the forest view and the trees view for my users? Interactivity is great at shedding light on what's hidden or occluded in your data. So here's an example of an interactive experience that I created. And I'm going to start off by admitting to you that I did this in exactly the wrong way. I did it completely backwards. I followed none of the advice of the rest of this course. I didn't start thinking it through. I didn't plan it. I didn't think about my audience. I didn't design it. I didn't go through the whole process. I literally started coding first.
Now, that's the wrong way to do this except that's it's a great way to explain how to think interactively because this was a pure experience of looking at the data I had, thinking of features and how to release the story from that perspective. So I don't recommend this. But I'm going to talk about it that way to help you think about interactivity. So what we're looking at is one dot for every single team in the NHL, the National Hockey League, and every year of play. So as you can see a couple labels here, the 1929, 1930 Bruins are here.
We're looking over here at the 1995-96 Detroit Redwings. So we have about 1300 data points in this one bubble chart. Now when I first created this, I'm going to scroll down a little bit so you can see, there were no filters at the top. And if you can imagine, there were no labels, and no colors, and no legend, no nothing. I just had an access and a bunch of dots on the screen. This is the data that I had available to me. So as I mentioned, there are 1,300 or so rows of data, one for every season for every team.
And back up to the top here, you can see I had a code for the team, season, how many games they played, wins losses ties, points that they got for the season, and just for point of reference, you get two pints for a win, one point for an overtime win or a tie, and the points percentage is how I'm measuring, quote unquote, the best team in hockey. And that is the total points a team won, divided by the total that they could've won if they'd won every single game. And we also have a couple of other data points here, one of which is strength of schedule, which is were they playing a lot of hard teams that year or a lot of easy teams that year.
And then some other data that I'm mostly not using. But there's a lot of data here to look at. So, here, again, back to the scatter plot. As I've mentioned, I had a lot of data to work with. I had a simple scatter plot that had a lot of dots on it. But my first question was was, what's missing, what's hidden, what might I want to know if I'm a user? And so, first thing first, what do the dots mean as a user, if I'm just seeing a bunch of grey dots. So the first thing I added were these labels, and I decided of course not to label every single dot, because that would have been insanity.
I just labeled the best and the worst, right? Red and green, best worst labels. By the way, sidenote, I double checked and I used a colorblind friendly red and green. These will both work well for all different types of color blindness. So now that I have the dots labeled, and I know that the best team ever was the 1929-1930 Bruins, which of course made me happy being from Boston. And the worst team ever, 1974-75 Washington Capitals. The next thing I might ask myself is, okay, I know the best and the worst, but what about all the rest of the teams? Okay, so thinking interactively, of course, it was logical to then add rollovers.
So, as I interact with the dot, I can now roll over any dot and find out the details of these teams. And so, I go down here and I see these two dots right just above the 74-75 Capitals and they're the 92-93 Ottawa Senators and same year San Jose Sharks. What happened that year? Two teams that really struggled. Too interesting. So, back to what's missing. What might I want to know as a user? Again, driving me towards functionality, I'm looking at the Bruins up there and I'm happy to see that.
But I know that my friends in Montreal are going to say to me, Bill, come on, the Bruins are not the best team ever, it's the Montreal Canadians. They've won 26 Stanley Cups over the years, the Bruins have only won six. And so, I said alright, let's give tools to allow people to filter the data. To find what they might find useful. So that's when I started adding these filters you see at the top here. So I can go in here and filter by teams. All right. My guy from Montreal, let's let him sort and find just the Montreal Canadians and look at them. And yes, see the dotted outline means Stanley Cup winners.
And sure enough, there's a lot of Stanley Cup winners in there. He's right. I also might want to say, okay, let's just look at Stanley Cup winners. What does that look like? Okay, by that measure the 43-44 Montreal Canadians were the best ever. Look at this 37-38 Chicago Black Hawks. They only won 14 games. They really struggled that year. As a Stanley Cup winner that's a very interesting find. I also then said, okay, what about seasons? I might be interested to see different years. So I can go in here and let's say look at that year where we those two teams that really struggled, 1992, 93, look at how big that spread is.
That's interesting. Or I might want to look at 1996, 97. Let's see what we see in there. Okay, much more tight spread of dots. Boston Bruins at the bottom that year. Well let's look at 2010-2011. Another year the Bruins won the Stanley cup. All very interesting stuff. Maybe I want to look at decades. Maybe I want to look at the 1920s, interesting, a really big spread of numbers, versus the 2000s. Much tighter spread, seems like more competitor error, it's an interesting way of looking at the data.
Finally, and now this is where we get to that credibility question. I added a bunch of these is what I call superlatives so, let me look at who in the most games in green vs who in the least games in red. And this is just sort of the top 50 and bottom 50. And sure enough the top 50 had very high point percentages, and the bottom 50 for the most part, didn't do so well with some exceptions. Of course, because there were some short seasons over the years. But then I said alright, across these different superlatives, there is one down here called strength of schedule.
And as I mentioned before, that means teams that had either a really easy schedule. They played a bunch of bad teams or a really hard schedule. They played a bunch of really good teams and so interestingly The Washington capitals. Remember that the worst team ever by a points percentage happen to have one of the hardest 50 schedules of the entire 1300 data set. And by the same token, those Boston Bruins who I was so happy were quote, unquote the best team ever, happened to have one of the easiest 50 schedules in the entire NHL record.
So from a credibility stand point this interactivity has exposed something that I don't necessarily want to share with you. But by doing so, you're probably more likely to buy the rest of what I'm trying to show you with this data. So think interactively again. What else might I add to this? What other features might I add? Well let me start by saying this, in interactive data visualization the one thing I don't think you should do is try to recreate excel. You don't have to add a filter and a button and a feature to expose every single itty bitty little bit of data, you're suppose to be remember thinking about your data.
Your story and your audience. You want to think about the insights you're trying to bring forth. And only add features and buttons that expose exactly that information. So what do I want to see as a user of this? I might want to be able to compare two teams. Show me just the Bruins and the Canadians. So I haven't added that feature, but I might do that at some point. Or might want to look across seasons. I want to look at specifically at 1926. In 1942. Or I might want to say show me teams with franchise players. I would love to see how the Bobby Orr era Bruins would compare against the Wayne Gretzky era Edmonton Oilers.
So those are things that I would want to get out of this data as a hockey fan. So those are features that I might want to add to this interactive experience. Interactivity let's your user dig deeper and find their own stories in ways that you might not have thought of, and or that your editorial process makes impossible to include. So channel your audience, know your data, think about what's missing, and then make functionality to give that to them. Think of yourself like an outfitter for an adventure company, you're providing gear. You're letting your users go knowledge spelunking on their own.
You're just providing the tools. But don't imagine those tools until you've envisioned the answers that you're trying to help them to find.
- Channeling your audience
- Understanding your data
- Determining the information hierarchy
- Sketching and wireframing your ideas
- Defining your narrative
- Using typography, color, contrast, and shape to convey meaning
- Making your visualization interactive