Interactivity in a dynamic data visualisation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

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

Left column		Right column
1Hover tooltip		ADetails such as the exact value appear when the viewer moves the cursor over a data point
2Filter control		BThe response is too slow, so the viewer may think the interaction failed. Interactivity needs a quick response.
3Clear feedback to the viewer: the selected option is highlighted so the viewer knows their action worked		CLets the viewer choose which data is shown, such as one year level or one month
4Interactivity must be quick: the chart should update straight after the viewer picks a filter		DThere is no clear feedback, so the viewer cannot tell their selection worked. The chosen region should be highlighted.
5Viewer clicks a filter and the chart takes 30 seconds to change		EON filter_change: UPDATE chart
6Viewer selects a region but nothing shows which region is selected		Fselected_button.colour = "dark blue"

Definitions

interactivity

Fill in the Blanks

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

ON _____ OVER bar: SHOW tooltip(sales)

ON CLICK slicer: ______ data BY region

ON CLICK bar: _________ bar SHOW details(bar)

ON CLICK button: ____ message(Updated)

ON CLICK slicer: FILTER data BY year ______ chart

Spot the Error

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

Question 1

A WHEN dropdown LOADS

B year ← dropdown.value

C shown ← FILTER(data, year)

D chart.UPDATE(shown)

Question 2

A WHEN mouse HOVERS bar

B tip.text ← bar.value

C tip.HIDE()

D WHEN mouse LEAVES bar

E tip.HIDE()

Question 3

A WHEN slicer CLICKED

B region ← slicer.selected

C rows ← FILTER(data, region)

D chart.UPDATE(data)

Question 4

A WHEN user CLICKS bar

B bar.colour ← 'grey'

C others.colour ← 'grey'

D label.SHOW(bar.value)

Question 5

A WHEN filter CHANGES

B spinner.SHOW()

C WAIT(30 seconds)

D spinner.HIDE()

Answer Key

Interactivity in a dynamic data visualisation

Section A: Quick Questions

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

A — A hover detail (tooltip)

A — A filter

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

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

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

Section C: Definitions

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.

Section D: Fill in the Blanks

ON hover OVER bar: SHOW tooltip(sales)

ON CLICK slicer: FILTER data BY region

ON CLICK bar:
  HIGHLIGHT bar
  SHOW details(bar)

ON CLICK button: SHOW message(Updated)

ON CLICK slicer:
  FILTER data BY year
  UPDATE chart

Section E: Spot the Error

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.

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().

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).

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'.

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).