Look out for these lies with charts

      Chart’s purpose is usually to help you properly interpret data. But sometimes, it does just the opposite. In the right (or wrong) hands, bar graphs and pie charts can become powerful agents of deception, tricking you into inferring trends that don’t exist, mistaking less for more, and missing alarming facts. There's a simple takeaway from all this: be careful when designing visualizations, and be extra careful when interpreting graphs created by others.
      It helps to know the kinds of tricks that JavaScript charts can try to pull. Here are eight.

1. Puzzling Perspective

JavaScript Chart library VanCharts

      Both of these pie charts show “labor” taking up 30 percent of some total. But you probably noticed that the chart on the right makes the labor slice look a lot bigger by positioning it in the foreground, which gives it a thick 3D edge and more than double the number of dark blue pixels than when it’s in the background.

      Human vision isn’t very good at interpreting the third dimension.When confronted with a 3D chart, we assume that more color indicates a greater amount. So when more pixels are used to represent one slice of a pie chart, the slice appears more significant. That’s why we can assign a greater value to foreground slices in 3D pie charts.

2. Swindling Shapes

JavaScript Chart library VanCharts

      A classic way to lie with a chart is to introduce irrelevant information. In the chart on the right, the only relevant property is cone height. But, while the cone volume is irrelevant, it is also very difficult to ignore, encouraging us to assign a greater value to the larger part of the cone.

      In both JavaScript charts, administrative costs take almost a third of each dollar. While this matches reasonably with the left chart, the right chart seems to shrink administrative costs to something much less than a third. Anytime you ask anyone to judge just height and ignore the other measurements, it’s going to take extra cognitive load to disregard these other cues.

3. Truncated Y-Axis

      One of the easiest ways to misrepresent your data is by messing with the y-axis of a bar graph, line graph, or scatter plot. In most cases, the y-axis ranges from 0 to a maximum value that encompasses the range of the data. However, sometimes we change the range to better highlight the differences. Taken to an extreme, this technique can make differences in data seem much larger than they are.

      Let's see how this works in practice. The two graphs below show the exact same data, but use different scales for the y-axis:

JavaScript Chart library VanCharts
JavaScript Chart library VanCharts

4. Trendsetters Are Tricksters

JavaScript Chart library VanCharts

      When two or more lines appear together in a chart, and they look similar to each other, we have the tendency to assume they are related. The red line in this chart represents suicide rates while the green line represents spending on science and technology—two completely independent sets of data. But on first glance, we tend to ask ourselves whether there could, in fact, be a causal correlation (if you can think of one, tell us in the comments section below).

      We like trends because they tell a story that make data more meaningful—that’s why we’re always on the lookout for connections, even when they don’t exist.

5. Using cumulative growth rates.

      Many people opt to create cumulative graphs of things like number of users, revenue, downloads, or other important metrics. For example, instead of showing a graph of our quarterly revenue, we might choose to display a running total of revenue earned to date.

JavaScript Chart library VanCharts

We can’t tell much from this graph. It’s moving up and to the right, so things must be going well! But the non-cumulative graph paints a different picture:

JavaScript Chart library VanCharts

      Now things are a lot clearer. Revenues have been declining for the past ten years! If we scrutinize the cumulative graph, it’s possible to tell that the slope is decreasing as time goes on, indicating shrinking revenue. However, it’s not immediately obvious, and the graph is incredibly misleading.

      There are lots of real-world cases of cumulative graphs that make things seem a lot more positive than they are. A prominent example is Apple’s usage of a cumulative graph to show iPhone sales.

6. Hiding in Plain Sight

JavaScript Chart library VanCharts

      We’re pretty good at noticing trends. But what if there’s one that someone doesn’t want us to see? The left chart clearly shows that marketing costs have tripled over three years. This same fact is there in the right chart, but it’s hidden among a host of other data, softening the impact of the sharp incline in marketing costs, and making that incline nearly impossible to quantify.

      Comparing the change in height between data sets while they also move up and down is not a natural visual task for us. It’s not clear to me whether I’m supposed to be looking at the overall height or the width or what. Any kind of comparison like that is more cognitive and less effortlessly visual.

7. Honey, I Shrunk the Scale!

JavaScript Chart library VanCharts

      At first glance these two JavaScript charts seem to depict two different data sets. But home in and you’ll see that the only difference is scale.

      This trick works because it’s difficult for us to examine a chart’s scale and data at the same time. Instead, we often get the gist of the curve first, then (if we decide we need to) look at the scale. By that point, though, our first impression has already been made.

8. Ignoring conventions

      One of the most insidious tactics people use in constructing misleading data visualizations is to violate standard practices. We’re used to the fact that pie charts represent parts of a whole or that timelines progress from left to right. So when those rules get violated, we have a difficult time seeing what’s actually going on. We’re wired to misinterpret the data, due to our reliance on these conventions.

      Here’s an example of a pie chart that Fox Chicago aired during the 2012 primaries:

JavaScript Chart library VanCharts

      The three slices of the pie don’t add up to 100%. The survey presumably allowed for multiple responses, in which case a bar chart would be more appropriate. Instead, we get the impression that each of the three candidates have about a third of the support, which isn’t the case.

      Another example is this visualization published by Business Insider, which seems to show the opposite of what’s really going on:

JavaScript Chart library VanCharts

      At first glance, it looks like gun deaths are on the decline in Florida. But a closer look shows that the y-axis is upside-down, with zero at the top and the maximum value at the bottom. As gun deaths increase, the line slopes downward, violating a well established convention that y-values increase as we move up the page.