Chapter 5. Defining the User Experience - Animation and Interaction

Animation is like salt. A little bit goes a really long way and can really help to make a graphic more digestible while leading the viewer through the content; too much, and it's all anyone notices. Good User Experience (UX), the computer-use idioms you employ throughout your projects--is more like guacamole. If it's good, it's a nice subtle touch that improves the overall quality of your output and everyone's happy; if it's bad, it totally taints everything and ruins the whole burrito.

In this chapter, we'll discuss both animation and user interaction with an eye towards using both to improve the quality of your data visualizations. We'll also use D3's behaviors to make the map from the last chapter super awesome. Throughout, we'll discuss why or why not animation or interactivity should be used in a particular scenario.

The ability to creatively display data with D3 is one of the best reasons for using it; interaction and...

Animation

The first question worth asking is: Why would animation improve this project?

If you're making something that isn't really intended to communicate data and is just designed to trip people out at your local warehouse rave, then because it would make it look cool is a totally valid response. Don't let me discourage you from running rainbow color interpolators through your charts if you think it'd be fun (because, speaking from personal experience, creating crazy animated art with D3 is a rather enjoyable use of a Saturday afternoon).

If, however, you're rendering data, a bit more consideration is probably necessary. What is your data doing? If it's a value increasing over time, animating a line going upward from left-to-right makes more sense than fading in the line all at once.

Previously, we set attributes on our various SVG objects as we wanted them to appear once the image was finally rendered. Now, we'll use animation to guide viewers through our graphic, using the narrative focus...

Interacting with the user

This is it. This is where all of the UX tidbits I've been dropping throughout the chapter and all the functional programming ideas you've been learning come together; let's make a simple explanatory graphic that uses interaction to walk the viewer through some data.

The first step to any visualization involving user interactivity is to plan exactly what you want the visualization to do, how you want your viewers to interact with it, and what you want to say about the data. What is the data's story and what's the best way to tell it?

In the prison population dataset, we have the numerical product of over a century of incarceration in a western country. There are many ways we can look at this data. We can look at how the prison population has risen versus overall population growth, or we can look at how the prison population has risen or fallen in relation to known historical events. Often, you'll need more than one chart; for instance, when I used this data in a project...

Behaviors

In the last section, we made an explanatory graphic that used interaction to guide the user through the data. Often, however, the goal is just to make a dataset interactive and give the user some way of manipulating it, in other words, an exploratory graphic.

D3's behaviors save a boatload of time setting up the more complex interactions in a chart. Additionally, they're designed to handle differences in input devices, so you only have to implement a behavior once to have it work with both a mouse and touch device. The two currently supported behaviors are drag and zoom, which will get you pretty far.

Drag

Instead of having the user click buttons in the last example, what if we just let them drag the chart area to see the UK's prison population change? It involves a bit more work on the user's behalf, but it also gives them the ability to freely navigate through the chart, which may be desirable in some circumstances.

Let's extend our prisonChart object again. Comment out everything...

Summary

Wow, what a fun chapter!

You've made things jump around the page, almost killed your computer and patience with a zoomable map, and made a supremely awesome bar graph. Well done!

In this chapter, we've animated with transitions, interpolators, and timers. We then learned the difference between explanatory and exploratory visualizations, and used interactivity to create the former. We then made some exploratory visualizations using behaviors with some of our previous projects. Things are starting to look pretty snazzy, aren't they?

In the next chapter, we'll be looking at creating a whole boatload of really pretty charts using D3's hierarchical layouts. Combining both the skills you've learned in this chapter and the next one will mean that you're able to produce some truly fantastic charts. Hope you're ready--this is when stuff starts getting really cool!