Storyboarding the states of a dynamic visualisation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A storyboard panel for a dynamic visualisation should show...

A Only the final finished visualisation

B The visualisation before and after a user action

2. Which note belongs beside the arrow between two panels?

A User clicks the 'Term 2' filter button

B The chart uses blue and grey colours

3. A storyboard shows a bar chart with all 4 years, then an arrow, then a bar chart showing only 2024. What must be added?

A A note naming the action, such as 'User clicks the 2024 slicer'

B Nothing, the two charts explain the change themselves

4. What is the purpose of arrows between storyboard panels?

A To show the order of the states and how the user moves from one to the next

B To show which data values are the largest

5. Which panel description correctly shows a filter click?

A Before: all regions shown. After: all regions shown, in a new colour.

B Before: all regions shown. Action: user clicks 'North'. After: only North shown.

Match the Pairs

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

Left column		Right column
1Panel 1: Bar chart of all 8 sales regions. Arrow → Panel 2		APanel 1 → [Click 'Term 2' filter] → Panel 2
2Note: User clicks 'Term 2' slicer button		BAn action note: records the user action that causes the visualisation to change between panels
3A storyboard shows the 'after' state of a filter click: the chart updates to show only the chosen data		CPanel 2: Bar chart shows Term 2 only. Arrow ← Panel 1
4An arrow between panels is labelled with the action that moves the user from one state to the next		DThere is no arrow and no action note, so the storyboard does not show what the user did to cause the change from Panel 1 to Panel 2.
5Panel 1: Line graph of all years. Panel 2: Line graph of 2024 only. (no arrow, no note)		EOnly the before state is drawn. There is no after panel showing how the visualisation changes once the filter is clicked.
6Panel 1: Pie chart of all products. Note: User clicks 'Tech' filter. (no Panel 2)		FStarting state panel: shows the visualisation before the user does anything, with an arrow leading to the next state

Definitions

storyboard panel

Fill in the Blanks

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

Panel 1 - ______: all 4 regions shown Panel 2 - After: only North shown Action: click North filter

Panel 1 - Before: all 4 regions shown Panel _ - After: only North shown Action: click North filter

Panel 1 - Before: all 4 regions shown Panel 2 - After: only North shown ______: click North filter

Panel 1 - Before: all years shown Panel 2 - _____: only 2024 shown Action: click 2024 slicer

Panel 1 (Before) __ Panel 2 (After) Action: click North filter

Spot the Error

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

Question 1

A Before: only North shown

B Action: click North filter

C After: only North shown

Question 2

A Before: all years in chart

B Action: chart changes

C After: only 2024 bars shown

D Arrow: Panel 1 -> Panel 2

Question 3

A Panel 1: Before

B Action: click Term 2 slicer

C After: only Term 2 rows

D Arrow: Panel 2 -> Panel 1

Question 4

A Panel 2: Before

B Action: all houses shown

C After: Red house points only

D Arrow: Panel 2 -> Panel 3

Question 5

A Panel 1: After filter click

B Action: click Year 8 filter

C After: table has 3 rows

Answer Key

Storyboarding the states of a dynamic visualisation

Section A: Quick Questions

B — The visualisation before and after a user action

A — User clicks the 'Term 2' filter button

A — A note naming the action, such as 'User clicks the 2024 slicer'

A — To show the order of the states and how the user moves from one to the next

B — Before: all regions shown. Action: user clicks 'North'. After: only North shown.

Section B: Match the Pairs

Panel 1: Bar chart of all 8 sales regions. Arrow → Panel 2 → Starting state panel: shows the visualisation before the user does anything, with an arrow leading to the next state

Note: User clicks 'Term 2' slicer button → An action note: records the user action that causes the visualisation to change between panels

A storyboard shows the 'after' state of a filter click: the chart updates to show only the chosen data → Panel 2: Bar chart shows Term 2 only. Arrow ← Panel 1

An arrow between panels is labelled with the action that moves the user from one state to the next → Panel 1 → [Click 'Term 2' filter] → Panel 2

Panel 1: Line graph of all years. Panel 2: Line graph of 2024 only. (no arrow, no note) → There is no arrow and no action note, so the storyboard does not show what the user did to cause the change from Panel 1 to Panel 2.

Panel 1: Pie chart of all products. Note: User clicks 'Tech' filter. (no Panel 2) → Only the before state is drawn. There is no after panel showing how the visualisation changes once the filter is clicked.

Section C: Definitions

storyboard panel — One frame of a storyboard showing the visualisation before and after a user action, with a note of the action (such as a filter click) that causes the change. Arrows link the panels.

Section D: Fill in the Blanks

Panel 1 - Before: all 4 regions shown
Panel 2 - After: only North shown
Action: click North filter

Panel 1 - Before: all 4 regions shown
Panel 2 - After: only North shown
Action: click North filter

Panel 1 - Before: all 4 regions shown
Panel 2 - After: only North shown
Action: click North filter

Panel 1 - Before: all years shown
Panel 2 - After: only 2024 shown
Action: click 2024 slicer

Panel 1 (Before) -> Panel 2 (After)
Action: click North filter

Section E: Spot the Error

A — The Before line must show the visualisation before the filter click, so it should show all regions: 'Before: all 4 regions shown'. Only North appears after the click.

B — The action note must name the user action that causes the change, such as 'Action: click 2024 button'. 'chart changes' only describes a result and names no cause.

D — Arrows between storyboard panels follow the order of the states. This arrow should point from Panel 1 to Panel 2: 'Arrow: Panel 1 -> Panel 2'.

B — The Action line must describe what the user does, such as 'Action: pick Red house'. 'all houses shown' is a state of the visualisation, not an action.

A — Panel 1 shows the state before the filter click, so it should be labelled 'Before'. Labelling it 'After' mixes up the two states.