Chapter 10. Designing Good Data Visualizations

Data visualization is a tool that can be used in many ways. As you've seen while building examples throughout the book, data visualization is sometimes used to communicate information in a novel or interesting way; sometimes data visualization provides clarity, other times it's just used to make cool things.

Regardless of whether you're a journalist wanting to highlight a change in GDP, a scientist needing to communicate the results of an experiment, or a software engineer looking to integrate visualization into a product, chances are that you'll want data visualization that is clear, concise, and does not mislead. Although the examples in this chapter will mainly be from a news media context, many of the points we'll discuss apply similarly to data visualization in general.

In this chapter, we'll look at a few general principles to keep in mind while building data visualizations and I'll give some examples of good data visualization as well....

Choosing the right dimensions, choosing the right chart

The first step toward making a solid piece of data visualization is choosing the right type of chart for a project. Quite frequently, data will contain many, many dimensions. It's your job to choose which dimensions to visualize. Similarly, it's your job to choose how to visualize those dimensions.

Note

It's very easy to get sucked into thinking that you need a map for everything. Nowhere is this more true than in the creation of content for elections; everyone thinks of the giant choropleths behind newscasters as they watch results come in, each region turning the hue of the party it voted for. However, maps are primarily beneficial for depicting geographic data and the proximity of things in a physical space. In an American election, Idaho and New Hampshire both have four electoral college seats, but the latter is a fraction of the former's size. New York state is geographically much smaller than Montana, but it has 29 electoral seats...

Clarity, honesty, and a sense of purpose

There are two big schools of thinking in terms of data visualization at the moment: there's the ultra-minimalist philosophy espoused by Alberto Cairo and Edward Tufte, where the primary goal of data visualization is to reduce confusion, and then there are those who use data to create beautiful things that uphold design over communication. If you couldn't tell by the title of this section, I generally believe that the former is far more appropriate in most cases. As somebody wishing to visually communicate data, the absolute worst thing you can do is mislead an audience, whether intentionally or not; not only do you lose credibility with your audience once they discover how they've been misled, but you also increase public skepticism over the ability of data to communicate the truth.

Axes and scales are the one of the easiest things to get wrong. You should usually start them at zero, because not doing so can dramatically distort the shape of the chart...

Helping your audience understand scale

A big part of visualizing data is conveying scale and differences in magnitude. The following examples do this particularly well.

To start with, view John Burn-Murdoch's graphic on high-speed elevators for the Financial Times at http://www.ft.com/cms/s/2/1392ab72-64e2-11e4-ab2d-00144feabdc0.html.

The following screenshot doesn't really do it justice:

If the preceding screenshot were a live visualization, you would see the elevators at each building endlessly rise and fall, with a counter beneath tracking how many times the elevator has gone up and down while looking at the page. A nice bit of easing at the top and bottom makes you feel that the little magenta square travelling along the line is a real elevator, subject to physics in the same way a big metal cage rapidly moving up and down the world's tallest buildings would be. Although this printed version only communicates one dimension--the relative heights of each elevator and building--the interactive...

Using color effectively

One of the biggest choices you'll make when building data visualizations is choosing which colors to use to represent what. While it's certainly possible to convey a lot of information through purely monochromatic charts, using the wide range of color representable through a digital display can be a very effective way of depicting another dimension of the data you're visualizing.

If you plan to use color to communicate information, there are a few things to consider. The first is whether a user will be able to discern the pattern necessary to understand what the colors mean. If you have a legend explaining what color corresponds to what, try turning it off and thinking about whether you're still able to understand what the color combination means. Is it intending to show increasing intensity, diverging values, or just that it has a particular quality (in which case, you'll definitely need a legend)?

Secondly, pay some attention to people who are colorblind. The most...

Understanding your audience

Your audience is one of the most critical things to consider when beginning a new data visualization project. This has two parts: the first is from an editorial perspective (what is the audience's background knowledge of the topic at hand? What types of charts will the audience be able to recognize and properly read? How do these charts work within the broader contexts of this story and other work published?), while the second is technological (what platforms and devices will be used to consume this content?).

It's really important to tentatively sketch out any bespoke data visualization before you start writing code, and this can take many forms. On the one hand, it never hurts to figure out the rough shape of your data before committing to a particular visualization style. Frequently, I've been asked for pie charts with a few small outlier values highlighted, which totally doesn't work (the rest of the chart dwarfs the outliers). You don't necessarily need to...

Summary

Hopefully, by now you feel that you have a secure understanding of the work you want to do using D3 to visualize data. We went through some examples and laid some good ground rules for building high-quality data visualizations that not only inform an audience, but also look pretty spectacular in doing so. We also discussed ensuring that your work functions well on mobile.

As much as it pains me, I believe it is nearly time to bid each other adieu. I truly hope you've learned some things and enjoyed the preceding 10 chapters; writing a textbook is a fine balance of getting to the quick and dirty learning bits while also having some fun along the way. Regardless, if you somehow read this thing from beginning to end, my hat's off to you, as we have covered an absolutely mind-boggling array of technologies and approaches to software development.

We started off with some super basic stuff, talking about DOM and CSS. Then, we delved into SVG and learned how to build super pretty web vector...