Data Visualization Best Practices and Common Mistakes

Charts persuade. A reader who would question a sentence often accepts a chart at a glance, which is exactly why small design choices matter: an axis that starts in the wrong place or circles scaled the wrong way can turn a minor change into a dramatic one. Most such distortions are accidental, produced by software defaults and good intentions. This guide covers the common mistakes and the practices that prevent them, and measures the distortion where it can be measured.

A way to measure distortion: the lie factor

The lie factor compares the size of an effect shown in a graphic with the size of the effect in the data. A value of 1 means the chart is faithful; above 1 it exaggerates, below 1 it hides (Wikipedia: misleading graph). The effect size is the relative change between two values.

Mistake 1: bar charts that do not start at zero

A bar's length is its value, so cutting the axis cuts the bars. Two years of sales, 50 and 52:

def effect(first, second):
    return abs((second - first) / first)

def lie_factor(shown_first, shown_second, data_first, data_second):
    return effect(shown_first, shown_second) / effect(data_first, data_second)

this_year, last_year, axis_start = 52, 50, 48
print(f"data: {effect(last_year, this_year):.0%} increase")
print(f"bars drawn from zero: lie factor {lie_factor(last_year, this_year, last_year, this_year):.1f}")
print(f"bars drawn from {axis_start}: lie factor "
      f"{lie_factor(last_year - axis_start, this_year - axis_start, last_year, this_year):.1f}")

data: 4% increase
bars drawn from zero: lie factor 1.0
bars drawn from 48: lie factor 25.0

With the axis starting at 48, the second bar is drawn twice as long as the first: a 4% increase looks like a doubling, an exaggeration of 25 times. Some software chooses such axes automatically. The practice: bar and column charts always start at zero. Line charts are different, because they encode values by position, not length; a line chart may use a non-zero axis to show variation, as long as the axis is clearly labelled.

Mistake 2: scaling shapes by width instead of area

Bubbles, circles and pictograms are read by their area. If a designer makes the radius proportional to the value, doubling the value quadruples the area:

small, large = 100, 200                                 # e.g. customers in two regions
radius_scaled_area = (large / small) ** 2               # radius drawn proportional to the value
print(f"value doubles; circle area grows {radius_scaled_area:.0f}x -> lie factor "
      f"{lie_factor(1, radius_scaled_area, small, large):.1f}")
area_scaled_radius = (large / small) ** 0.5             # radius proportional to the square root of the value
print(f"area-scaled circles: radius grows {area_scaled_radius:.2f}x, area 2x -> lie factor "
      f"{lie_factor(1, area_scaled_radius ** 2, small, large):.1f}")

value doubles; circle area grows 4x -> lie factor 3.0
area-scaled circles: radius grows 1.41x, area 2x -> lie factor 1.0

Radius scaling triples the apparent difference. The fix is to scale area, making the radius proportional to the square root of the value. Better still, for precise comparisons use bars: people also struggle to compare areas of circles accurately, as the same source notes.

Mistake 3: confusing percent with percentage points

before, after = 0.02, 0.03
print(f"conversion {before:.0%} -> {after:.0%}: +{(after - before) * 100:.0f} percentage point, "
      f"+{effect(before, after):.0%} relative")

conversion 2% -> 3%: +1 percentage point, +50% relative

A conversion rate rising from 2% to 3% is a one percentage point increase and a 50% relative increase. Both are correct; mixing them up is not. Label changes in rates explicitly as points or percent, and consider showing both when the audience will make decisions from them.

Mistake 4: the wrong chart for the relationship

Choose the chart by the relationship you want to show, not by what looks impressive. The Financial Times' Visual Vocabulary organises chart types by exactly that: deviation, correlation, ranking, distribution, change over time, magnitude, part-to-whole, spatial and flow (FT: Visual Vocabulary). A few rules of thumb:

Mistake 5: dual axes that invent relationships

Two series on one chart with different left and right axes can be made to look closely related, or unrelated, simply by choosing the two scales. The reader cannot tell which. Prefer two small charts stacked with a shared time axis, or index both series to 100 at a common starting point, or plot one against the other in a scatter plot if the relationship is the point.

Mistake 6: colour without meaning

Colour should encode something: a category, a highlight, a direction. Common problems are a different colour for every bar when the bars are the same kind of thing, rainbow scales for ordered values, and red and green as the only signal of good and bad. Accessibility guidelines say colour should never be the only visual means of conveying information (W3C: use of colour); add labels, symbols or position. Use a single hue in varying lightness for ordered values, and one accent colour for what the reader should notice. Dashboard design principles includes a contrast check for palettes.

Mistake 7: clutter and decoration

3D effects distort lengths and angles, heavy gridlines compete with data, and legends far from the lines they describe make readers work. Label lines directly, lighten or remove gridlines, drop borders and shadows, and round numbers to the precision that matters.

Mistake 8: charts without context

A chart of this month's sales by region says little without a comparison: last month, last year or target. Show the comparison, state the period and source, give sample sizes for rates, and write a title that states the finding, "Northern region fell 12% below target", rather than "Sales by region". How to tell a story with data covers building a sequence of charts around such findings.

A pre-publication checklist

1. Do bars start at zero, and are non-zero line axes clearly labelled?
2. Are areas, not radii, proportional to values?
3. Are rate changes labelled as points or percent?
4. Does the chart type match the relationship shown?
5. Is colour meaningful, accessible and never the only signal?
6. Is there a comparison, a period and a source?
7. Does the title state the takeaway?

Charts and graphs, heatmaps and data storytelling techniques are part of the data visualisation module of the Data Analytics course.

Sources

• Misleading graph (Wikipedia) — Wikipedia
• Visual Vocabulary (Financial Times chart-doctor) — Financial Times
• Understanding Success Criterion 1.4.1: Use of Color (W3C) — W3C Web Accessibility Initiative