← VCE Spreadsheets, SQL & Visualisation

Visualisation component: text and graphics

Titles, headings, captions and key figures (text) plus shapes, pictures and icons (graphics) that frame and explain the data so viewers know what it shows and what matters.

Part of: VCE Applied Computing - U1O1 - Data analysis — Module 79, VCE Data Analytics - U3O1 - Data Analytics — Module 117, VCE Data Analytics - U4O1 - Development and Evaluation — Module 65

Understanding Visualisation component: text and graphics in VCE Spreadsheets, SQL & Visualisation

What it does: The number is wrapped in a span so it can be styled large and bold. This draws the eye to the key figure. An h2 under the h1 title works as a subtitle. It adds context that the title alone does not give. A good title says what the data is about, who it covers and when. A vague label like 'Chart 1' tells viewers nothing. Captions help viewers understand the data. They never change the values. An annotation is a label placed on or near a specific part of the data to point out something important. A key figure callout makes one important number stand out so viewers notice it straight away.

Common mistakes: The source note (a caption-style text) is not closed properly. The closing tag needs a slash: </p>. The label under the key figure opens with <p> but closes with </div>. It should end with </p>.

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 Visualisation component: text and graphics to a class →

This module's key terms are also in a printable crossword (Modules 71–86) and word search (Modules 55–86).

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which title best tells viewers what a chart shows?
Chart 1Average weekly screen time of Year 10 students, 2024
Matches
<h1>Chart</h1>
↓
The title is too vague. It does not say what data is shown, who it is about or when, so viewers cannot tell what the chart shows.
Applying
Meanings
Term
Text and graphics
Meaning
Titles, headings, captions and key figures (text) plus shapes, pictures and icons (graphics) that frame and explain the data so viewers know what it shows and what matters.
Practice
<h1>Screen Time by Year Level</h1>
Testing
Gaps
<>Year 10 students, 2024</h2>
Check Answer
Spots
2<h2>Monthly totals</h2>
3<p>Source: RSPCA data<p>

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

The 'Armadillo' badge — Shield Bearer, 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 title best tells viewers what a chart shows?
A. Average weekly screen time of Year 10 students, 2024 ✓
B. Chart 1
A good title says what the data is about, who it covers and when. A vague label like 'Chart 1' tells viewers nothing.
2. What is the job of a subtitle in a visualisation?
A. Add detail to the title, such as the data source or time period ✓
B. Replace the title so it can be left out
A subtitle supports the main title with extra context. It does not replace it.
3. A caption sits beside a chart and says: 'Sales dropped after the shop closed on Sundays.' What does the caption do?
A. Changes the data values in the chart
B. Explains what the data means ✓
Captions help viewers understand the data. They never change the values.
4. Which is an annotation?
A. A border drawn around the whole page
B. A short note with an arrow pointing to a spike in the line chart ✓
An annotation is a label placed on or near a specific part of the data to point out something important.
5. A visualisation shows a large '72%' with the words 'of students bring a laptop to school'. What is the large number called?
A. A key figure callout ✓
B. An axis label
A key figure callout makes one important number stand out so viewers notice it straight away.

Match the Pairs

<h1>Year 11 Canteen Sales</h1> → A title that tells viewers what the whole visualisation is about
<p class="caption">Sales peak on Fridays.</p> → A caption that explains what viewers should notice in the data
A key figure callout makes one important number stand out in large text → <span class="big">82%</span> passed
A subtitle sits under the title and adds extra detail such as the date range or data source → <h2>Survey of 120 students, Term 2</h2>
<h1>Chart</h1> → The title is too vague. It does not say what data is shown, who it is about or when, so viewers cannot tell what the chart shows.
<img src="logo.png"> → The image has no alt text, so it cannot be explained to viewers who cannot see it. It also has no caption saying what it adds.

Key Term

Text and graphics
Titles, headings, captions and key figures (text) plus shapes, pictures and icons (graphics) that frame and explain the data so viewers know what it shows and what matters.

Fill in the Blanks

1. <h1>Weekly Screen Time</h1> <h2>Year 10 students, 2024</h2>
Hint: Type the heading tag used for a subtitle, one level below the main title.
2. <figure><img src="bar.png" alt="Chart"> <figcaption>Source: ABS, 2023</figcaption> </figure>
Hint: Type the tag that adds a caption to a figure, such as a source note under a chart.
3. .key-figure { font-size: 48px; }
Hint: Type the CSS property that makes a key figure callout large so it stands out.
4. <svg width="200" height="100"> <circle cx="50" cy="40" r="20"/> </svg>
Hint: Type the SVG shape element used to draw a round highlight around a peak in the data.
5. <img src="icon.png" alt="Graph icon">
Hint: Type the attribute that gives a picture or icon a text description.

Spot the Error

Question 1
A <h1>Pet Adoptions 2024</h1>
B <h2>Monthly totals</h2>
C <p>Source: RSPCA data<p>
Line C — The source note (a caption-style text) is not closed properly. The closing tag needs a slash: </p>.
Question 2
A <div class="callout">
B <span class="big">42%</span>
C <p>walk to school</div>
D </div>
Line C — The label under the key figure opens with <p> but closes with </div>. It should end with </p>.
Question 3
A <h1 Daily Steps</h1>
B <h2>Week of 3 June</h2>
C <img src="steps.png" alt="Steps">
Line A — The opening title tag is missing its closing bracket. It should be <h1>Daily Steps</h1> so the title displays properly.
Question 4
A <figure>
B <img src="map.png" alt="Map">
C <figcaption>Fires</figcaption>
D </figcaption>
Line D — The figcaption was already closed on line 3. The last line must close the figure element with </figure>.
Question 5
A .big-number {
B font-size: 32px;
C color: #1a3c6e;
D font-weight bold;
E }
Line D — A CSS property needs a colon between the name and value. It should be font-weight: bold; so the key figure stands out.

Student with a class code? Join your class →