← VCE Data Analytics U3O2

Interactivity in a dynamic data visualisation

Lets viewers act on a visualisation, such as filtering, selecting or hovering, and the response must be clear and quick, e.g. a hover tooltip showing details.

Part of: VCE Data Analytics - U3O2 - Analysis and Design — Module 136

Understanding Interactivity in a dynamic data visualisation in VCE Data Analytics U3O2

What it does: Highlighting the chosen option gives clear feedback, so the viewer can see their action has been registered. Interactivity means the viewer does something (filter, select, hover) and the visualisation responds. Hover details appear when the pointer rests on an element, giving extra information without cluttering the screen. Filters let viewers narrow the data shown to only what they want to see. The response must be quick. Long delays make viewers think nothing happened or that the tool is broken. A message tells the viewer what happened. A blank chart is unclear feedback and may look like an error. A slow response breaks the quick-response part of interactivity. The chart should update almost straight away.

Common mistakes: The filter must react when the viewer changes the dropdown. Using LOADS runs the code only once at the start, so the viewer's action does nothing. It should be WHEN dropdown CHANGES. Hovering should reveal the details in the tooltip. Calling tip.HIDE() on hover means the viewer never sees the details. It should be tip.SHOW().

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 Interactivity in a dynamic data visualisation to a class →

This module's key terms are also in a printable crossword (Modules 76–146) and word search (Modules 3–146).

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which best describes interactivity in a dynamic data visualisation?

Viewers can act on it, such as by filtering, selecting or hovering, and it respondsIt is a fixed chart that never changes once it is printed or displayed

Matches

Viewer clicks a filter and the chart takes 30 seconds to change

↓

The response is too slow, so the viewer may think the interaction failed. Interactivity needs a quick response.

Applying

Meanings

Term

interactivity

Meaning

Lets viewers act on a visualisation, such as filtering, selecting or hovering, and the response must be clear and quick, e.g. a hover tooltip showing details.

Practice

<button onclick="document.getElementById('show').innerText='Showing: Maths'">Filter Maths</button>

Testing

Gaps

ON OVER bar: SHOW tooltip(sales)

Check Answer

Spots

1WHEN dropdown LOADS

2 year ← dropdown.value

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

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 best describes interactivity in a dynamic data visualisation?

A. It is a fixed chart that never changes once it is printed or displayed

B. Viewers can act on it, such as by filtering, selecting or hovering, and it responds ✓

Interactivity means the viewer does something (filter, select, hover) and the visualisation responds.

2. A viewer hovers over a bar and a small box shows the exact value and category. What is this?

A. A hover detail (tooltip) ✓

B. A static title

Hover details appear when the pointer rests on an element, giving extra information without cluttering the screen.

3. A student picks 'Year 11' from a dropdown and the chart shows only Year 11 results. Which interactive feature is this?

A. A filter ✓

B. A legend

Filters let viewers narrow the data shown to only what they want to see.

4. Which response time best supports good interactivity?

A. The visualisation takes about 20 seconds to update after the action

B. The visualisation updates almost immediately after the viewer's action ✓

The response must be quick. Long delays make viewers think nothing happened or that the tool is broken.

5. A viewer clicks a filter button. Which design gives clear feedback?

A. The selected button is highlighted and the chart updates to match ✓

B. Nothing changes on the button and the chart updates without any sign of which filter is on

Clear feedback, such as a highlighted selection, shows the viewer what they did and what is now displayed.

Match the Pairs

Hover tooltip → Details such as the exact value appear when the viewer moves the cursor over a data point

Filter control → Lets the viewer choose which data is shown, such as one year level or one month

Clear feedback to the viewer: the selected option is highlighted so the viewer knows their action worked → selected_button.colour = "dark blue"

Interactivity must be quick: the chart should update straight after the viewer picks a filter → ON filter_change: UPDATE chart

Viewer clicks a filter and the chart takes 30 seconds to change → The response is too slow, so the viewer may think the interaction failed. Interactivity needs a quick response.

Viewer selects a region but nothing shows which region is selected → There is no clear feedback, so the viewer cannot tell their selection worked. The chosen region should be highlighted.

Key Term

interactivity

Lets viewers act on a visualisation, such as filtering, selecting or hovering, and the response must be clear and quick, e.g. a hover tooltip showing details.

Fill in the Blanks

1. ON hover OVER bar: SHOW tooltip(sales)

Hint: Type the event that happens when the cursor rests over an element without clicking.

2. ON CLICK slicer: FILTER data BY region

Hint: Type the action that narrows the data to only the value the viewer picked.

3. ON CLICK bar: HIGHLIGHT bar SHOW details(bar)

Hint: Type the command that gives clear visual feedback about which bar was selected.

4. ON CLICK button: SHOW message(Updated)

Hint: Type the command that displays a message so the viewer gets clear feedback.

5. ON CLICK slicer: FILTER data BY year UPDATE chart

Hint: Type the command that refreshes the chart so the viewer sees the result of their action.

Spot the Error

Question 1

A WHEN dropdown LOADS

B year ← dropdown.value

C shown ← FILTER(data, year)

D chart.UPDATE(shown)

Line A — The filter must react when the viewer changes the dropdown. Using LOADS runs the code only once at the start, so the viewer's action does nothing. It should be WHEN dropdown CHANGES.

Question 2

A WHEN mouse HOVERS bar

B tip.text ← bar.value

C tip.HIDE()

D WHEN mouse LEAVES bar

E tip.HIDE()

Line C — Hovering should reveal the details in the tooltip. Calling tip.HIDE() on hover means the viewer never sees the details. It should be tip.SHOW().

Question 3

A WHEN slicer CLICKED

B region ← slicer.selected

C rows ← FILTER(data, region)

D chart.UPDATE(data)

Line D — The chart is updated with the unfiltered data, so the viewer's slicer choice has no visible effect. It should update the chart with the filtered rows: chart.UPDATE(rows).

Question 4

A WHEN user CLICKS bar

B bar.colour ← 'grey'

C others.colour ← 'grey'

D label.SHOW(bar.value)

Line B — Clear feedback means the selected bar must stand out. Making it grey, the same as the others, gives the viewer no sign their click worked. It should be a highlight colour such as 'orange'.

Question 5

A WHEN filter CHANGES

B spinner.SHOW()

C WAIT(30 seconds)

D spinner.HIDE()

Line C — The response to an interaction must be quick. Making the viewer wait 30 seconds makes the visualisation feel broken. The line should update the chart straight away: chart.UPDATE(newData).

Student with a class code? Join your class →