Welcome back to Tuesday night! Tonight I’d like us to continue our past discussion, by looking at a minimal example of an interactive communication in our CitiBike case study. Then, I’d like us to discuss a few new ideas, pacing, animation, interactive documents, and another tool to help us compose a story. For the balance of our time, I’d like you to gather into your amazing teams to work on your projects.

Sound good?

Again, when thinking about interactive communications, all aspects of communication we’ve discussed in this course come into play. Before we get started, let’s remind ourselves of our course timeline.

Here’s our overall timeline. You’ve considered a lot of concepts in this course, and practice applying them in various ways through your first five deliverables.

Now, as a group, you’ve been working on an interactive communication and a presentation, which I’ve labeled more generally as a multimodal communication. Today, as mentioned, I’m going to review a few more ideas that will help you in these new deliverables.

Alright, let’s talk about pacing. Do I have any runners, swimmers, cyclists, or endurance athletes in the group? What does pacing mean to you?

Cool, now let’s think about that idea of pacing in aother context. Communications.

Now, I’ve adapted our cues here from the youtube video I gave you to watch. The presenter, Tony Chu, is a talented information designer, and his talk was about what? Communication. More specifically, his goals in communication — exposition. What he believes is our most challenging constraint. And how we has tried to overcome that constraint.

So on the left, you’re quite familiar with this word diagram I made from our readings in Doumont, right? Our goals in communication are to

get our audience to pay attention to, understand, and be able to act upon a maximum of our messagew, given constraints.

Tying this into Chu’s talk, let’s focus on attention and constraint.

From our earlier design principles, we’ve though about preattentive attributes, and how we can use them to capture our audience’s attention, right? Well, our communications always compete with other information around or influencing our audience.

ATTENTION.

Things that take away from our audience’s attention?

Time. Having to make decisions. Clutter. Confusion.

Things that gather our audience’s attention?

Surprise. Delight. Order. Coherence.

SHORT-TERM MEMORY LIMITATIONS.

Now if we give our audience too much information at once, it becomes difficult to process it all at once. Our short-term memories are really quite limited on what we can think about at any given time. That’s one of the ideas you read at the beginning of the semester from Doumont in his chapter on Fundamentals, and how we should chunk communications into small discrete elements. Right. Remember the magic range of things being 3 to 5?

So, to borrow, again from Tony’s metaphor with the faucet, we need to keep our audience interested but not provide too much at any single point in time. There’s a happy middle ground where they stay interested but are not overwhelmed.

Now the tactics that Tony used to keep this happy medium involved animation and pacing. So let’s take these concepts in turn.

Let’s start with some basic ideas around animation. What do we mean by animation? What does that mean to you?

Here’s one of the definitions in the Oxford English Dictionary.

Animation is the process or technique of filming successive drawings or positions of puppets or models to create an illusion of movement when the film is shown as a sequence.

Remember we talked about a flip book? Sounds like the same idea, right?

With this in mind, let’s hear from an information designer.

Tamara Munzner is an excellent information designer and author of a helpful textbook on information visualization.

Tamara’s idea of animation is three-fold. Let’s read together.

Animation is an overloaded word that can mean many different things considered through the lens of vis encoding and interaction. I distinguish between these three definitions:

• narrative storytelling, as in popular movies;

• transitions from just one state to another;

• video-style playback of a multiframe sequence: play, pause, stop, rewind, and step forward/back.

We’ll focus on a couple of these ideas tonight.

By the way, or as an aside, Tamara also explains that we can reduce our audience’s cognitive load — what they have to hold in their mind to reason about — by asking them to compare different views that are both visible to the eye at once, not asking them to remember something shown previously compared to what they’re looking at now.

This idea relates to both animation and pacing, and also, importantly, presentations, which we’ll discuss next week.

Let’s consider an example of each of these ideas.

Hans Rosling, the analyst / actor here, made this rather famous example. Consider the narrative aspects and how those relate to the encoded data.

How did the narrative aspects affect your understanding of the data encodings?

You may recall this example from the video I assigned to you as reading.

In this example, the author uses animations for transitions.

What did you feel the author accomplished by using animations for transitions?

[DISCUSS]

Finally, you’ve seen this example before during our discussion of variation and uncertainty.

It uses the traditional video playback controls, right?

Do you feel there are any advantages / disadvanages to relying on these features, in this example or more generally?

We’ll think back to these examples in a moment.

How does animation relate to the design principles we’ve discussed this semester?

Figure 1

Motion is pre-attentive, so it can help us focus an audience on something.

But motion is also a grouping principle, or can be.

Figure 2

That’s because we process objects in motion together as related. It’s the Gestalt principle of “common fate”.

Since we can use it as either a pre-attentive attribute or to explain grouping, we should, right?

Time permitting, also discuss animation of shapes as narrative, reviewing Heider & Simmel, An Experimental Study of Apparent Behavior (1944), their video, and referencing the title introduction to Apple TV’s The Morning Show.

Well, when computers started to include software tools that would allow ease of coding animations, a lot of papers and studies came out touting how much better animated graphics were than static graphics at explaining things.

But when some authors including Tversky took a close look at those studies, they found that most of the studies were invalid as A/B tests. The empirical studies were comparing the wrong things. They were comparing a static graphic to something, but in most cases, the animated graphic also provided information aside from the animation itself that aided its observer.

These authors went on to look at the failures of animation. They concluded that animations generally work best when two principles are met. Let’s read these together:

First, the real-world, or external representation should mirror or reflect the internal representation in the graphic. So a map is a prime example. A graph represents space using space, positions in x and y coordinates. But this can be extended to metaphors too. So animation can be appropriate representing change in time.

Second, the thing we want to represent through animation should be understood or understandable in the real-world in that way. So we will need to think about all kinds of things that filmmakers do when shooting a movie. How to make the illusion of movement slow enough for the audience to understand the change we’re trying to convey.

Fortunately, just as we have new software that extended the grammar of graphics interactively, we also have extensions to that grammar, for animation. So you can keep building on what you already know!

Let’s take a look at recreating the example we just watched from Hans Rosling, using this grammar of animation.

On the left, I’m showing you the code, and on the right, displaying the result.

You’ll notice that most of the code is just what you already know, the grammar of graphics as implemented in ggplot2. The package gganimate gives us additional ggplot functions for transitioning between views of data and for specifying how to move objects between those two states.

We see that in the last two lines of code that we added to our plot.

transition_time

and ease_aes

Now, this is just one example transition function. But the package actually has many cool ways we can specify transitions. I’ll invite you to try them out on your own.

The other function, ease_aes, is specifying how the speed of movement changes throughout the transition.

Pretty cool, right?

Now there are other ways we can pace information that does not involve animations.

Let’s go back to the idea of small multiples. We’ve seen these as a very powerful way to allow side-by-side comparisons of a variable not within the marking of a single graphic, right? Well, we can also use small multiples to do things like change the focus that we want our audience to have on the same data set.

Let’s go back to an example from earlier in the semester, from your homework two.

You recognize this, right? On the left is the full information set graphed. But we can highlight just one category of the data and gray out the rest as I’m showing you in the upper right. We can then include text or verbal discussion of the highlighted data and how it relages to the rest in context.

Then, in a second multiple, we can change what we highlight and shift the conversation.

This can be a very effective way to help our audience along.

By the way, how might we combine the idea of small multiples with animation?

Now, let’s bring back up another, related concept we looked at recently. The principle of proximity and how we can keep graphics next to our written explanations.

Remember this example I’m showing you a screenshot from?

How does it chunk information? How does it keep the text and graphic together?

This is the idea of what’s been called scollytelling. The example from Tony of the exposition on machine learning uses this concept too. It’s time to look under the hood to see how it works. To do that, I’ve made a toy example.

Now scroll the information up and down. What do you notice?

[DISCUSS]

Let’s see how the code makes this happen. Building on what I’ve shown you previously , it uses html and css. Let’s first review the html.

Here’s the html. I’ve color coded the code to match what you see on the right. You’ll notice a couple of things. We use a figure tag and an article tag. Now the behavior of how this works is in the css, the style sheet, that defines these tags.

Let’s take a look.

Again, I’m keeping the code we just reviewed up, and added the css that I’ve also color coded, so that you can see how it all relates.

You’ll notice a couple of things. Or let me point them out to you.

First, In the style for the figure, we specify a property called position. We set it to position sticky. See that? We also set the top of that position. In this example I set it to 5 rem. Which is a relative units of distance, here from the top of the viewfinder.

Second, I specify the amount of white space between article paragraphs and for after the last paragraph. That’s the black style information for article. It’s just specifying min heights. See that?

Cool. That’s it. Now, here I’ve annotated what we’ve just discussed so you can slowly walk through what’s going on.

Ok, now that we want to create some kind of communication, how might we go about the process of turning our graphs and such into a narrative?

In the film making industry, they use something called a storyboard.

Let’s take a look at storyboards.

Here’s a toy example of a storyboard from the film making industry. Notice it’s a series of visuals with some explanations about the visuals, each one. And moving from visual to visual, it forms a sequence of things going on. That’s the sequencing of the narrative.

We can borrow this idea to work with our data graphics, too.

In another reading I gave you, Communication with Data, the chapters on composing a story, those authors describe a six step process that they use after creating exploratory graphics.

Let’s read through these together.

They first collect their tables and graphs.

Second, they group related tables and graphs together.

Third, they work on an argument they want to tell.

Fourth, they choose the tables and graphs that relate to and support their argument.

Fifth, they sequence those graphs.

And last, they add annotations to the graphs and write transitions to connect them.

Now I say last, it’s an iterative process.

I’ve pulled these screenshots from their example. Just a bunch of exploratory graphs that they gathered, and organized as related.

Then, they filtered out those that did not fit the narrative, and drafted annotations and transitions.

This is not the final project. This is just their storyboard that helps them setup a more refined communication.

Make sense?

Awesome. I want to use the rest of our time tonight to work on your group projects. So let’s move around into our groups and use this time for productive work.

That way you can also ask questions and I can try to help.

As always, I’m rounding up my recommendations for when you want to go deeper into the topics we’ve discussed tonight.

Here they are. I’ll briefly note that I still need to finish writing the sections in my text I’m referring to here.

For preparing your group presentations, I highly recommend thinking about what Doumont says in his relevant chapters.

For another example of combining verbal with visual, though not data graphics, I recommend you take a look at Jonathan Corum’s presentation, which I’m linking to in the references here.