Data Viz

Why a Picture Beats a Table

Here are Priya's Mathematics Unit Test scores from Term 1 of Grade 8 (April to September, out of 100):

Now answer this without a calculator: in which single month did Priya's score jump the most compared to the month before? Go on, try it. You probably found yourself doing six small subtractions in your head — 62 minus 58, 60 minus 62, 71 minus 60, and so on — before you could even compare the differences to each other. That takes real mental effort, and it is easy to make an arithmetic slip along the way.

Now imagine the exact same six numbers drawn as a line that rises and falls across the page. You would not calculate anything. You would just look at which segment of the line is steepest, and your eyes would find it in under a second. The numbers did not change. What changed is that they got translated into a shape — and human vision is extraordinarily good at comparing shapes, but quite slow at comparing raw digits.

That translation is the entire subject of this chapter. Data visualization is the practice of converting numbers into visual properties — position on a page, the length of a bar, the angle of a wedge, the position of a dot — so that comparisons your brain finds hard in table form become comparisons it finds effortless in picture form. It is not decoration added after the real work of analysis is done. Choosing the right visual translation, and choosing it correctly, is itself a technical skill with rules — and choosing the wrong one, as you will see later in this chapter, can make honest data look like it is telling a lie.

The Core Idea: Encoding a Number as a Shape

Every chart, no matter how fancy it looks, is built from the same three-step recipe:

1. Pick a data value you want to show (a mark, a rainfall figure, a count of students).
2. Pick a scale — a rule that converts that number into a measurement on the page, such as a height in pixels or an angle in degrees.
3. Draw a mark at that measurement — a bar, a point, a slice.

Step 2 is where most of the thinking happens, and where most mistakes are made, so let's slow down and build a bar chart by hand.

Building a Bar Chart by Hand: The Scale Formula

Suppose a Grade 8 class of 40 students was surveyed on the single question: "Which app do you spend the most screen time on?" The results were:

To turn "14 students" into a bar height in pixels, we need a scale. First, pick an axis maximum — a round number at or above the largest value. The largest value here is 14, so we round up to 15. Next, decide how tall the whole chart area is allowed to be — say 300 pixels. The scale formula is:

pixel_height = (data_value / axis_maximum) * chart_height_in_pixels

Let's apply it to YouTube's bar: pixel_height = (14 / 15) × 300 = 0.9333... × 300 = 280 pixels. For Instagram: (10 / 15) × 300 = 200 pixels. For WhatsApp: (9 / 15) × 300 = 180 pixels. For Games: (7 / 15) × 300 = 140 pixels. Notice that every value gets divided by the same axis maximum — that shared denominator is what makes the bars honestly comparable to each other. Here is the result:

This is exactly what a bar chart is: a collection of rectangles whose lengths were each computed from data using one shared scale. Bar charts are the right tool whenever you are comparing separate categories — apps, subjects, states, players — because the human eye compares the length of aligned bars more accurately than almost any other visual property.

In Python, the same chart is built with a library called matplotlib. Reading this code line by line: it imports the plotting module, stores the four category names and four counts in two lists, draws a bar for each category (matplotlib automatically applies the same scale formula you just did by hand), then adds a title and axis labels before displaying the figure.

import matplotlib.pyplot as plt

apps = ["YouTube", "Instagram", "WhatsApp", "Games"]
students = [14, 10, 9, 7]

plt.bar(apps, students, color="steelblue")
plt.title("Which app do Grade 8 students use most?")
plt.xlabel("App")
plt.ylabel("Number of students (out of 40)")
plt.show()

Running this produces four blue bars of heights proportional to 14, 10, 9 and 7, labelled YouTube, Instagram, WhatsApp and Games along the x-axis, with the title and both axis labels printed exactly as given — matplotlib chooses its own axis maximum and gridlines automatically, but the underlying idea is identical to the formula above.

Line Charts: When the X-Axis Has Order

Go back to Priya's six monthly scores from the introduction. A bar chart would work here too — six separate bars, one per month — but a line chart is a better choice, and the reason is precise: the months April through September are not just six unrelated categories, they are six ordered points along a single continuously flowing quantity, time. Drawing a connecting line between them makes a specific visual claim: "this is one thing changing over time, and the slope between any two points tells you its rate of change." A bar chart shows you the six heights; a line chart additionally shows you the six slopes between them, which is exactly what you needed to answer "which month improved the most."

import matplotlib.pyplot as plt

months = ["Apr", "May", "Jun", "Jul", "Aug", "Sep"]
score = [58, 62, 60, 71, 75, 82]

plt.plot(months, score, marker="o", color="darkorange")
plt.title("Priya's Mathematics Unit Test Score")
plt.xlabel("Month")
plt.ylabel("Score (out of 100)")
plt.ylim(0, 100)
plt.show()

Tracing this: plt.plot draws a line connecting the six (month, score) points in order, marker="o" places a visible dot at each actual data point (so you can distinguish real data from the interpolated line between them), and plt.ylim(0, 100) explicitly forces the y-axis to run from 0 to 100 — we will see in a moment exactly why that line matters. Scanning the plotted line, the steepest upward segment runs from June (60) to July (71), a rise of 11 marks in one month — larger than any other single-month jump, including August-to-September's rise of 7. That answers the question the raw table made you work for.

Common misconception — do not connect categories that have no natural order. If instead you surveyed "favourite subject: Math, Science, English, Hindi" and got counts of 12, 9, 11, 8 students, you must not draw a line connecting those four points. A line implies a smooth journey from one value to the next, but there is no meaningful sense in which "Math" flows into "Science" the way April flows into May. Subjects are unordered categories, so they get a bar chart. Order matters: if the x-axis is a sequence (time, distance, rank), a line is often right; if the x-axis is a set of unordered labels, a line is always wrong, even if it "looks tidier."

Reading (and Misreading) a Y-Axis: The Truncation Trick

Here is the second, more dangerous misconception, and it is worth working through with real numbers. Two students, Rohan and Aisha, scored 45 and 50 respectively out of 100 on a test. The true difference is 5 marks — Aisha scored about 11% more than Rohan (5/45 ≈ 0.11), a modest edge.

Draw this honestly, with the y-axis running from 0 to 100 as it should for a score out of 100, and Rohan's bar reaches 45% of the way up while Aisha's reaches 50% of the way up — the two bars look almost the same height, correctly showing that the gap is small. Now draw the same two numbers, but set the y-axis to run from 40 to 50 instead of 0 to 100. Using the same scale formula from earlier, but with the axis minimum no longer at zero:

pixel_height = ((data_value - axis_minimum) / (axis_maximum - axis_minimum)) * chart_height

For Rohan: (45 − 40) / (50 − 40) = 5/10 = 0.5, so his bar fills half the chart. For Aisha: (50 − 40) / (50 − 40) = 10/10 = 1.0, so her bar fills the entire chart. Suddenly Rohan's bar looks exactly half the height of Aisha's — as if she scored double — when the true difference is only about 11%. Nothing was falsified numerically; both charts show 45 and 50 correctly labelled. What was falsified is the visual impression, because length was borrowed from an axis that starts at 40 instead of 0.

The rule to internalise: before trusting any bar or line chart, check where the y-axis starts. If it does not start at zero, mentally redo the ratio using the true starting point, the way we just did with the formula above. News reports, advertisements, and even some textbooks truncate axes — sometimes for genuine reasons (to zoom into a narrow, meaningful range), but often to make a small difference look dramatic. The chart itself is not lying about the two numbers; your eye is being tricked about their ratio.

Pie Charts: Encoding With Angles

Bar charts encode a value as a length. Pie charts encode a value as an angle out of a full 360° circle, and they answer a different question: not "how big is this category compared to the others," but "what fraction of the whole does this category make up." The formula is:

angle_in_degrees = (data_value / total_of_all_values) * 360

Using the same 40-student app survey (14 + 10 + 9 + 7 = 40 total), let's compute each slice: YouTube = (14/40) × 360 = 126°. Instagram = (10/40) × 360 = 90°. WhatsApp = (9/40) × 360 = 81°. Games = (7/40) × 360 = 63°. As a check, a pie chart's slices must always add up to exactly 360°: 126 + 90 + 81 + 63 = 360. ✓

Common misconception — pie charts are not simply "the fun round version" of a bar chart. Compare WhatsApp's slice (81°) with Instagram's slice (90°) in the pie above. Can you instantly tell which is bigger, and by roughly how much? Now scroll back up to the bar chart of the exact same data — the WhatsApp and Instagram bars — and answer the same question. It's dramatically easier with the bars. This is not a matter of taste; it reflects a real, measured fact about human perception. Statisticians William Cleveland and Robert McGill studied exactly this question in the 1980s and found that people judge length along a common baseline (what a bar chart uses) far more accurately than they judge angle or area (what a pie chart uses). That is why professional data analysts reach for a pie chart only when there are a handful of categories (roughly five or fewer) and the sizes are clearly different — otherwise, a bar chart communicates the same numbers more precisely. Avoid 3-D "tilted" pie charts especially: the tilt distorts the near slices to look larger than the far slices even when their true angles are identical, adding a second layer of visual error on top of the first.

Scatter Plots: When You Have Two Numbers Per Item

All three chart types so far plot one number per category. Sometimes you have two numbers for the same item and want to know whether they move together. Suppose eight students report how many hours a day they typically study and their most recent test score:

A scatter plot places one dot per student, using the x-position to encode hours studied and the y-position to encode marks — two encodings at once, on the same mark.

Reading a scatter plot means looking at the overall shape the cloud of dots makes, not any single dot. Here the dots climb from bottom-left to top-right, which is called a positive relationship: as hours studied goes up, marks tend to go up too. Notice it is not a perfectly straight staircase — the two students who both studied 3 hours scored 50 and 55, a reminder that a scatter plot shows a tendency, not a guarantee, and that "more study usually helps" is not the same claim as "more study always determines the exact score." A scatter plot is the right choice precisely when a bar or line chart would not fit: there is no natural "category" axis and no single ordered sequence, just two numbers per item that you want to compare simultaneously.

Choosing the Right Chart: A Decision Rule

Every example in this chapter reduces to one question: what kind of comparison are you trying to make easy?

• Comparing separate categories (apps, subjects, cities) → bar chart, encoding value as length.
• Showing a trend over an ordered sequence, usually time (months, years, overs in a cricket match) → line chart, encoding value as position and connecting slope.
• Showing parts of one whole, with five or fewer categories of clearly different size → pie chart, encoding value as angle — but reach for a bar chart instead the moment you have more categories or the sizes are close.
• Showing the relationship between two numeric measurements on the same items → scatter plot, encoding two values as one point's x and y position.

And regardless of which chart you pick: always check the axis. A chart is a claim about numbers, and like any claim, it can be checked.

Practice: Test Yourself

1. A different Grade 8 class of 40 students was asked the same survey question but had five answer options, with these counts: App A = 14, App B = 10, App C = 9, App D = 5, App E = 2. Compute the pie angle for App E, then verify all five angles sum to exactly 360°.
2. Suppose two cities recorded 600 mm and 650 mm of rainfall in a season. A chart draws this with a y-axis running from 500 to 700. Using the truncated-axis formula from this chapter, compute the pixel-height ratio the chart will visually show, compare it to the true ratio (600/650), and explain in one sentence why the chart is misleading even though both numbers are correctly labelled.
3. Using Priya's six monthly scores (58, 62, 60, 71, 75, 82), which single month shows the sharpest improvement over the previous month, and by how many marks?
4. Explain, using the vocabulary of this chapter, why you should never draw a line chart connecting the categories "Math," "Science," "English," "Hindi" even after computing a score for each one.

Answer key: (1) App E = (2/40) × 360 = 18°. The five angles are: A = (14/40)×360 = 126°, B = (10/40)×360 = 90°, C = (9/40)×360 = 81°, D = (5/40)×360 = 45°, E = 18°; summing gives 126 + 90 + 81 + 45 + 18 = 360°. ✓ (2) Chart ratio = (600−500)/(700−500) : (650−500)/(700−500) = 100/200 : 150/200 = 0.5 : 0.75, i.e. the first bar looks two-thirds the height of the second, even though the true ratio 600/650 ≈ 0.92 means they are almost equal — the truncated axis exaggerates a roughly 8% real difference into an apparent 33% one. (3) June to July, a rise of 71 − 60 = 11 marks, the largest single jump in the series. (4) Subjects are unordered categories with no continuous quantity flowing between them, so a connecting line would falsely imply a trend or sequence (as if Math flows into Science) that does not exist — the correct choice is a bar chart, which compares categories without implying order.

Summary

Data visualization is the deliberate act of encoding numbers as visual properties — position, length, angle, or the placement of a point — using an explicit scale that treats every value fairly. A bar chart uses length to compare categories; a line chart uses position and slope to show a trend across an ordered sequence like time; a pie chart uses angle (computed as value ÷ total × 360°) to show parts of a whole, but should be reserved for a few clearly different-sized categories because human eyes judge angle and area less precisely than length; a scatter plot uses two positions at once to reveal whether two measured quantities rise and fall together. Across all four, the single most important habit is to check where an axis starts and what it spans before trusting what your eyes tell you — the numbers in a chart can be completely correct while the visual impression they create is deliberately or accidentally false.