Imagine A Pie Chart Stomping On An Infographic Forever

Advertisement

A certain category of design gaffes can be boiled down to violations of audience expectations. Websites that don’t work in Internet Explorer are a heck of a nasty surprise for users who, bless their souls, want the same Internet experience as everyone else. Websites that prevent copying, whether through careless text-as-image conversions or those wretched copyright pop-ups from the turn of the century, cripple a feature that works nearly everywhere else on the Internet. Avoiding this category of blunders is crucial to good design, which is why I am upset that one particular pitfall has been overlooked with extreme frequency.

According to statlit.org1, statistical literacy is the ability to read and interpret summary statistics in the everyday media: in graphs, tables, statements, surveys and studies. Statistical literacy is needed by data consumers.

The importance of statistical literacy in the Internet age is clear, but the concept is not exclusive to designers. I’d like to focus on it because designers must consider it in a way that most people do not have to: statistical literacy is more than learning the laws of statistics; it is about representations that the human mind can understand and remember (source: Psychological Science in the Public Interest2).

123
Can you notice what’s wrong with this infographics? You will find a detailed answer below, in the showcase of bad infographics.

As a designer, you get to choose those representations. Most of the time this is a positive aspect. Visual representations allow you to quickly summarize a data set or make connections that might be difficult to perceive otherwise.4 Unfortunately, designers too often forget that data exists for more than entertainment or aesthetics. If you design a visualization before correctly understanding the data on which it is based, you face the very real risk of summarizing incorrectly, producing faulty insights, or otherwise mangling the process of disseminating knowledge. If you do this to your audience, then you have violated an expectation of singular importance for any content creator: their expectation that you actually know what you’re talking about.

Anyone would be hard-pressed to find fault with the desire to make life prettier, but every color-coded geometric shape that you add to your awesome new “Lady Gaga vs. Eyjafjallajökull” infographic brings us all one step closer to something going horribly wrong. Most designers would probably not edit a politician’s party affiliation in a news article to make the text wrap in a way that is more pleasing to the eye. With data, though, careless designers all too readily sacrifice truth for the sake of aesthetics. Lovecraft’s eldritch horrors5 will rise only when the stars are right, but the preconditions for bad visual representations are already in place:

  • Demand for graphs, charts, maps and infographics has increased.
  • Increased data availability and more powerful tools have made it easier than ever to create them.
  • But you probably don’t have a solid understanding of how to interpret or process data.
  • Nor likely do your readers.
  • And there’s a good chance that neither of you know that.6

Do you hear that fateful, fearsome ticking? You’ve given your audience a time bomb of misinformation, just waiting to blow up in their faces. Perhaps they will forget your inadvertent falsehood before they harm someone with it, but perhaps they will be Patient Zero in an outbreak of viral inaccuracy.7 Curing that disease can be excruciatingly difficult, and even impossible: one of the more depressing findings in psychology is that trying to set the record straight can muddle it further8. The lesson is clear: provide the right story the first time. But the staggering variety of awful visualizations online makes it equally clear that designers haven’t learned that lesson yet. Let’s see just how bad it can get.

Showcase Of Bad Infographics

9
Large view10 (Source: The Nation11)

Yikes! Note how enormously misleading the red and blue bars are. There is absolutely no reason for their presence in this graph. Even if they were actually scaled to the number of total new jobs, a two-axis graph would still be difficult for most people to understand. The figure also doesn’t take into account a host of potentially confounding factors, including (but not limited to) population growth, women entering the workforce, shifts from part-time to full-time jobs, change in wages and GDP change.

123
Large view13 (Source: Physicians Committee for Responsible Medicine in Good Medicine Magazine14)

This graph circulated fairly widely for a while. The design of the food pyramid changed recently, in part because the visual characteristics of the old pyramid did not correspond well to the numerical recommendations. The new designer makes the same mistake but disdains “misleading” in favor of “mind-bogglingly dishonest.” The bottom tier of the left-hand pyramid takes up far more than 73.80% of the pyramid’s area, and the 3-D diagram enhances that distortion even further. Want a fun party game? Hide the numbers and ask your friends to guess what they are!

15
Large view16

This classic suffers from the same problem as the food pyramid: the odd mushroom shape makes seeing the correct relationship impossible at a glance. The disparity between Bravo and Tzar Bomba is like a bad joke… and the punchline? In real life, doubling the destructive power of a nuclear blast doesn’t even come close to doubling the height of the resulting mushroom cloud.

17
Large view18 (Source: The Economist19)

The flashy background and bright colors must have distracted this graph’s creator from the fact that it’s useless. Think the graph is describing crime rates? Think again. It actually describes the percentage change in violent crime rates. New York at 20% of its 1990 crime rate could still be more violent than Philadelphia at over 100% of its 1990 crime rate. If you want to know how dangerous these cities really are, you’ll have to look elsewhere.

20
Large view21 (Source: New Scientist22)

There have been worse pie charts, but this one is bad in a subtle way. The point of a pie chart is presumably to facilitate a comparison of land use, but this pie chart makes that very difficult. Given the combination of the huge number of categories and the huge change in their values, this would have been better rendered as a table.

23
Large view24 (Source: Somethingawful Forums342825)

This graph is a painful experience all around. Income is described as “percentile” but is shown in ranges. The category labels are placed randomly around the data points, rather than at the bottom where they belong. The data points are tremendous circular blobs that are impossible to compare at a glance. And that’s with only five data points!

26
Large view27 (Source: Somethingawful Forums342825)

This is a line graph of binge drinking and suicide rates. Wait, scratch that: it’s an abomination, Alphabetically ordered lists of states belong in tables—maybe—and that’s only if you wouldn’t prefer to index them by some variable or another. Two-axis charts are as bad as any idea, especially when it’s not clear what the two variables actually are. But the worst part? It isn’t population adjusted. The states with the most deaths are the states with the most residents: California, Texas, New York and Florida. Knowing that someone made this and thought enough of it to post it on the Internet makes me want to drink.

29
Large view30 (Source: in MOCH31)

A certain measure of artistic expression is a great thing. This, on the other hand, is not. The bars have no proportion, even though there is no aesthetic reason why they couldn’t. What could have been a perfectly appealing mix of presentation and information has left any semblance of usefulness to die of neglect. Why not make the flag’s background represent Haiti’s casualties and then scale the war casualties to match? The world may never know.

32
Large view33 (Source: Somethingawful Forums342825)

Trick question: what’s wrong with this map? Answer: there isn’t a map. The image may contain something that resembles a map, but it’s actually a map-shaped hole in effective data presentation. While the data in the table is presented more effectively, it’s too sparse to be of much use: how do those raw figures compare to tax rates, GDP, individual wealth or the many other factors that prevent easy comparison of states?

35
Large view36

This isn’t so poor a choice of representation at first glance. But several subtle flaws could mislead the casual observer. To the lower right, we see three blocks labeled “7%” that have wildly different heights, presumably because of rounding in display. Dropping the decimal points is sometimes acceptable, but you can’t have it both ways: either those digits matter and should be shown, or they don’t matter and shouldn’t appear anywhere in the graph (in either the labels or bars).

The other major design failure here is the key, which misleadingly states that the darkest color is for someone in the “top fifth.” But which top fifth? We can see that you have to have a graduate degree and end up in the top fifth in income to be the darkest shade, but that would put someone in the 94th percentile (that is, the top twentieth). This is a case of an intuitive concept (darker means either wealthier or more educated) executed in a sub-standard way.

I leave it to the audience to decide whether it’s a mite useless, or even misleading, to only consider Americans with full-time employment.

37
Large view38

The first thought anyone should have when they see this is that it’s way too cluttered. The concern for the flags is merely aesthetic (as if anyone knows more than a handful of state flags), but the concern for the labels is about truthfulness. We’re presumably meant to look at the top of the flagpoles, but we can’t do that because there’s no axis for comparison, so we look to the labels for information. This means that we’re not going away with any more information than we might have from a table, but we might come away with less if we accidentally judge using the curve of the labels that we’re reading instead of the curve of the flagpole tops. Compare California to Washington to see what a difference that would make!

Thankfully, most people won’t skim long enough to notice the worst offender, which lurks at the bottom of the page. I knew something was about to go terribly wrong when I spied the notice stating that the graph “starts” at $20,000. Is the bottom of the page $20,000? Or is it the red line? Why is this counter-intuitive perspective even being used? I fear I may be kept waiting a long time for answers.

39
Large view40, source41

Maps are a common way to represent information, but they’re also a common way to misrepresent information. This map is a wonderful example of that very un-wonderful fact. You can see a large version of it at its source, but I can’t recommend it for the faint of heart: the original is grossly oversized, its aesthetics are just plain gross, and it’s served as a PDF with even more awful JPG artifacts.

This map purports to show the number of murdered transgendered people over a one-year period. But there’s a big problem: there is no data for the vast majority of the world (either by country or by population!). The data that is there is likely quite suspect, too (only one transgendered person was murdered in a country the size of Russia?). Tracking hate crimes is notoriously difficult for a variety of reasons, most of which apply especially to the transgendered community; but even compelling reasons for a lack of accurate data don’t actually make up for that lack.

This map’s worst failing, though, is that its doesn’t show hate crimes at all. I obviously don’t condone murder, but within a large enough group, murders are a fact of life. Half a million people are murdered around the world each year, and if even one in ten-thousand people is
transgendered, we should expect to see hundreds of transgendered murder victims, for the same reason that we should expect to see tens of thousands of left-handed murder victims or hundreds of thousands of female murder victims.

Hate crimes against transgendered people are real; they can also deadly, which makes accurate information that much more critical. Perhaps presenting the information in this very sparse table in the context of a larger report would have been acceptable, but to use a poorly designed map with no disclaimers as a summary of findings is dishonest beyond belief.

Want Better Graphs? Get Virtuous Designers

If you’ve survived the array of horrors described above, take heart. Many design flaws can be remedied by learning patterns, principles or lenses that make avoiding disfunction easier. Even someone with no design background can read an article about why Comic Sans is never the right choice and resolve never to use it again. The curriculum is different, of course, but this is as true for data as it is for design.

Unfortunately, curing statistical illiteracy isn’t as easy as reading an article about it or even taking a statistics course. While a solid understanding of statistics is beneficial for a wide variety of purposes, countering statistical illiteracy requires the cultivation of an active interpretative technique that is separate from knowledge of pure mathematics.

Statistical literacy is only the bare minimum, though. The burden on designers is heavier because their uses of data often require them to go beyond interpretation and to perform some basic analysis, summarization or transformation of data. However, a formal education in research methods is probably too extreme. I believe that most mistakes of data could have been avoided had the designers focused on a limited skill set that is to a media producer what statistical literacy is to a media consumer. For now, let’s call this data mindfulness.

Mindfulness42 means exhibiting care, caution, exactness, prudence, regard and many other virtues. Data mindfulness is similar to someone imploring another to “be mindful” of something potentially dangerous. As a designer, you can be careful about the sources of data you choose and can be cautious of the claims you make based on that data. Your exactness is reflected in the effort you put into correctly transforming the original data. Your prudence relates to whether you are honest in your intent and methods. But regard comes closest to the concept of data mindfulness: to be mindful of your data—to avoid mistakes with it and prevent the harm that would result from such mistakes—you should regard it with respect.

Know Your Data: Mind, Body, And Soul

The mind-body-soul connection provides a convenient, memorable context in which to learn about data. With the mind already dealt with, where do the other two members of the trifecta fit in?

Our data’s “body” is its form and function. Like the human body, it consists of both overarching similarities and individual differences. Here we can draw an analogy with dislocation: just because your arm twists a certain way does not mean that it is supposed to; on the other hand, some people are indeed flexible enough to move in just that way. When we exceed the limitations of our body, we hear the body’s complaints loudly. But your data won’t let you know when you twist it out of shape (though you may hear some poor statistics professor screaming on its behalf). When we consider our data’s “body,” we’re considering the performance it can achieve and the stresses it can tolerate. That process often begins with these simple questions:

  • How was it collected?
  • What are its limitations?
  • Which mathematical transformations are appropriate?
  • Which methods of display are appropriate?

Our data’s “soul” is its context and broader meaning. One popular understanding of a soul is that it is some part of an individual that glorifies their uniqueness even while making them a part of a profound commonality. In a mystical context (whether you believe in it or not), we can easily understand this apparent contradiction. In a mundane context, many people would find the dissonance hard to swallow. This is unfortunate, because data must be understood in just this way: it is both an individual entity and a unit of a larger whole. Reconciling these is a notoriously tricky task, but some of the worst mistakes are avoided by collecting a few crucial bits of information:

  • Who collected it?
  • Why was it collected?
  • What is its context in a broader subject?
  • What is its context in the field of research that created it?

These eight questions should take under five minutes to run through, but they would prevent the vast majority of mistakes that designers make. Let’s assume for a moment, then, that you’re a responsible designer, and you try your best to come up with answers to these questions for the data you want to use. What if you can’t?

If your data’s “body” fails to stand up to scrutiny, then this is not necessarily a problem, depending on how serious is the task that you intend to put it to. Restricting yourself to a scientific level of evidence will earn you an A+ for effort, but it is not necessary for most design purposes. You will be limited in the claims you can make, but you can usually still make use of the data in some form without sacrificing honesty. Even scientists love preliminary data (or “napkin math,”) as long as they know that that’s what they’re looking at!

If your data’s “soul” is tainted, though, it could go to hell… in a figurative sense, of course: it would be banished somewhere where people wouldn’t draw the wrong conclusions from it. Getting some use out of potentially biased data is not impossible, but it’s not easy, and there are often other sources to draw upon anyway. If you smell smoke or, heaven forbid, a whiff of brimstone, don’t assume it’s because your infographic is so hot. Even people who do this for a day job get burned by misleading or downright falsified data more often than you might expect. For most any controversial issue, figuring out whose numbers to trust is difficult.

Learn It, Live It. You Can Love It Later.

I suspect that some designers are beyond their comfort zone by this point, so I’ll use a more familiar topic as an example of how to fit data mindfulness into your design. Many of you probably have experience with color theory or typography or have even taken courses on them. Or perhaps neither is your thing but you can still explain to someone why an image printed out looks different than on a monitor, or why Papyrus is a poor font choice. More importantly, you likely know where to find detailed information on particular topics in those fields when you need it.

Simply studying and practicing these fields to become proficient in them is possible, but few people can afford to master every skill they use in design. And yet most of us could afford a little more time to round out our skill sets. Just as with color theory and typography, even a novice understanding of the concepts involved in analyzing and representing data tunes a designer into the fact that it truly is a separate skill. This awareness allows you to stop yourself and say, “I don’t know how to do this yet.” Consciously recognizing that there is a “this” at all is an absolute prerequisite to being mindful.

Conclusion

Perhaps this all sounds a little extreme to you. But remember the stakes: while a poor font choice can ruin a meeting, a poor interpretation of statistics or data can kill you43 (or someone else, for that matter). Proper use of data is a viciously complicated topic, and I am no expert. But I feel confident enough to make this claim: if it would lead to the wrong conclusions, not presenting the data at all would be better.

Here is a simple rule for designers: your project isn’t ready to be released into the wild if you’ve spent more time choosing a font than choosing your data.

(al)

Footnotes

  1. 1 http://www.statlit.org/
  2. 2 http://psi.sagepub.com/content/8/2/53.full
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2010/04/food-pyramid.jpg
  4. 4 http://en.wikipedia.org/wiki/1854_Broad_Street_cholera_outbreak#John_Snow_investigation
  5. 5 http://en.wikipedia.org/wiki/H._P._Lovecraft
  6. 6 http://en.wikipedia.org/wiki/Illusory_superiority#Cognitive_tasks
  7. 7 http://www.informationisbeautiful.net/2010/correction-apology-planes-or-volcano/
  8. 8 http://www.washingtonpost.com/wp-dyn/content/article/2007/09/03/AR2007090300933.html
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2010/04/dem-rep.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2010/04/dem-rep.png
  11. 11 http://www.thenation.com/doc/20090803/johnston
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2010/04/food-pyramid.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2010/04/food-pyramid.jpg
  14. 14 http://www.pcrm.org/magazine/gm07autumn/health_pork.html
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2010/04/nuclear-bomb.gif
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2010/04/nuclear-bomb.gif
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2010/04/violent-crime.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2010/04/violent-crime.jpg
  19. 19 http://www.economist.com/daily/chartgallery/displaystory.cfm?story_id=E1_TQPQDVSR
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2010/04/human-impact.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2010/04/human-impact.png
  22. 22 http://www.newscientist.com/article/mg19225731.100
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2010/04/mccain-cuts.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2010/04/mccain-cuts.png
  25. 25 http://forums.somethingawful.com/showthread.php?threadid=3232647
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2010/04/state-suicide.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2010/04/state-suicide.png
  28. 28 http://forums.somethingawful.com/showthread.php?threadid=3232647
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2010/04/haiti-stats.gif
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2010/04/haiti-stats.gif
  31. 31 http://whoismoch.com/298394/Haiti-Awareness
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2010/04/income-tax.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2010/04/income-tax.jpg
  34. 34 http://forums.somethingawful.com/showthread.php?threadid=3232647
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2010/04/income-education.png
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2010/04/income-education.png
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2010/04/spending-state.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2010/04/spending-state.jpg
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2010/04/map.gif
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2010/04/map.gif
  41. 41 http://www.tgeu.org/tdor2009english
  42. 42 http://thesaurus.com/browse/mindfulness
  43. 43 http://e-patients.net/archives/2008/11/lies-damn-lies-and-statistics-collective-statistical-illiteracy.html

↑ Back to topShare on Twitter

Eronarn is a recent graduate with a degree in psychology and political science. He has concluded from his studies that computers are much easier to understand than people and much more acceptable to hit when they misbehave. When he isn't doing web work, he spends too much time on Twitter and not enough time blogging.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Nice, like the topic – will have to bookmark for future use. Thanks :)

  2. 2

    Never trust a chart that you haven’t faked yourself!

  3. 4

    Good article, but I would’ve liked to have seen examples of what he thought good infographics were.

    • 5

      agreed. i was hoping for some good examples as well. diagnosing an illness but offering no treatment doesn’t do much to cure the disease. no matter whether it is a explainable process or a learned and refined skill, it would be good to see the goal and learn how to get there.

    • 6

      I agree that the author would’ve done better by adding GOOD infographics.
      I think that a good infographic is one that you can grasp the data/information on at a first glance. You start scanning the design and start piecing together all the information until you get the full story.

      I work mostly with infographic and I think this one is pretty fun to read: http://2.bp.blogspot.com/_0j_JXbrnWa0/S15Z4atIzSI/AAAAAAAABZQ/pClG6Cx2qBg/s1600-h/storage-full.jpg

    • 7

      I third that. Well designed examples are required in such an article. Nonetheless, well written and fine examples of bad usage!

    • 8

      Thanks for the feedback!

      The piece was already getting somewhat long, and I preferred to use the space to point out bad examples because they’re much harder to spot than good ones. I would say that the default assumption is that a graph is “good” if it isn’t hideous and provides some information quickly (regardless of whether that’s the “right” information). The Economist one in particular is a great example of a graph that would be perceived as good if someone didn’t take a closer look.

      Here’s a two-part infographic I like, because while it uses volume, it does so to represent an actually physical meaningful quantity: http://i50.tinypic.com/2pys08h.gif & http://i47.tinypic.com/jg5oyf.gif

      This is an example of a good map of the world: http://i41.tinypic.com/105qjck.png

      This is a little technical, but if you understand how ideology (left-right) scores work, I consider this a good graph: http://i43.tinypic.com/2ecn49x.png

      Finally, anything by Pew or Gallup is usually simple, concise, and effective even if it’s not as pretty as infographics.

      • 9

        If it’s so hard to spot a bad infographic then one can’t help but question the relevance of the article…

        • 10

          Well, that is why it’s written, actually: as with termites, not easily spotting a problem doesn’t mean that there is no problem. It is quite possible to come away with misleading “knowledge” if the source looks credible or is visually appealing. Even a graphic with appropriate visual design for that type of data can still be problematic if it uses inappropriate data sources (say, the non-population-adjusted death rates from above).

      • 11

        Spotting a bad infographic is not hard: they’re everywhere. Just look for colors, shading, sparkles, etc.

        BTW, what’s the significance of 3.2 M tonnes of coal and 25 tonnes of U? Equivalent energy content? Annual consumption?

    • 12

      Bradley Gauthier

      May 11, 2010 8:51 am

      Yes, we now know what not to do… nice article but a follow-up article of good infographics would more helpful

  4. 13

    Charts and Map

    May 10, 2010 6:41 am

    >data can kill you (or someone else, for that matter)
    Oh! yes lol

    If you use the chart / map in right way, you don’t need any words to explain.

    Pie chart can be beautiful some times eg: http://chartsbin.com/view/wwu and map too http://chartsbin.com/view/aq2 http://chartsbin.com/view/z1a

  5. 14

    There’s another problem with graphics like the one tracking violence against transgendered people. Choropleth (i.e. colour-coded) maps cannot – must not – be used to represent simple data counts. To use a more pleasant example, imagine someone created a world map tracking Sarah Palin jokes, in which countries contributing more than 100 jokes were coded red. Imagine further that Latvia, Lithuania, Estonia, and Russia each contributed 101 jokes. On a naive choropleth map, Russia’s contribution would visually outweigh the Baltic states’ contribution by something like 100:1, even though the Baltics, collectively, accounted for three times more jokes.

    This problem is pervasive with choropleth maps. You just can’t use them that way.

    http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/04/map.gif

  6. 15

    An uncharacteristic blog post from Smashing Mag. There’s not much value here, just a lot of scathing commentary.

    • 16

      I agree. I feel pretty bad for the designers who were roasted, though the sin of misrepresenting data is pretty grave, intentional or not.

  7. 17

    This article points out some really great things, but I don’t think that the buck stops with a designer on how useful the data is. I see governmental data all the time misleadingly represented for their own gain. It’s often up to someone else whether averages are interpreted in mode or median, for example, and the reason often comes down to what makes them look better. However, it is something that people should take more notice of and everyone involved in data should be responsible for the way it is used. Remember that there are lies, damned lies and statistics!

  8. 18

    Tomáš Kapler

    May 10, 2010 8:31 am

    It can be even worse – those graphs are ugly, but it seems that they were not created to be misleading, just created by someone without brain.

    What i dislike more are the graphs, which may look nice, but they are created to be misleading. E.g. to show number 19 and 20 on a scale starting with 18 and ended with 20, so it looks like 20 it 2 times bigger then 19. Or use perspective to gain the same effect (put the number you want to show bigger “closer”).

  9. 19

    I’ve seen great articles on making meaningful infographics – this isn’t one of them. The author could have summed this up in 140 characters or less: “Make sure your graphs are accurate, proportional, and easy to interpret.”

    Writing an article about how to actually create accurate, proportional, and usable infographics would have required a bit more thought, but at least it would’ve been worth reading.

    • 20

      You make it sound so simple! Basketball coach says, “Score more points”.
      The sheer number of bad charts and graphs obviously has no simple solution.

  10. 21

    I would have liked to see good examples too

  11. 22

    I agree with Brad, This article is very uncharacteristic of Smashing Magazine. I agree with most of the criticisms regarding form over function but some of the examples are given without context. For example the map of transgendered deaths, the criticism seems to be based on the belief that this map represents hate crimes. I see no evidence of that belief on that graphic. Perhaps the site in question was indeed discussing hate crimes but the reader of this article has no way of knowing that(based on the article alone). I was actually expecting a criticism on the redundant use of color and numbers, but instead, got a rant on how difficult it is to track hate crimes. I’ll use the graph with binge alcohol deaths as another example. There are plenty of things that could be wrong with the graph; the choice of line rather than bar for example. The critique states that the worst part of the graphic is that it is not population adjusted. Is that really the worst part? Without further context how do we know that the graphic needs to be population adjusted? Perhaps the intent was to show a correlation between state population and alcohol related deaths. That might be stretching it a bit but my point is that some of the criticisms are not really addressing aesthetics and functionality. They seem to be addressing intent, which is difficult for the reader to ascertain without further context.

    • 23

      From the linked site:

      “The Transgender Day of Remembrance is held to raise public awareness of hate crimes against trans people, to provide a space for publicly mourning and honoring the lives of those trans people who might otherwise be forgotten.”

      I tried to limit myself to a paragraph or so per example even though several could have benefited from a lot more than that. This particular map has many problems, but I consider the data flaws to be worse than the presentation flaws. The map would be understandable if it “just” had duplicate ways of representing the data, whereas the data being flawed by falsely equating murders and hate crimes will never allow for a good representation.

      Thanks for the comment, though; I did generally link the sources of these graphs, but you’re right that some would have benefited from addressing their context within the article directly.

  12. 24

    You should always send your readers to that book for better graphs :
    The visual display of quantitative information, by Edward Tufte.

    http://www.amazon.com/Visual-Display-Quantitative-Information-2nd/dp/0961392142/ref=sr_1_1?ie=UTF8&s=books&qid=1273512841&sr=8-1

  13. 25

    By the reason exposed above and my personal appreciation, I think this article is out of the smashing magazine standards.

  14. 26

    Eronarn
    Thanks for taking the time to address my post, It is much appreciated. Your response is valid. It was just a little confusing on the first read through.

  15. 27

    Great examples of InfoBS. Designers go out of their way to catch the user’s attention, but they should let the data speak for itself. Why try to correlate several things in one chart, when you can do it in several easier to understand charts, with commentary between them?

    The coin map reminded me of this great vid:

    http://www.youtube.com/watch?v=cWt8hTayupE

  16. 28

    Hi,

    Interesting article. About the food pyramid. I don’t know if it was mind bogglingly dishonest as you say as opposed to just a mistake (honest or devious, I don’t know):

    The *height* of the meat/dairy is indeed roughly 73 or 74% of the *height* of the pyramid. What may not be clear in your note about the flaw is that as a pyramid, because it gets smaller at the top, the volume of the pyramid would need to be 73/74% not the height.

  17. 29

    Where’s the second half? It seems to be missing examples of well rendered data. I enjoyed the article, but feel it was missing that important part. If you’re going to blast all that’s broken you should chase it with things that work and why.

    Also the last lines grated. “Here is a simple rule for designers: your project isn’t ready to be released into the wild if you’ve spent more time choosing a font than choosing your data.”

    Yes a significant amount of a designer’s time is spent working with type (and other details that those outside the design world might easily poo poo). This is what we do. We solve problems visually. I can agree that especially with something functional, like presentation of information, form is only half the task. The design should function *as well as* intrigue and inform visually.

  18. 30

    may be- the end client would have loved some of these- may be the designer did what client really wanted instead of pitching their own “creative” ideas and getting kicked out of the project.. so its not always the designers, it is also based on the “forced” requirenments.

    • 31

      It’s certainly true that the client can force demands on the designer. However, the influence can go both ways: designers are quite willing to explain to their client that Comic Sans or hot pink text are bad ideas. That being said, explaining why changes should be made for data clarity reasons is harder than when considering purely aesthetic choices because for the latter you can at least say something like “When was the last time you saw the New York Times use Comic Sans?”. On the other hand even reputable organizations and well-educated people (plenty of researchers, for example!) make and use bad graphs. So even if it’s doable, it’s certainly a difficult situation to find oneself in!

  19. 32

    David Desjardins

    May 10, 2010 12:35 pm

    A beautiful, well presented article that hit the nail squarely on the head.

    I have been transitioning from traditional graphs and pie charts in our monthly internal analytics to simpler to digest infographics. The process has been slow, but the results – both in terms of how we generate them, and how they have been received – has been excellent. The goal here is to use infographics to engage users and enable them to make informed decisions.

    Too many times infographics are used to skew data or to emphasize a particular ‘departmental’ view of that data. The examples above are just the beginning.

    Understanding your data sources and the math behind them is critical to providing balanced and informative imagery. The creative use of that display is ongoing challenge.

    More articles like this please!

  20. 33

    Examples of good graphs?

  21. 35

    Read up on Edward Tufte & Stephen Few.

  22. 36

    An insightful and well-written article. The topic is well researched and fully developed. Thanks Eronarn.

    If someone needs examples of good graphs, there are tons of posts featuring infographic showcases out there.

  23. 37

    If you talkin’ bout infographics, make sure it has a good Graphics, you see good visual graphics has a lot information than just a mere charts and text, designers uses colors with meanings and shapes with good eye-catching and yet well observed, though the statistic is factual but the results is significant if using good visual graphics. Thanks for sharing

  24. 38

    I would argue, however, that a lot of these charts, though they may convey the data without accuracy, conveys the message that is being presented. I’m sure if most of these charts were completely accurate, many of them would leave the consumer wondering what the message was.

    This article is like having your English teacher yelling at you for using color, font-weight, and text-decoration in your web pages to emphasize the point.

  25. 39

    Well, if you’d like some examples of bad charts transformed into good ones, check out the slide clinic (http://www.slideclinic.com). His slides were featured in Presentation Zen.

  26. 40

    Why is Comic Sans always wrong? I agree that it has no place in business use or for serious applications, but do you consider it to be appropriate for an informal note to a friend?

    • 41

      Yes. Always. It’s just so…. round? It’s hard to say, perhaps I just have strong feelings associated with it after years of misuse, and now I can’t tolerate it anymore.

      Anyway, interesting post. Thanks for sharing these infographics with us.

  27. 42

    great article – and great timing, as I’m working on some infographics for mog.com right now.

    i also came across this bad example on digg today: http://i.imgur.com/LpBte.jpg

    brutal!

  28. 43

    Love the paraphrase from 1984 in the title. ;-)
    Important points throughout the post. Good job. In my universe misleading information is the worst non-violent crime in an information society.

  29. 44

    Pierre Vanderpol

    May 12, 2010 12:31 am

    Hi !
    Thanks for the insights… But don´t you think that the intention behind information is fundamental, and as a designer you have no control over that ?

    Like in the chart above showing jobs under republican administrastion VS. Democrat that is totally misleading. OK.

    But a politician wants to be elected, right ? Hence they show the pieces of information that are good for them. They do not care about showing the “truth”. This is not archaeology, philosophy or metaphysics.

    Showing data has a purpose: among others: informing the target group to get more voters, more clients, sell more products, raise more money, lobby, getting at the White House, etc.

    Otherwise, if all graphs were 100% accurate and not misleading, you can trust me that oil companies executives, food industry, monsanto and all the governments and all the bankers in the world would be attacked by an angry mob at once.

    Of course, sometimes it is the designers´ mistake and you are right to pinpoint that. One should try to do his best with information, understand it, so as to give the best possible visual representation.

    But on the other hand information, has always been intertwained with power. You control the mass over the control of information, and you influence a market with carrefully selected information.

    So it is not, in my view, always the designers fault, but also the intention and purpose of the client willing to display information.
    Can you convince the democrats to show an accurate graph, impartial and not biased ? I wish you good luck…

    But maybe your “righteous design” could force politician to be more honest, and hence interest in politics and society issues would rise again ? That´d be great…

    This being said, thank you for your article again, which is much more interesting than “50 super cloud brush round up”. I am really looking forward a Part.2 !!!

  30. 45

    Hello? Design gaffes…”Websites that don’t work in Internet Explorer are a heck of a nasty surprise for users who, bless their souls, want the same Internet experience as everyone else.” Smashingmagazine.com doesn’t work on IE6. At least not on my machine. This sucks for us developers in the medical industry.

  31. 46

    I think your understanding of what the transgender map is supposed to show is flawed. Read the note on the source page you linked. It basically says that while they think this data is hate crime related, that’s only their opinion, so they’re presenting it neutrally.

    Also, following a criticism of a volunteer minority group with the header about “virtuous designers” was probably just an error of juxtaposition, but it is still unnerving to me. So long as we’re talking about good design.

  32. 47

    Finally! A critical article about information graphics! An article showing not only (like so many lately) – that information visualization is good (a.k.a. “nice”) and “goes good” with the text, but that information visualization demands to have content, rules, context. In the battle between aesthetics and functionality in this fast speed world, the aesthetics often charms for that split second the information has the viewers attention; functionality is left far far behind. We just needed something to “entertain” us for a short time, until another “entertainment” passes by.
    I wouldn’t be surprised that some future surveys show that people, actually, don’t understand anything. Just pretending.. just pretending…
    THX!

  33. 48

    Arguably, the point of the graph from The Economist was to highlight the declining crime rates in America (and perhaps that Philly is the sole state where the level of violent crime hasn’t declined) rather than to compare absolute crime rate. The Economist is infamous for their economy of space with their graphs. I’m just thinking that maybe the scale if they used absolute figures would’ve made it too large/unreadable and they settled for the best way to show that (from the article) “the big picture is not that frightening”

  34. 49

    A most enjoyable tour of some provocative infographs. Thanks for quoting my definition of statistical literacy from StatLit.org. If you want to give this post as a talk at a national statistics conference or as a paper in a general-interest journal, contact me.

  35. 50

    I really appreciated this article. I, like many other graphic designers, have a bad habit of putting form over content, and it was refreshing and much needed to get a crash course in how to do right by your data.

    To the people saying this is outside of Smashing Magazine’s standards, you’re absolutely right. Still the most successful designers are the ones with a real understanding of what they’re representing and it’s great to see a different point of view on what makes a graph bad, other than the usual “the colors ain’t pretty”.

    Thanks!

  36. 51

    This article is outside of Smashing Magazine’s usual standards in that it actually exhibits standards. In the past, articles addressing data visualization in Smashing Magazine have featured an assortment of both good and bad graphics without discriminating between them. This article proposes a respect for clarity of meaning that most “infographics” fail to exhibit. I applaud the author’s contribution.

  37. 52

    A comment about the Economist infographic. If I recall correctly, it accompanied an article on urban crime Philadelphia’s, and how it basically stood alone as having a persistently high crime rate despite the broader national decline in large-city crime. I agree the busy background was unnecessary, but the graphic was relevant to the article which it accompanied.

  38. 53

    Golf Iron Bargains

    December 11, 2010 7:46 am

    Does your blog have a contact page? I’m having a tough time locating it but, I’d like to send you an email. I’ve got some creative ideas for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it expand over time.

  39. 54

    Great page!!
    Graphing is partially an art, and bad examples are a good learning tool.
    The “McCain Tax Cuts” has those crazy circle area comparisons. This seems to be a new form of badness. I can’t imagine sitting down and computing areas, etc. in the pre-Excel days.

  40. 55

    Pie charts is something everyone understands and the method used even by children to divide shares for other children when they must share.

    Simple pie charts may be the best way to explain the economics of anything to the public to inform, accurately.

    It’s also how families do their own finance at the kitchen table, or in the boardroom.

↑ Back to top