Using images and icons in a visualisation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A dashboard shows school canteen sales. Which icon choice best supports the data?

A A small sandwich icon beside the sandwich sales figure

B A large random cartoon dog icon beside the sandwich sales figure

2. Which set of icons follows good practice for a visualisation about school sport participation?

A One flat line icon, one 3D cartoon icon and one photo-style icon

B All icons are flat, single-colour line drawings

3. You find a great icon on a website. What should you do before using it in your assignment?

A Use it straight away because it is on the internet, so it must be free

B Check the licence, get permission if needed and credit the source

4. True or false: Adding an icon to every single label, title and bullet point will always improve a visualisation.

A False - use icons only where they help the data

B True - more icons always make the data clearer

5. Which is the better way to use an icon with a key figure such as '1,250 students'?

A Place a small student icon beside the number

B Place a big icon over the number so it is hard to read

Match the Pairs

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

Left column		Right column
1<img src="bus.svg" alt="Bus icon">		A<img src="person.svg" alt="Person"> <b>1200 students</b>
2<p>Icons by Sam Lee, used with permission</p>		BThe icons mix different styles (cartoon, flat and 3D), so the visualisation looks inconsistent. Use one icon style throughout.
3Use one icon style throughout so the visualisation looks consistent		CPlaces an icon beside a figure, such as bus use, so the topic is quick to recognise
4Place a relevant icon beside a key figure so the topic is quick to recognise		DThe pizza icon is not relevant to bus use, so it does not help the data. Use a bus icon or no icon.
5<img src="cartoon-dog.png"> <img src="flat-cat.svg"> <img src="3d-bird.jpg">		EGives credit and shows permission for borrowed images
6<img src="pizza.png"> <b>Bus use: 85%</b>		F<img src="car-flat.svg"> <img src="bike-flat.svg">

Definitions

icon

Fill in the Blanks

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

.icon { width: 32px; ______: 32px; }

Spot the Error

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

Question 1

A

B <img src="cart-flat.svg">

C <img src="users-flat.svg">

D <img src="stock-3d.png">

Question 2

A <figure

B <img src="map.jpg">

C <small>Credit: ABS</small>

D </figure>

Question 3

A <div class="stat">

B <h2>42 mm</h2>

C <img src="pizza.svg">

D <p>Rainfall</p>

Question 4

A <div class="stat">

B <h2>1,250 riders</h2>

C <img scr="bike.svg">

D </div>

Question 5

A <div class="stat">

B <img src="ev.svg" alt="EV>

C <h2>8,400</h2>

D <p>EVs counted</p>

E </div>

Answer Key

Using images and icons in a visualisation

Section A: Quick Questions

A — A small sandwich icon beside the sandwich sales figure

B — All icons are flat, single-colour line drawings

B — Check the licence, get permission if needed and credit the source

A — False - use icons only where they help the data

A — Place a small student icon beside the number

Section B: Match the Pairs

<img src="bus.svg" alt="Bus icon"> → Places an icon beside a figure, such as bus use, so the topic is quick to recognise

<p>Icons by Sam Lee, used with permission</p> → Gives credit and shows permission for borrowed images

Use one icon style throughout so the visualisation looks consistent → <img src="car-flat.svg"> <img src="bike-flat.svg">

Place a relevant icon beside a key figure so the topic is quick to recognise → <img src="person.svg" alt="Person"> <b>1200 students</b>

<img src="cartoon-dog.png"> <img src="flat-cat.svg"> <img src="3d-bird.jpg"> → The icons mix different styles (cartoon, flat and 3D), so the visualisation looks inconsistent. Use one icon style throughout.

<img src="pizza.png"> <b>Bus use: 85%</b> → The pizza icon is not relevant to bus use, so it does not help the data. Use a bus icon or no icon.

Section C: Definitions

icon — A small simple picture that makes a topic quick to recognise. Keep icons relevant and in one style, use them only where they help the data, and credit or get permission for any you borrow.

Section D: Fill in the Blanks

<p><img src="bus.svg" class="icon"> 42%</p>

<img src="bus.svg" class="icon">
<img src="train.svg" class="icon">

.icon { width: 32px; height: 32px; }

<figure>
<img src="bus.svg" alt="Bus icon">
<figcaption>Icon: Sam Lee</figcaption>

<p>Icon by Sam Lee, used with permission.</p>

Section E: Spot the Error

D — The other icons are flat style, but this one is a 3D icon. Icons should share one style, so it should use a flat icon such as stock-flat.svg.

A — The opening tag is missing its closing >, so it should be <figure>. Without it the figure with the credit line is not valid HTML.

C — A pizza icon has nothing to do with rainfall. The icon beside a key figure must be relevant, so it should be something like raindrop.svg.

C — The attribute is misspelled as scr. It must be src so the browser can load the icon file.

B — The alt text is missing its closing quote. It should be alt="EV" so the icon has a description for screen readers.