Statistical fallacy and storytelling via data visualisation

# Statistical fallacy and storytelling via data visualisation
### Emi Tanaka
### School of Mathematics and Statisitcs The University of Sydney 2018/10/18

---

.row.bg-main1[.content.vmiddle[
# Hi! I'm Emi, a lecturer in statistics!
]]

.row.bg-main2[.content.vmiddle[
# .indigo[6 key messages] - 3 points in .yellow[statistical fallacy] and 3 points in .yellow[storytelling via data visualisation]. 
]]

.row.bg-main3[.content.center[
![](images/get_started.gif)
]]

---

---

---

---

layout: false
class: middle center bg-main1 hide-slide-number
background-image: url("images/red-lemon.jpg")
background-size: cover

.vmiddle.shade_main[
.boxtitle1.animateSlideInFromRight[
§0e|0c|0o|1l|1o|1g|1i|1c|2a|2l|2 \f|2a|2l|2l|3a|3c|3y|3
]
The interpretation of statistical data where inferences about individuals are deduced from the group.

]

---

class: hide-slide-number
background-image: url("images/ausincome.png")
background-size: cover

---

.column[.content.vmiddle.center[
#From SA
<img src="images/man.svg" width="50%"/>
<div class="bg-green white" style="padding:10px;">
State average: About $87K
</div>

]]

.column[.content.vmiddle.center[
# From ACT 
<img src="images/man.svg" width="50%"/>
<div class="bg-green white" style="padding:10px;">
State average: About $132K
</div>
]]

---

<div class="bg-main4" style="position:absolute; top:5%; left:5%; padding:10px;">
A person from ACT will have higher income than a person in SA.
</div>

---

<div class="bg-main4" style="position:absolute; top:5%; left:5%; padding:10px;">
<s>A person from ACT will have higher income than a person in SA.</s>
</div>

<div class="bg-main3 center" style="position:absolute; bottom:55%; left:30%; padding:10px; width:40%">
You cannot infer about individuals' income from the state average.
</div>

---

.column.bg-red[.content[

# Republican candidate, George W. Bush

.center.nopadding[
<img src="images/georgebush.png" width="25%"/>
]

## Won 2 out of the 11 wealthiest states and 15 of the poorest states.

]]
.column.bg-blue[.content[

# Democratic candidate, John Kerry

.center.nopadding[
<img src="images/johnkerry.png" width="25%"/>
]
## Won 9 out of the 11 wealthiest states.

Rich folks tend to vote for democrats.

]]

---
class: split-two with-border white
count: false

.column.bg-red[.content[

# Republican candidate, George W. Bush

.center.nopadding[
<img src="images/georgebush.png" width="25%"/>
]

## Won 2 out of the 11 wealthiest states and 15 of the poorest states.

* 62% of voters with annual incomes over $200,000 voted for Bush.
* 36% of voters with annual incomes of $15,000 or less voted for Bush.
]]
.column.bg-blue[.content[

# Democratic candidate, John Kerry

.center.nopadding[
<img src="images/johnkerry.png" width="25%"/>
]
## Won 9 out of the 11 wealthiest states.

<s>Rich folks tend to vote for democrats.</s>

Read more in Gelman (2009) *Red State, Blue State, Rich State, Poor State: Why Americans Vote the Way They Do*.
]]

---

]]
.column[.content[
 
# Higher exercise results in higher cholestral?

# Higher cholestral results individual exercising more?
]]

---

]]
.column[.content[
 
# Higher exercise results in higher cholestral?

# Higher cholestral results individual exercising more?
]]

---

# Simpson's Paradox

![](emi-tanaka-presentation_files/figure-html/unnamed-chunk-3-1.png)

---

# Main message 1 
<blockquote style="font-size:48pt">
Be aware of ecological fallacy.
</blockquote>
Using summary data to infer about individuals units can be wrong!

---

class: middle center hide-slide-number
background-image: url("images/bg-sample.jpg")
background-size: cover

.vmiddle.shade_main[
.boxtitle1.animateSlideInFromRight[
§0b|0i|0a|1s|1e|1d|2 \s|2a|2m|2p|3l|3e|3s|3
]
 
]

---

---

# Main message 2 
<blockquote style="font-size:48pt">
Identify potential biases in your data.
</blockquote>
Or try to minimise potential biases in the data collection.

---

class: middle center hide-slide-number
background-image: url("images/bg-fruits.jpg")
background-size: cover

.shade_main[
.boxtitle1.animateSlideInFromRight[
§0s|0t|0a|1t|1i|1s|2t|2i|2c|2a|3l|3 
.fong_large[vs.] 
§0p|0r|0a|0c|1t|1i|1c|1a|1l|1 \s|2i|2g|2n|2i|2f|2i|2c|3a|3n|3c|3e|3
]
 
]

---

A suspect (*data set*) is accused of a crime (*having a particular parameter value*) and is declared guilty or not guilty based on the results of a trial (*statistical test*).

Each trial has a defence (*advocating for the null hypothesis*) and a (*advocating the alternative hypothesis*). On the basis of how evidence (*the test statistic*) compares to a standard (*the null distribution*), the judge makes a decision to convict (*reject the null*) or acquit (*fail to reject the null hypothesis*).
]]

.bottom_abs.font_sm.white[
*Analogy source: Hadley Wickham's talk at 30th Convention of the Association for Psychological Science, San Francisco, May 25, 2018*]

---

# Statistical Significance

* Statistical significant differences (i.e. reject the null hypothesis) means that the differences are not likely due to sampling error.

* This does not mean that the differences are BIG.

# Practical Significance

* The difference is large enough for it to be meaningful in practice.

---

# Statistically Significant
<img src="images/bald1.png" width="70%"/>
--

# Practically Significant
<img src="images/bald2.png" width="70%"/>

---

# Main message 3 
<blockquote style="font-size:48pt">
Statistical significance does not mean that it is practical.
</blockquote>

Look also at the *effect size*.

---

background-image: url("images/bg-graph.jpg")
class: middle center hide-slide-number

.vmiddle.shade_main[
.boxtitle1.animateSlideInFromRight[
§0c|0h|0a|0r|1t|1 \c|1h|1o|1i|2c|2e|2s|2 \b|2y|2 \m|2e|3d|3i|3u|3m|3
]
]

---

]

<div style="position:absolute; top: 50%; left: 50%;">
Proportion
</div>
<div class="circle" style="background-image: url('images/barplot1.svg'); background-size:contain; position:absolute; top:76%; left:1%; background-color:#2E7D32"></div>
<div class="circle" style="background-image: url('images/stacked1.svg'); background-size:contain; background-position: 50%; background-repeat: no-repeat; background-color:#2E7D32; position:absolute; top:40%; left:27%;"></div>
<div class="circle" style="background-image: url('images/piechart1.svg'); background-size:contain; background-color:#2E7D32; position:absolute; top:13%; left:3%;"></div>
<div class="circle" style="background-image: url('images/waffle1.svg'); background-size:70%; background-position: 50%;position:absolute;background-repeat: no-repeat; top:42%; left:77%; background-color:#2E7D32;"></div>

<div style="position:absolute; top: 33%; left: 10%;background-image: url('images/cloud.svg');background-size: cover; background-position: 50%;background-repeat: no-repeat;width:150px;height:150px; -webkit-animation: float 2s linear infinite; animation: float 2s linear infinite;">
</div>
<div style="position:absolute; top: 20%; left: 40%;background-image: url('images/cloud.svg');background-size: cover; background-position: 50%;background-repeat: no-repeat;width:150px;height:150px; -webkit-animation: float 2s linear infinite; animation: float 2s linear infinite;">
</div>
<div style="position:absolute; top: 30%; left: 20%;">
Distribution
</div>
<div style="position:absolute; top: 80%; left: 80%;">
Relations
</div>

<a href="http://data-to-viz.com/">
<div style="position: absolute; top:87%; left:70%; border:black; font-size:28px; border:solid; border-color:black;padding:4px; background-color:white; color:black;">
Check out more charts at 
http://data-to-viz.com/
</div>
</a>

---

# What is best data visualisation in one medium (e.g. report) may not be the best in another medium (e.g. presentation).

---

.column.bg-indigo[
.pad1.content[
## Data Story
Reported ancestries as proportion of all reported ancestories, Australia Census 2016

Ancestry | |Percentage      
--- | --- | --- 
English |  | 36.1 
Australian | | 33.5
Irish | | 11.0
Scottish | | 9.3 
Chinese |  | 5.6
Other | | 4.5

<img src="emi-tanaka-presentation_files/figure-html/unnamed-chunk-4-1.png" width="90%" />
]
]
.column.bg-blue[.content[
.fig[![](images/piechart.gif)]
.pad1[
## Unnecessary 3D is detested by statisticians.
]

]]
.column.bg-light-blue[.content[

.fig[![](images/pie_charts.png)]
&nbsp;Source: https://xkcd.com/2031/
.pad1[
## Pie chart is notorious among statisticians.
]
]]

---

---

---

---

.column.bg-indigo[
<blockquote class="pad1">
<h2>Save the pies for dessert (or meals).<h2>
</blockquote>
.pad1[
## Pie chart has .yellow[low information value] meaning it is .yellow[hard to compare sizes between categories]. 
]
]

.column.nopadding.bg-blue[
<img src="images/pie2.jpg" width="120%">
]

.column.bg-light-blue[.content[
.pad1[
## But let us not pie bash, the has its place.
]
<center>
<img src="images/pieface.gif" width="70%">
</center>
.pad1[
## It does incite overt emotional responses so better to avoid it. 
]
]]

---

---

---

.column.bg-indigo[
.pad1[
## Instead, I introduce you the

# .yellow[waffle plot].
.fig[![](images/waffle2.svg)]
]
]
.column.nopadding[
<img src="images/waffle.jpg" width="120%"/>
]
.column.bg-indigo[.content[
.pad1[
## Me spreading bad practice all around?

]

---

---

---

.column.bg-indigo[
.pad1[
## Data Story
Reported ancestries as proprotion of all reported ancestories, Australia Census 2016

Ancestry | |Percentage      
--- | --- | --- 
English |  | 36.1 
Australian | | 33.5
Irish | | 11.0
Scottish | | 9.3 
Chinese |  | 5.6
Other | | 4.5

### Most Australians have English or Australian ancestry.
]
]
.column.bg-blue.font_sm[.content[
## Report
<img src="images/barplot3.svg" width="80%">
**Figure**. The proprotion of all reported ancestories from Australia Census 2016 shows majority have English or Australian ancestry.
]]
.column.font_sm.bg-light-blue[.content[

## Presentation

English &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Australian 
 Irish &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Scottish 
 Chinese &nbsp;&nbsp;&nbsp;&nbsp; Other

### What you lose in accuracy, you gain in attention (hopefully).
]]

---

# Main message 4 
<blockquote style="font-size:48pt">
Select wisely and accordingly.
</blockquote>
## Data visualisation need to be selected for data type but also the medium you present it in.

---

.shade_main[
.boxtitle1.animateSlideInFromRight[
§0d|0a|0t|1a|1 \i|1n|2k|2 \r|2a|2t|3i|3o|3
]
]
<blockquote style="font-size:30pt; color:black">
Above all else, show the data. 
</blockquote>
<div style="font-size:24pt; color:block; float: right; padding-right:3em"> - Edward Tufte</div>

---

---

.column.bg-indigo[.content[
## Before
 
.fig[![](images/barplot4.svg)]
]]
.column.nopadding.bg-blue[.content[
* Remove redundant legend
* Remove background plot color

* Remove color
* Add color to highlight the story
* Add percentage directly on bar
]]
.column.bg-light-blue[.content[
## After
 
.fig[![](images/barplot3.svg)]

]]
---

---

---

---

# Main message 5 
<blockquote style="font-size:48pt">
Less is more.
</blockquote>
## Adjust your data-ink ratio.

---

background-image: url("bkgs/bg2.jpg")
background-size: cover
class: middle center bg-green

.shade_main[
.boxtitle1.animateSlideInFromRight[
§0c|0o|0l|0o|0u|1r|1 \c|1o|1n|1s|1i|2d|2e|2r|2a|2t|2i|3o|3n|3s|3

]
]

---

.column.bg-indigo[
.pad1[
## Informative
]
<center>
<img src="images/barplot5.svg" width="66%">
<img src="images/slopegraph2.svg" width="75%">
</center>

]
.column.add-left-border.bg-blue[
.pad1[
## Data Storytelling
]
<center>
<img src="images/barplot3.svg" width="66%">
<img src="images/slopegraph3.svg" width="75%">
</center>
]
.column.add-left-border.bg-light-blue[
.pad1[
## Majority of people in Australia have English or Australian ancestry.
 
# .yellow[Color] is used to highlight the .yellow[story].
]
]

---

.column.bg-indigo[
.pad1[
### Colour-blind friendly
]
<center>
<img src="images/barplot5.svg" width="80%">
<img src="images/barplot5_deuteranopia.png" width="70%">
</center>

]
.column.add-left-border.bg-blue[
.pad1[
### Not friendly
]
<center>
<img src="images/barplot6.svg" width="80%">
<img src="images/barplot6_deuteranopia.png" width="70%">
</center>
]
.column.add-left-border.bg-light-blue[
.pad1[
## .yellow[Deuteranopia] - green deficiency that affects about 5% of males.
 
## .yellow[Color-blindness] does affect a non-negligible proportion of the population.
]
]
---

# Main message 6 
<blockquote style="font-size:48pt">
Not everyone sees what you see.
</blockquote>
.fonth3[
Consider colour to .yellow[highlight]; to .yellow[contextualise]; and make it .yellow[colour blind friendly].
]

---

class: split-two nopadding with-border
background-image: url("bkgs/bg1.jpg")
background-size: cover

]]
.column.shade_main[.vmiddle.content[
]]
<img src="images/USydLogo-white.svg" width="18%" style="opacity:0.7;position:absolute;left:80%; top:80%; z-index:50;"/>

---

layout: true
class: split-two nopadding with-border
background-image: url("bkgs/bg1.jpg")
background-size: cover

.column.shade_main[.content[
### Statistical Society of Australia is proudly hosting
.yellow[
## Young Statisticians and Data Scientist Careers Networking Evening
### Fri 19/10 (tomorrow!) at 6pm UTS 
]
### Get your tickets at [bit.ly/SSANSW-career-night](http://bit.ly/SSANSW-career-night)
--- 
### These slides were made using with the packages:
* `xaringan` powered by `remark.js` using [.red-code[`ninjutsu.css`]](https://github.com/emitanaka/ninja-theme)
* `icon` 
* [.red-code[`anicon`]](https://github.com/emitanaka/anicon)
* [.red-code[`datalegreyar`]](https://github.com/emitanaka/datalegreyar)
* `ggplot2`
* and many more...

]]
.column.shade_main[.vmiddle.content[
# Thanks, that's all folks!

## [Emi Tanaka](https://emitanaka.github.io)
### [@statsgen](http://twitter.com/statsgen)
### [ dr.emi.tanaka@gmail.com](mailto:dr.emi.tanaka@gmail.com)
### [ bit.ly/tanaka-SUMS2018](https://bit.ly/tanaka-asc2018)

---

]
]

---

---