Visual inspection of a data visualisation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1Visual inspection		Amargin: 10px; text-align: left;
2Cut-off text		BThe labels are hard to read because there is too little contrast between text and background. Use dark text instead.
3Check that labels are legible by using dark text on a light background with a readable size		CLooking over a finished visualisation for layout, readability and formatting faults before it is shared
4Check alignment and spacing so items line up and have even gaps between them		DThe 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.
5Pale yellow axis labels on a white background		EA title or label that runs past the edge of its box or the page so some words are hidden
6Checked the dashboard only on a large monitor, then projected it onto a small classroom screen		Ffont-size: 14pt; color: #222222; background: #FFFFFF;

Definitions

Visual inspection

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.title { ________: visible; }

.axis { _________: 14px; }

.label { color: #222; __________: #fff; }

.chart { __________: center; margin: 8px; }

@_____ (max-width: 600px) { .chart { font-size: 12px; } }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .label {

B background: #ffffff;

C color: #f5f5f5;

D }

Question 2

A .axis-label {

B font-size: 4px;

C color: #222222;

D }

Question 3

A .title {

B width: 300px;

C white-space: nowrap;

D }

Question 4

A .legend {

B margin-left: -80px;

C margin-top: 10px;

D }

Question 5

A .kpi-card {

B width: 200px;

C margin: 0 -30px;

D }

Answer Key

Visual inspection of a data visualisation

Section A: Quick Questions

A — A chart title is cut off at the edge of its box

B — Light grey axis labels on a white background

A — On the projector at the size it will be shown

B — Two category labels printed on top of each other on the x-axis

A — An alignment and spacing fault found by visual inspection

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

.title { overflow: visible; }

.axis { font-size: 14px; }

.label { color: #222; background: #fff; }

.chart { text-align: center; margin: 8px; }

@media (max-width: 600px) {
  .chart { font-size: 12px; }
}

Section E: Spot the Error

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.

B — A 4px font is too small to read on screen. Axis labels should be a legible size such as 12px.

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.

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.

C — Negative side margins push the cards on top of each other, so their text overlaps. Use positive spacing such as 0 20px.