Suggested Practices in Data Storytelling

class: center, middle, inverse, title-slide

.title[
# Suggested Practices in Data Storytelling
]
.author[
### Nicholas Sim
]
.date[
### 09 January 2024
]

---

class: center, middle, inverse
# Introduction

---
### General Advice

Ref: Nussbaumer-Knaflic (2015)

**1.** Understand the context 
  * What is the background issue? What data are available?

**2.** Choose an appropriate display
  * How many variables are involved? Which "geom" to use?

**3.** Eliminate clutter 
  * How to maximize the data-to-ink ratio? Which aspects in a figure can be done away?

---
### General Advice

**4.** Draw attention where you want it 
  * How should we apply the color/fill aesthetics? Should we annotate, use labels, and how should we display them?

**5.** Think like a designer
  * Which themes? Which overall look should we used? Are the figures visually appealing?

**6.** Tell a story

---
class: center, middle, inverse
# Useful Visualisations

---
### Useful Visualisations

We will consider various data visualisations throughout the course. Here are some useful suggestions for data storytelling.

1. Text

2. Table

3. Slopegraph/Dumbbell Plot

4. Waterfall Chart

---
### Text

Is a bar chart needed?

---
### Text

Consider instead:

---
### Tables

Use minimal/light borders:

---
### Tables

Heatmap to provide visual cues:

---
### Slopegraphs/Dumbbell Plot

Slopegraphs or dumbbell plots are useful for telling a before-and-after story using percentages:

---
### Slopegraphs/Dumbbell Plot

Using a color as a visual cue:

---
### Waterfall Chart

A waterfall chart can be used to breakdown a stacked bar chart. It can also be used for showing the events that happened in between a starting and finishing point:

---
class: center, middle, inverse
# Visuals to Avoid

---
### Avoid: Pie Charts

* Difficult to gauge the area size.
  * Difficult to gauge the differences in areas.

---
### Avoid: Donut charts

Same reasons as pie charts.

---
### Avoid: Secondary y-axis

---
### Avoid: Secondary y-axis

Separate the series:

---
### Avoid: Unnecessary clutter

---
### Avoid: Chart Border and Gridlines

Border and gridlines are removed.

---
### Avoid: Unnecessary Data Markers

Data markers are removed to display clean trend lines.

---
### Avoid: Unnecessary Data Markers

The series are labeled directly.

---
### Avoid: Using Inconsistent Colors

Consistent colors are used for both trend lines and labels.

---
class: center, middle, inverse
# Preattentive Attributes

---
### Why are Preattentive Attributes Important?

The **preattentive attributes** of a figure are visual features that capture our attention before we consciously pay attention to it.

Preattentive attributes can help direct your audiences' attention to where you want them to focus it.

They may also be used to create a visual hierarchy of elements to lead your audience through the information you want to communicate in the way you want them to process it.

Preattentive attributes can be overlaid on the figure by using size, color, or text.

---
### Colors

* Use colors to your advantage, but sparingly. E.g. You may use color as a fill aesthetic but not everything needs to be represented by its own color.

* Use striking colors to highlight important information, and grey colors for less important data.

* Be aware that about 8 percent of the population are color blind to various degrees. You may wish to use colors that are color-blind friendly. See http://www.cookbook-r.com/Graphs/Colors_(ggplot2)/

---
### Colors

---
### Colors

---
### Annotation

* Use text and annotation to deliver a clear visual message.

Ticket volume over time:

---
### Annotation

Cleaner figure but context unclear:

<img src="line2.png" width="60%" style="display: block; margin: auto;" />
    
                      
---
### Annotation

Recommendation as a punchline:

<img src="line3.png" width="60%" style="display: block; margin: auto;" />
                           
---
class: center, middle, inverse
# Examples

---
### Use Colors

Use colors to create a visual hierarchy of text

---
### No Visual Cues

The message is difficult to see.

---
### Use Colors

Use colors to emphasize top concerns.

---
### Further Color Differentiation

Use color differentiation to emphasize on a specific issue.

---
class: center, middle, inverse
# Leveraging Animation

---
### Why Animation?

When presenting content in a live setting, we want to be able to walk your audience through the story, focusing on just the relevant part of the visual.

Moreover, we may use animation to show or highlight only the data that is relevant to the specific point being made as we present.

---
### A Standard Presentation

For example, assume you work for a company that makes online social games. You are interested in telling the story around how active users for a given game — Moonville — have grown over time.  A standard presentation might look like this:

---
## Leveraging Animation

Let's leverage animation as we present.

.panelset[
.panel[.panel-name[Launch]
<img src="animation1.png" width="80%" style="display: block; margin: auto;" />
]

.panel[.panel-name[Feedback]
<img src="animation2.png" width="80%" style="display: block; margin: auto;" />
]

.panel[.panel-name[Growth]
<img src="animation3.png" width="80%" style="display: block; margin: auto;" />
]

.panel[.panel-name[Stabilize]
<img src="animation4.png" width="80%" style="display: block; margin: auto;" />
]

.panel[.panel-name[Growth]
<img src="animation5.png" width="80%" style="display: block; margin: auto;" />
]

.panel[.panel-name[Overall]
<img src="animation6.png" width="80%" style="display: block; margin: auto;" />
]

]