animation

Viewing note

Click on the image above or here to go to the actual graphic. What you see above is just a screen grab. If you like the screen grab, you will love the active graphic in which you can see what it would look like the visualize the wind blowing across the US right now. Yes, whenever you are reading this, you can download recent data to populate the graphic.

What works

This is a great use of a map to display information. Think, for instance, what the same data would look like in a table.

State                     Speed      Direction
Bismarck, SD          16 mph     S
Columbus, OH        5 mph      W
Fargo, ND               8 mph      N
Minneapolis, MN     2 mph      SW
New York, NY         6 mph      E

In a table, cities would probably be arranged alphabetically which is fine if you want to know exactly what is happening in a given city but terrible if you are trying to discern if there’s any geographical pattern to wind flows. Looking at the map, it is easy to detect geographical patterns. In fact, it would be nearly impossible to avoid detecting geographical patterns. Huge win for the map as a graphic with respect to wind data.

The fact that the wind appears to blow is a programming achievement.

The fact that users can update the graphic with a fresh pull-down from the National Digital Forecast Database is another major programming achievement.

The creators of the graphic at hint.fm offer this disclaimer, “We’ve done our best to make this as accurate as possible, but can’t make any guarantees about the correctness of the data or our software. Please do not use the map or its data to fly a plane, sail a boat, or fight wildfires”. That being said, I think the graphic could be useful for those sorts of purposes. I also think it could be used to perform site selection for windfarms or at least as an educational tool to explain to people why the Dakotas make excellent states to harvest wind while the neighboring state Minnesota is a poor choice.

What needs work

I wish there were an easier way to find graphics like this. I stumbled upon this one via Albert Cairo’s twitter feed, but there must be other awesome graphic work out there just waiting to be discovered.

Reading suggestions

On that note, if you happen to enjoy stumbling upon information graphics, I highly recommend visiting visualizing.org and visual.ly, two websites that aggregate information graphics by allowing people to upload their own work. Both sites have relatively high collective standards for design and are trying to maintain the same high standards for data quality.

Then there’s Nathan Yau’s blog, flowingdata.com, which has long been on my list of must-reads. I assume many of my readers know about flowingdata but it is worth mentioning because it’s a great blog.

Good.is has a portion of their site set aside for GOOD information graphics.

For a more strictly aesthetic experience, behance.net is a giant collection of graphic artists’ portfolios. Looking through it is the digital equivalent of walking around in a flea market – great stuff, unique stuff, and lots that is instantly forgotten even though its presence adds to the atmosphere. Most graphic artists are not information graphic designers so much of what is on behance is not information oriented.

I sometimes find things on pinterest, too, which is more like the digital equivalent of a mash-up between jcrew and a flea market. Oddities organized. It’s much harder to find good information graphics there because, for reasons I do not understand, pinterest is dominated by the long vertical graphics that require lots of scrolling. I’m not a huge fan of those. They encourage laziness – nothing needs to be integrated when you have an infinite length of scroll to just layer unaffiliated fact upon unaffiliated fact and hope that with a picture or two thrown in, a narrative will emerge.

Besides newspapers and magazines, where else do you find information graphics?

References

hint.fm (2012) Wind Map Graphic.

visual.ly
visualizing.org
flowingdata.com
behance.net
pinterest.com

What works

This is an example of activism by animation. It’s not an information graphic so I’m not going to offer a critique, but I find it interesting that the economic benefits of coral reefs like tourism, fishing, and pharmaceutical discovery are foregrounded while environmental concerns like species biodiversity and ocean acidity are mentioned afterwards.

Have a happy Friday, readers.

What I would enjoy seeing

I would love to see an animation of this quality that explained the process of ocean acidification and what we would have to do to reverse it. How much would our carbon emissions have to be decreased to make a difference at this point? And how much would that impact the typical American lifestyle?

References

World Resources Institute. (9 July 2012) “Coral reefs: Polyps in peril”. Animation by Jim Toomey.

What works

These infographics are based on data from the United States Department of Agriculture. They depict the calories available per capita for the average American. It’s not an exact measurement of what’s on everyone’s plate, but it’s not bad. They made adjustments for waste and spoilage (which is not insignificant in this bountiful country of ours) saying:

Data on the availability of different foods per capita is adjusted for losses like spoilage and waste. Take for example the produce that goes bad at grocery stores or the leftovers tossed into the compost. By calculating such food losses, the USDA data closely approximates the amount of food that actually makes its way from the farm into the average American stomach.

This leaves us with a decent proxy for what passes through the average American in terms of nutritional categories. I think they’ve done a good job of breaking the categories down – looking at added fats and sugars as their own categories is useful and infrequently done in the world of nutritional infographics.

One more thing: this infographic is actually an interactive graphic that uses a slider bar to move across time. It’s a bit more pedagogically useful than the stills I have posted here. I encourage you to click through and play around with the full version of this infographic.

What needs work

Adding up the 2008 numbers shows a total intake of 2678 calories per person per day up from 2169 in 1970. As an infographic, I think this could have done a better job of showing the growth in total consumption – maybe just a bar somewhere that is either broken down by category or not. This is a meaningful change. The purpose of the infographic is to communicate that the change has mostly taken place in the grain category but that’s a little tough to see. I imagine part of the reason it’s tough to see is the way the graphic is constructed – lots of things are changing besides grain. But it’s also a problem inherent in the numbers since grain doesn’t change all that much. However, I still think this could have been done more clearly without the bubble approach. I still argue that the best way to show changes over time is by using line graphs. Humans are very adept at translating an upward sloping or downward sloping line. Of course, people tend to think that the upward and downward sloping lines are horribly boring and gravitate to bubbles and other mechanisms of pizzazzification.

References

Jezovit, Andrea. (5 April 2011) Is Grain Making Us Fat? From the Civil Eats blog as part of an ongoing collaboration between Civil Eats and the UC Berkeley Graduate School of Journalism.

What works

If one graphic cannot tell the whole story, use three. Or four. Or four static graphics plus an interactive graphic (keep reading)! Most people would have stopped creating graphics after they produced the first graph – the one that tracks oil and natural gas prices from 1990 up to 2011. I appreciate the second graph which compresses the salient point from the first graph into a single line. It hammers home the point that what we are meant to notice is not the fluctuation in natural gas prices so much as the fluctuation in the difference between gas and oil prices. The other two graphics both deal with oil consumption only, something I find slightly odd given that the story is about natural gas. Yes, it is clear that there is a relationship between oil and natural gas consumption – we see that with the first two graphs. But we also see from the first two graphs that the relationship between oil and gas is not always predictable, especially not right now where natural gas is significantly cheaper than oil, cheaper than we would have predicted if we had to use the past as a guide. Yes, of course oil prices might go up as they respond to increasing demand from “the rest of the world” (weird terminology that means NOT US, Japan, or “developed Europe”).

It’s also true that oil prices are sensitive to political unrest in the middle east, which has been underway lately in a number of countries. It is difficult to tell if these graphs are using numbers crunched before the revolution in Egypt and unrest in Middle Eastern countries or after. The graphic was published 25 February 2011, well after the Egyptian revolution began. But the weekly price is listed in January 2011 dollars which means the rest of the information might have preceded the Egyptian revolution. Still, the path towards divergence appears to have begun in 2009, which renders the timing question I raised a bit beside the point. And this is why we look at trends over long periods of time. Point estimates can be misleading.

More is more

The Times has been covering natural gas regularly, and it seems they decided that more is more in pursuit of a fully comprehensive understanding of natural gas not just as a brute commodity being traded in a free market, but as a potentially harmful environmental toxin, especially when it is seen as being at the center of brutal extraction practices. There is an elegant slideshow-animation that describes how natural gas is extracted and explains what the consequences of this practice can be as a result of the mechanical changes the drilling process leaves behind.

The combination of slideshow and animation works well here. If it were just an animation, it would be hard to fit the explanatory text within the temporal flow. Giving the viewer a chance to watch a small segment of animation and then read an explanation about what is supposed to happen and what can go wrong brings appropriate pacing to the explanatory experience. What’s more, I think it is a great idea to force the viewer to keep clicking in order to advance the slides. It’s barely above a fully passive learning experience, but anything that raises the level of participation – like reading or having to click somewhere – helps keep the viewer’s body and mind more fully engaged and pumps up retention.

My favorite slide came near the end – these people built up some narrative tension. I kept wondering where this drilling process went wrong. So when do the toxins hit my drinking water? That’s what I was wondering, and this slide filled me in. It’s a simple question, one that we know we’ll find the answer to based on the title of the slideshow, but it’s always good if your viewer goes in with some direction. An obvious question is fine. Getting viewers to envision a more complicated question might be better, but overall I think this approach works well.

Please click through to make sure you understand why fracking presents environmental problems. I do not want to spell it out here because I think that would lessen your experience of the interactive graphic as a learning tool.

References

Norris, Floyd. 25 February 2011 Two Directions for the price of natural gas and oil New York Times.

Graham Roberts, Mika GrÖndahl and Bill Marsh. 26 February 2011 Extracting Natural Gas from Rock [Interactive Graphic]. The New York Times.

PS

It feels like swearing to talk about fracking. Thank you, Battlestar Galactica.

What Works

If you are a New York Times reader or a facebook user you are probably aware that Facebook periodically makes changes to their privacy policy. These changes often anger advocates for privacy who then write articles about why they are upset and which settings Facebook users should change in order to protect their online privacy. There are also ongoing debates about whether or not it would be measurably detrimental to simply delete one’s Facebook account as well as whether or not there will continue to be social stigma related to pictures and wall posts of activities that are common enough (drinking, wearing bathing suits, sleeping in, telling little white lies).

Regardless of where you stand, it has been a little hard to understand just how Facebook’s privacy changes are, well, changes. The series of graphics above eliminate the need to read dry legalese (or even those New York Times articles) and allow us to see the changes. The graphic is interactive and I encourage you to click through and play around with it. Among it’s great features, it allows you to select the privacy settings so that you can see just which bits of your personal data you can still protect and which bits are out of your cyber control.

What Needs Work

There is nothing that needs work about this graphic – the author explains his methods and assumption, invites comments, provided this graphic from the motivation to make information free, and he provides full-disclosure about what he does for his day job (works for IBM Research at the Center for Social Software).

References

Holson, Laura. (8 May 2010) Tell-All Generation Learns to Keep Things Offline. In The New York Times, Fashion & Style Section.

McKeon, Matt. (May 2010) The Evolution of Privacy on Facebook. Personal website.

Nussbaum, Emily. (12 February 2007) Say Everything. New York Magazine, Features.

Perez, Sarah. (20 January 2010) The 3 Facebook Settings Every User Should Check Now. In The New York Times, Technology Section.

Valentino-DeVries, Jennifer. (26 April 2010) http://blogs.wsj.com/digits/2010/04/26/getting-control-of-your-facebook-privacy-settings/tab/article/. In the Wall Street Journal, Digits Section.

Stanley Lieberson’s “A Matter of Taste” looked at the way trends spread by examining baby names. He wanted to avoid the impact of marketing and advertising – the point was not to figure out how to create, perpetuate, or stop a trend, but to see if there is such a thing as a trend in the first place. Nobody is in the business of promoting baby names, and yet there are patterns. Lieberson looked for these patterns in the US. French sociologist Baptiste Coulmont has also looked at the way baby naming trends move across space and change in popularity over time.

The graph below shows how the final syllable of female names has changed over time. The -ette ending waned in popularity while the -ine and -a or -ah endings have increased in popularity. Graphically, I love that this diagram looks like sound intensity diagrams.

More interesting yet, Coulmont also animated a map to show how the name Loic spread from Brittany across the entire country over the course of about 60 years. I like this because it takes a static map and makes it dynamic. Sure, you could have lined up maps to march across a page at five or ten year intervals and cognitively filled in the blank spots. But here, his animations do the cognitive heavy lifting for you, revealing the pattern instantly.

Here’s what Coulmont had to say about the map graphic:

“As to my animation : there is no yet an accompanying sociological argument. I was struck by the spatial mobility of “Loic” from 1945 until 2005 : it seems to be a steady eastward shift [nowadays, Loic is one of the 20 top names for boys in francophone Switzerland : the eastward movement jumped the frontier!

How to explain this movement ? It seems that “Loic” moved from one district to another by means of personal interactions : some people knew some “Loic” living in the west, chose this name for their baby boy, and the movement continued eastward. “Loic” is not alone : especially during the nineties and now, names from Brittany are somewhat fashionable (“Celtic names”) : it could be the unforseen consequence of a strong nationalist movement in Brittany during the seventies. Those independantists fought for the right to name their children with “real” Celtic names… and the names spread in other regions.”

Relevant Resources

Coulmont, Baptiste. (2009) Prénoms typiques.

Lieberson, Stanley. (2000) A Matter of Taste: How Names, Fashions, and Culture Change New Haven: Yale University Press.

What Works

This is an animation based on twitter data from Obama’s inauguration day in the US – Inauguration was at noon. In case you weren’t a twitter user at the time, it is worthwhile to point out that twitter had partnered with Facebook for the day to increase usage. Both twitter and facebook were encouraging users to point their comments towards the topic of the inauguration.

I like it because its like watching fireworks from above and gives a tangible sense of the excitement amongst Obama fans that day. Best thought of as an emotional animation of political temperature than as any kind of quantitative data. I wouldn’t even call it an information graphic/animation. I would call it popcorn, animated.

What Needs Work

I have the same problem with this animation that I have with twitter which is that I really don’t know what good they do, even though I’m intrigued. I’ve been trying to figure twitter out by using it and I still don’t see the appeal. Thus, it is quite alright to think this animation is pretty, but dumb.

Relevant Resources

Flowing Data (2008) Worldwide Inauguration via Twitter

What Works

First, the elegant sophistication of this graphic is breathtaking. I love watching it and I have watched it for long enough to start asking questions about it. Maybe I am different than other people, an outlier of some sort, but in this case I don’t think so and that’s why my own fascination indicates a larger virtue of the graphic. If it draws people in and gets them asking questions, it is doing something right. Holding eyeballs in this media saturated world is a triumph in itself. Having answers to the questions that are posed is a secondary but even more critical step. To figure out what you’re looking at, here’s what the folks who made it have to say for themselves: “Cabspotting traces San Francisco’s taxi cabs as they travel throughout the Bay Area. The patterns traced by each cab create a living and always-changing map of city life. This map hints at economic, social, and cultural trends that are otherwise invisible. The Exploratorium has invited artists and researchers to use this information to reveal these “Invisible Dynamics.” The core of this project is the Cab Tracker. The Tracker averages the last four hours of cab routes into a ghostly image, and then draws the routes of ten in-progress cab rides over it.”

Second, they are right that just knowing where cabs go is more than knowing where cabs go. It’s knowing about urban space over time. It’s certainly knowing where the airport is (and that airports are far away). Looking at this we get to see the grid of the city and the longer stretch of highways and bridges bringing people in/out. It would be nice to see what this sort of ghostly cab mapping technique would reveal about cities I know a little better than San Francisco. Keep this site tucked in your back pocket for later this year, all you ASA meeting-goers.

What Needs Work

I just wish there were a simple way to say a little more about the cabbies themselves, who end up looking like infrastructure or phantoms, rather than actual people. In New York, 91% of the cab drivers are immigrants and only 1% are women (2006 Schaller Consulting). Is there a way that this cab-tracker could become a little more about the humans in the city?

Relevant Resources

Richards, P. and Schwartzenberg S. Snibbe S. and Balkin A. cabspotting San Francisco.

Schaller Consulting. Repository of Reports on Cabs in New York and beyond

Plaut, M. (2007) Hack: How I Stopped Worrying About What to do with my life and started driving a yellow cab. New York: Random House.

Buddhacab blog written by a New York yellow cab driver

Link rot note

This post used to source a population growth animation from zachofalltrades.net but that website is no more. The University of Kentucky Appalachian Center is better, so count yourselves lucky if you missed the original post in favor of this update.

What Works

First, you must click through and watch the animation. Praise #1: yay for gifs.

Like the previous post that looked at China, this animation is trying to tell a story about population growth over time. The major difference is that the Chinese example was strictly demographic – looking at variables like gender and age but not at all concerned with geography. This one shows both geography and population growth though it does not include information about gender, age, race, etc.

What Needs Work

If this graphic were three dimensional, if density piled up, it would start to ‘feel’ heavier over time so that the same way that the westward expansion of the population just appears without you having to puzzle it out, the density of population in cities would be simply obvious. This is not meant to be a dig to the graphic’s creator. I just offer this critique as a way to think about just why and how ‘seeing is believing’. Watching the population move west is certainly a ‘seeing is believing’ moment because viewers do not have to think, they just have to watch. Realizing that the population of the US is now hugely larger than it was back in the 1880’s actually takes a little thought. You have to realize that not only did people move west, but they continued to live in the east in greater densities which is indicated by the size of the yellow circles, but would be even more obvious if the cities were like little hillocks on the landscape. Big yellow dots equaling density requires a move from the ‘seeing is believing’ to something else. If, however, the map grew in the third dimension as a more direct representation of the mass of humanity sitting on the face of the earth at these locations, we’d be back in ‘seeing is believing’ territory.

A graphic that is a ‘seeing is believing’ creation is instantly legible and can free your brain to think about other things which is a good thing. On the other hand, a graphic that achieves a ‘seeing is believing’ mechanism will end up obscuring complexity. This is good when that complexity does not add to the ability to think through the next set of concerns, but can be a serious drawback. It is good to be able to get a diversity of people able to quickly grasp an argument, but there is a danger in presenting an hermetically sealed glossy image.

Relevant Resources

University of Kentucky Appalachian Center. US Population Growth from 1790-1990

First Thing’s First: Apologies

My apologies for failing to post for a few days. If you noticed, I’m flattered. I had some deadlines and limited access to the internet late last week. Unfortunately, March is a very busy month and I will likely have this problem again before the month is out. I’ll try to make up for it when I can.

What Works

I have always been a fan of the population by gender and age chart, even in the static form that you see before clicking through above. It is quite an achievement to clearly represent three different variables on a two dimensional graph. It helps immensely that gender here is a binary value. If it were tertiary or tertiary plus, this strategy would fall apart. Once you click through, you’ll see that the animation adds yet another variable, time. And time is a real kicker here. You can see how China’s population goes from having many young people and few old people to 2050 where the largest category is between 60 and 64 years old. Great way to take an old graphic technique – the static version – and animating it.
(I would love seeing this thing as population by age sticking married people on one side and unmarried people on the other as an animation.)

What Needs Work

The colors and overall treatment of the graphic as a designerly element. Red and orange makes it look a little like it’s yelling ‘Caution! Proceed at your own risk!” the whole time. But then, I guess we all have to worry about what is going to happen when the population pyramid becomes a slender pillar with an ionic capital.

Relevant Resources

United Nations (1999): World Population Prospects. The 1998 Revision. New York. Link to animation. [graphic credit to Heilig, G. 1999]