Join Bill Shander for an in-depth discussion in this video Introducing motion, part of Data Visualization Fundamentals.
- View Offline
So in this video we're going to talk about movement. This, isn't necessarily better than this, but sometimes movement is a good thing. So let's say you're taking this guy for a walk in the woods, and along comes this guy, then in this case of course movement might be a very good idea. But we're talking about data visualization. Static infographics can be really compelling, and interesting, and informative, there's no doubt about it. But sometimes animation can really bring data to life. So, whether you're talking about a video, or an interactive experience.
Motion can add a lot of visual interest, of course, at a minimum. And, it can also add real understanding. It can really help you see the data better, and understand more. Motion should always be part of your thinking in doing data and visualization, unless you're working in print. I would say there are four key arguments for using motion in DataViz. The first one may seem less important quote unquote, but it's definitely not unimportant. So, the first argument is really not all about eye candy, but that's sort of a part of it. I would argue that eye candy actually is important.
That, it creates a better user experience for people when something is beautiful. It increases engagement, and when people are happy playing with something, they're more likely to share it. It'll have a bigger impact overall. So, it gets sort of downplayed and pooh-poohed, but, I think eye candy is important. The first reason to use motion is for transitions. So, I showed this example earlier in the course. What we're looking at here is race results from a half marathon. And, when I click on this button, to sort these overall results into age groups, watch what happens.
They transition, right? The, the dots float up and down and out and about into the different categories. So, yes, this is eye candy, it's sort of fun and sexy to look at, which as I said before it is important. I think it's a very useful thing. But in this case there's more to it. That transition is actually helping me track individual dots. So for instance, this guy over here, he's the fastest guy in the course. Watch what happens when I click, and keep your eye on this dot. I can watch that dot as it moves up and down. Now, for the fastest guy in the course, of course, it's easy, right? I could easily find him again.
But let's say I wanted to see these people. Sort of. You know, there's a big bulge of people on the middle. And then it sort of narrows down, and then a little bit of a bulge. Interesting. Let's see where this person ends up. So I'm going to keep my eye on that dot, as I click into the age group results. And I was very easily able to watch her land right here. So this person is 18 to 39. So that transition being animated, really helped me track what was going on. And it goes beyond just being eye candy. The next reason to use motion is for interaction feedback in interactive experiences. So this is another example that I've shared before in other videos in this course.
This is a visualization of hospital pricing data. And, in this example, the interaction feedback that I'm talking about, is, as I roll over these bars of different regions and their pricing data, I see that the bar fades back a little bit, right? The color changes. So I immediately sense that there's something more to this. It's just a little bit of feedback to say, this isn't static. There's something behind this. And of course, yes. If I click into it, the thing opens up and I get more data. So the third reason to use motion, is to draw the eye, to draw attention.
So, we've talked about, you know, eye candy. We've talked about transitions. We've talked about interaction feedback. This is about just grabbing the eye and drawing it to where you want it to be drawn. So, if we go back to this example. You know, I'm looking at hospital pricing data. I get the interaction feedback. And then, as I mentioned before, I'm going to just scroll up so you can see it when it happens. When I click into Boston, watch what happens. Did you see these dots down here that sort of bounced into place? Now, again, you could say that's eye candy, you could say that it's it's sort sexy, it's sort of engaging, but most importantly, it drew my eye down to that place on the page.
That movement caught my attention. And so, again, it's sort of telling me there, there's something going on here. These dots aren't just drawn on the page, they're not static, they're interactable. So it's sort of helping me understand that if I roll over these, something might happen. And finally, one of the big reasons to use motion, is to show change over time. If you've ever seen Gapminder this is from Hans Rosling, a professor. And, this is a really fantastic example of the use of motion. What this is, is looking at data on income and life expectancy over the years, from 1800 until the modern day.
Each one of these bubbles represents a country. As you can see they all start in the lower left hand corner. And then, as time goes by, the countries in orange which are the western democracies, start to float up and to the right. So they're getting richer and they're getting healthier. They're living longer. And you notice that the countries in red, Asian countries, are sort of lingering behind, lingering behind. But then you see China, the giant bubble of China sort of starts shooting up and to the right, up and to the right. And a lot of the African countries are sort of still lingering far to the left and, further down than the rest of the world.
Really fascinating and very effective use of motion, in what is in the end, a very standard form, right? Just a simple bubble chart, but it's such a compelling story and so well told, and could not have been told as well without that movement. So, as I said in the beginning, there is nothing wrong with being still. But, motion is a very powerful tool in your arsenal. It adds to user experience, it can add to the understanding. If your medium allows it, if you're not working in print, then use it. Use it in all the ways that I've described, if appropriate, given the data that you're working with.
- 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