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 version is able to use animation to convey a second quality--the speed of the elevator. In this, one can really see the power of using the digital medium to communicate data in ways a static print version will never be able to. Scale is demonstrated by tying visual content to time; in this case, merely saying the elevator can do a return trip in two minutes would not be nearly as effective as demonstrating what two minutes feel like to the reader.

A much more elaborate example of embracing the digital medium to help convey scale is The Guardian's Homan Square: A Portrait of Chicago's Detainees interactive. If you haven't seen it, visit http://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees and be prepared to have your mind utterly blown.

It starts with a big collection of faceless grey silhouettes, each representing a single person in custody at a secretive police warehouse in Chicago:

As you scroll, the faces fly around the screen to make up different configurations, such as this bubble chart:

They can also make this isomorphic map:

The Guardian U.S. interactive team did a fantastic Q&A about the process behind this visualization that is well worth reading; you can find it at https://source.opennews.org/en-US/articles/how-we-made-homan-square-portrait/.

Although the data morphs in many different ways, you still feel an attachment to each point, remembering how they were originally displayed; they're not merely pixels on a screen, each portrait represents another person whose life has been impacted (a feeling reinforced when they single out individual portraits as case studies later on in the piece).

Your projects don't need to be as complex as Homan Square to be compelling, however. Another example demonstrating good use of animation to explain scale is the late, great Hans Rosling's Gapminder project (http://www.gapminder.org/world/), which allows viewers to see how the world has changed over time. In his many excellent talks about understanding the world from a data-driven perspective, Rosling discussed how, when looking at measures such as life expectancy and GDP per capita, the world is getting substantially better as time goes on, and that our perceptions of other countries are often rooted in a degree of ignorance as to how similar we generally are:

As time goes on, you can watch as the bubbles in the chart migrate from the bottom-left quadrant to the upper-right, showing increased life expectancy and income per person across the board. It's worth comparing the fairly-dry exploratory visualization to Rosling's TED talk (https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen). Although depicting similar data, the latter is far more enjoyable simply due to Rosling's narration, with excitement evident in his voice as he explains how the world is improving and changing as societies develop. Good explanatory data visualization doesn't have to be limited to what can be rendered on a screen.

You can see an example of the preceding chart recreated using D3 by visiting Mike Bostock's implementation at http://bost.ocks.org/mike/nations/.

As a final example, please visit this graphic by the Wall Street Journal that attempts to visualize what your chances of winning the Powerball lottery jackpot are; it's another one where the following screenshots really won't do it justice:  http://graphics.wsj.com/lottery-odds/ Also, once there, try not to hit the jump ahead button for at least a little while:

After a good deal of continuous scrolling, the screen looks like this:

At this point, you realize there's no chance that you're going to ever physically scroll to the bottom, and so either click the jump ahead link or grab the scrollbar. If at that point, you're still convinced that you can plan your retirement based on your lottery earnings, probably nothing will change your mind.

In a sense, scale is emphasized through comparing the initial coin-toss probability to the probability of picking the winning Powerball numbers. Comparing the coin-toss's 1 in 2 with the Powerball's 1 in 292,201,337 is impossible to do in one screen (and especially so in print), because, no matter what sort of scale you use, the latter completely dwarfs the former. Making use of the browser's practically-unlimited vertical screen real estate is a very effective way of tying visual elements to a physical property (much like the elevator speed interactive earlier), in as much that the physical effort involved to scroll just 1% to the end (much less count how many dots that is) very effectively demonstrates how mind-bogglingly big a number like 292 million is in the context of comparing probabilities.

These examples are phenomenal for communicating scale to the reader. One of the biggest reasons data visualization is such a powerful tool is that it helps answer the questions how big is "big" and how small is 'small'? As reporting becomes increasingly reliant on data, it becomes very easy to mislead the reader by over or under-emphasizing scale (indeed, this is a big reason why the Chaffetz chart in the last section was considered so dishonest). This can often be mitigated by designing visual output in such a way that the viewer feels some attachment to the visual stimuli on screen.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset