← VCE Data Analytics U4O1

Visual inspection of a data visualisation

Looking over a finished visualisation for layout, readability and formatting faults, such as overlapping or cut-off text, hard-to-read labels, poor alignment and spacing, on the target screen.

Part of: VCE Data Analytics - U4O1 - Development and Evaluation — Module 85

Understanding Visual inspection of a data visualisation in VCE Data Analytics U4O1

What it does: Large enough dark text on a light background is easy to read, which is what an inspection of legibility looks for. Consistent margins and alignment give even spacing and a tidy layout, which a visual inspection checks. Overlapping text makes labels unreadable. Using the same font consistently is good formatting. Cut-off text hurts readability even when the data is correct. Fix the layout, then inspect it again.

Common mistakes: Light grey text on a white background is hard to read. A visual inspection should catch this. Use a dark colour such as #222222 so the label is legible. A 4px font is too small to read on screen. Axis labels should be a legible size such as 12px.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Visual inspection of a data visualisation to a class →

This module's key terms are also in a printable crossword (Modules 85–105) and word search (Modules 63–105).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which problem would you find by visually inspecting a finished dashboard?
A SUM formula adds the wrong range of cellsA chart title is cut off at the edge of its box
Matches
Pale yellow axis labels on a white background
↓
The labels are hard to read because there is too little contrast between text and background. Use dark text instead.
Applying
Meanings
Term
Visual inspection
Meaning
Looking over a finished visualisation for layout, readability and formatting faults, such as overlapping or cut-off text, hard-to-read labels, poor alignment and spacing, on the target screen.
Practice
VIEW chart on the target screen
Testing
Gaps
.title { : visible; }
Check Answer
Spots
2 background: #ffffff;
3 color: #f5f5f5;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Owl' badge — Wise Coder, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which problem would you find by visually inspecting a finished dashboard?
A. A chart title is cut off at the edge of its box ✓
B. A SUM formula adds the wrong range of cells
Visual inspection checks layout and formatting, such as cut-off or overlapping text. Checking formulas against hand-calculated answers is a different kind of testing.
2. During a visual inspection, which label is a fault to fix?
A. Dark navy axis labels on a white background
B. Light grey axis labels on a white background ✓
Low contrast makes labels hard to read. Dark text on a light background is legible.
3. Where should you do the visual inspection of an infographic that will be shown on a classroom projector?
A. On the projector at the size it will be shown ✓
B. Only on your own laptop screen while you build it
Visual inspection should happen on the target screen or page size. Text that looks fine on a laptop can be too small or cut off on a projector.
4. Which one is an overlapping text fault?
A. A chart that uses the same font as the other charts
B. Two category labels printed on top of each other on the x-axis ✓
Overlapping text makes labels unreadable. Using the same font consistently is good formatting.
5. A dashboard has charts that sit at slightly different heights with uneven gaps between them. What does this show?
A. An alignment and spacing fault found by visual inspection ✓
B. A data validation error in the source data
Uneven alignment and spacing are layout faults. You can spot them by looking, and they do not mean the data is wrong.

Match the Pairs

Visual inspection → Looking over a finished visualisation for layout, readability and formatting faults before it is shared
Cut-off text → A title or label that runs past the edge of its box or the page so some words are hidden
Check that labels are legible by using dark text on a light background with a readable size → font-size: 14pt; color: #222222; background: #FFFFFF;
Check alignment and spacing so items line up and have even gaps between them → margin: 10px; text-align: left;
Pale yellow axis labels on a white background → The labels are hard to read because there is too little contrast between text and background. Use dark text instead.
Checked the dashboard only on a large monitor, then projected it onto a small classroom screen → The dashboard was not inspected on the target screen, so text may overlap or be cut off. View it on the screen it will be used on.

Key Term

Visual inspection
Looking over a finished visualisation for layout, readability and formatting faults, such as overlapping or cut-off text, hard-to-read labels, poor alignment and spacing, on the target screen.

Fill in the Blanks

1. .title { overflow: visible; }
Hint: Type the CSS property that controls whether text spills outside its box or gets clipped, which you check for when looking for cut-off text.
2. .axis { font-size: 14px; }
Hint: Type the CSS property that sets how big the text is, so axis labels stay legible.
3. .label { color: #222; background: #fff; }
Hint: Type the CSS property that sets the fill behind the text, so you can check the colour contrast.
4. .chart { text-align: center; margin: 8px; }
Hint: Type the CSS property that controls the horizontal alignment of text inside the chart box.
5. @media (max-width: 600px) { .chart { font-size: 12px; } }
Hint: Type the keyword that starts a rule applied only on a particular screen size, so you can inspect the target screen.

Spot the Error

Question 1
A .label {
B background: #ffffff;
C color: #f5f5f5;
D }
Line C — Light grey text on a white background is hard to read. A visual inspection should catch this. Use a dark colour such as #222222 so the label is legible.
Question 2
A .axis-label {
B font-size: 4px;
C color: #222222;
D }
Line B — A 4px font is too small to read on screen. Axis labels should be a legible size such as 12px.
Question 3
A .title {
B width: 300px;
C white-space: nowrap;
D }
Line C — nowrap keeps a long title on one line, so it runs off the edge and is cut off. Use white-space: normal so the title wraps and stays visible.
Question 4
A .legend {
B margin-left: -80px;
C margin-top: 10px;
D }
Line B — A negative margin pulls the legend back over the chart, so the text overlaps. A positive margin such as 20px keeps it clear of the chart.
Question 5
A .kpi-card {
B width: 200px;
C margin: 0 -30px;
D }
Line C — Negative side margins push the cards on top of each other, so their text overlaps. Use positive spacing such as 0 20px.

Student with a class code? Join your class →