“Effective Data Visualization” by Dr. Cédric Scherer

class: inverse, center
background-image: url("img/darklight_RichardStrozynski.jpg")
background-size: contain

## Effective Data Visualization How to design impactful and aesthetically pleasing charts
 
## Dr. Cédric Scherer bespokeDS&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;September 28th 2020

---

<div id="content">
 <img src="img/cedric_dots_filled_color_Viridis2.png" class="ribbon"/ style='width:45%;'>
</div>
 
Scientist by 🎓
 
&rarr;&nbsp;&nbsp;population and community dynamics, movement ecology, wildlife diseases

* Ph.D. in Ecology

* PostDoc in Computational Ecology 
@&nbsp;&nbsp;Leibniz Insititute for Zoo and Wildlife Research (IZW)

DataViz Designer by ❤️
 
&rarr;&nbsp;&nbsp;analysist, designer, consultant, lecturer

* Freelancing Data Visualization Specialist

* PostDoc in Computational Ecology

* Data Challenges and Personal Projects 
#TidyTuesday, #30DayMapChallenge, #MakeoverMonday, #SWDchallenge

---
class: center
background-image: url("img/rtidy2.png")
background-size: contain

#### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Scientist by 🎓 DataViz Designer by ❤️

---
class: inverse, center

### Data Visualizations for Scientific Publications & Talks

.pull-left[
 
<img src="img/Fig2_disease-data_full_log.png" style='width:86%;'> Scherer et al. 2019 Journal of Animal Ecology
]

.pull-right[
 
<img src="img/SwiFCoIBMove_density.png" style='width:90%;'> Scherer et al. 2020 Oikos
<img src="img/NLMR_case_study.png" style='width:90%;'> Sciaini et al. 2019 Methods in Ecology & Evolution
]

---
class: inverse, center

### Data Visualizations for Client Projects

.pull-left[
<img src="img/InvMapUS_final_FjallaOne.gif" style='width: 78%;'>
<img src="img/11_1_solidaritaet_erstattung_id_1.png" style='width: 78%;'>
]

.pull-right[
<img src="img/3_time_eandy_highlight_1.png" style='width: 78%;'>
<img src="img/ddh_ridges.png" style='width: 78%;'>
]

---
class: inverse, center

### Data Visualizations as Challenge Contributions

.left-column[
<img src="img/2020_04_SpotifySongs.png" style='width: 74%;'> Contribution to #TidyTuesday
]

.right-column[
<img src="img/BuiltEnv_BerlinBuildings.png" style='width: 98%;'> Contribution to #30DaymapChallenge
]

---
class: inverse, center, middle

# Data Visualization is any graphical representation of information and data.
 &nbsp;

---
class: inverse, center, middle

# Data Visualization is part art and part science. &nbsp;
 Claus O. Wilke, "Fundamentals of Data Visualization"

---
class: inverse, right, bottom
background-image: url("img/dataviz-google.jpg")
background-size: cover

---
class: top, center
background-image: url("img/a_view_on_despair_cut.jpg")
background-size: contain

<a style='color:#ebc500;' href="https://www.studioterp.nl/a-view-on-despair-a-datavisualization-project-by-studio-terp/">A View on Despair</a> by Sonja Kuijpers/STUDIO TERP

---

.pull-left[
<img src="img/a_view_on_despair.jpg" style='width:64%;'> 
<a href="https://www.studioterp.nl/a-view-on-despair-a-datavisualization-project-by-studio-terp/">A View on Despair</a> by Sonja Kuijpers/STUDIO TERP

]

.pull-right[
Each element represents a person who committed suicide in the Netherlands in 2017.
<img src="img/a_view_on_despair_legend.png" style='width:45%;'>
]

---
class: bottom, center
background-image: url("img/1200px-Minard.png")
background-size: contain

<a style='color:#ebc500;' href="https://en.wikipedia.org/wiki/Charles_Joseph_Minard#The_map_of_Napoleon%27s_Russian_campaign">Carte figurative des pertes successives en hommes de l'Armée Française dans la campagne de Russie 1812–1813</a> by Charles Joseph Minard

---

<img src="img/minard_full.jpg" style='width:47%;'> 
<a href="https://en.wikipedia.org/wiki/Charles_Joseph_Minard#The_map_of_Napoleon%27s_Russian_campaign">Carte figurative des pertes successives en hommes de l'Armée Française dans la campagne de Russie 1812–1813</a> and <a href="https://patrimoine.enpc.fr/document/ENPC01_Fol_10975?image=54#bibnum">Carte figurative des pertes successives en hommes de l'Armée qu'Annibal conduisit d'Espagne en Italie en traversant les Gaules (selon Polybe)</a> by Charles Joseph Minard

<ul style='line-height:2;margin-left:120px;'>
 <li>displays the progress of the troops of Hannibal (218 BC) and Napoleon (1812-1813) in the form of a stream </li>
 <li>often considered as the best statistical graphic ever drawn&nbsp;&nbsp;</li>
</ul>

---

# What Makes It a Bad Data Visualization

&rarr;&nbsp;&nbsp;Aesthetic problems&nbsp;&nbsp;(bad design) 
&rarr;&nbsp;&nbsp;Substantive problems&nbsp;&nbsp;(bad data) 
&rarr;&nbsp;&nbsp;Perceptual problems&nbsp;&nbsp;(bad perception)

---

# What Makes It a Good Data Visualization

&rarr;&nbsp;&nbsp;Information&nbsp;&nbsp;(Integrity)
 &rarr;&nbsp;&nbsp;Story&nbsp;&nbsp;(Interestingness)
 &rarr;&nbsp;&nbsp;Goal&nbsp;&nbsp;(Usefulness)
 &rarr;&nbsp;&nbsp;Visual Form&nbsp;&nbsp;(Beauty)

---
background-image: url("img/good_vs_bad2.jpg")
background-size: cover

---
class: inverse, center, middle

# Information 
# Understand your data and be accurate

---
class: center, middle

.left-column[
 
 <img src="img/pitfalls_ben.jpg" style='width:70%;'>
]
.right-column[
 <img src="img/pitfalls.jpeg" style='width:75%;'>
]

---
class: center, middle

Our data is never a perfect reflection of the real world.

???

&rarr;Not crime but reported crime
&rarr;Collected by humans: guesstimation, precision and errors
&rarr;Collected by machines: precision and errors

---
class: inverse, center, middle

---
class: inverse, center, middle

---
class: center, middle

The best use of data is to teach us what isn't true.

???

We form singular statements first, but shouldn't convert it to universal statements.
Instead, confront yourself with a falsifiable universal statement and attemp to disprove it.

---
class: left, bottom
background-image:url("img/black_swan.png")
background-size: cover

Source: inhomelandsecurity.com/risk-management-and-black-swan-events

???

&rarr; "The swan is white" (singular statement)
&rarr; "All swans are white" (universal statement)

---
class: inverse, center, middle

# Story 
# Be clear about the message of your visualization

---
class: middle, center

Who is my audience? 
What am I trying to achieve with the visualization?

---
class: inverse, middle, center

<img src="img/stripes_globe.png" style='width:100%;'> <a style='color:#ebc500;' href="https://showyourstripes.info/">Warming Stripes</a> by Ed Hawkins

---
class: inverse, middle, center

<img src="img/stripes_globe_labs2.png" style='width:100%;'> <a style='color:#ebc500;' href="https://showyourstripes.info/">Warming Stripes</a> by Ed Hawkins

---
class: inverse, middle, center

<img src="img/nadieh_sony2.png" style='width:100%;'> <a style='color:#ebc500;' href="https://www.visualcinnamon.com/2020/06/sony-music-data-art">Sony Music Song Posters</a> by Nadieh Bremer

---
class: inverse, middle, center

.pull-left[
 
 <img src="img/2020_29_Astronauts_blur_color.png" style='width:100%;'> <a style='color:#ebc500;' href="https://raw.githubusercontent.com/Z3tt/TidyTuesday/master/plots/2020_29/2020_29_Astronauts_blur_color.png">#TidyTuesday contribution Week 2020/29</a>
]
.pull-right[
 <img src="img/2020_31_PalmerPenguins.png" style='width:70%;'> <a style='color:#ebc500;' href="https://raw.githubusercontent.com/Z3tt/TidyTuesday/master/plots/2020_31/2020_31_PalmerPenguins.png">#TidyTuesday contribution Week 2020/31</a>
]

---
class: inverse, middle, center

.pull-left[
 <img src="img/map_frontex.png" style='width:100%;'>
]

.pull-right[
 <img src="img/map_frontex_blue.png" style='width:100%;'>
]
 
<a style='color:#ebc500;' href="https://thecorrespondent.com/664/how-maps-in-the-media-make-us-more-negative-about-migrants/738023272448-bac255ba">How maps in the media make us more negative about migrants</a> by Maite Vermeulen, Leon de Korte & Henk van Houtum

---
class: inverse, middle, center

.pull-left[
 <img src="img/map_frontex.png" style='width:100%;'>
]

.pull-right[
 <img src="img/map_frontex_best.png" style='width:100%;'>
]
 
<a style='color:#ebc500;' href="https://thecorrespondent.com/664/how-maps-in-the-media-make-us-more-negative-about-migrants/738023272448-bac255ba">How maps in the media make us more negative about migrants</a> by Maite Vermeulen, Leon de Korte & Henk van Houtum

---
class: inverse, middle, center

.pull-left[
 <img src="img/map_frontex.png" style='width:100%;'>
]

.pull-right[
 <img src="img/map_frontex_bars.png" style='width:100%;'>
] 
 
<a style='color:#ebc500;' href="https://thecorrespondent.com/664/how-maps-in-the-media-make-us-more-negative-about-migrants/738023272448-bac255ba">How maps in the media make us more negative about migrants</a> by Maite Vermeulen, Leon de Korte & Henk van Houtum

---
class: inverse, center, middle

# Goal 
# Select charts that successfully transport your story

---
class: center

## Data visualizations map values into quantifiable features (aesthetics)

<img src="img/aesthetics-hierarchy.jpg" style='width:29%;'> <a href="https://paldhous.github.io/ucb/2019/dataviz/week2.html">Peter Aldhous</a> based on <a href="https://courses.ischool.berkeley.edu/i247/f05/readings/Cleveland_GraphicalPerception_Science85.pdf">experiments by William Cleveland and Robert McGill</a>

---
class: center

.pull-left[
 <img src="img/australian_bars.png" style='width:70%;'>
]

.pull-right[]

---
class: center

.pull-left[
 <img src="img/australian_bars.png" style='width:70%;'>
]

.pull-right[
 
 <img src="img/2020_02_AustralianFires.png" style='width:100%;'>
]

<a style='color:#ebc500;' href="https://raw.githubusercontent.com/Z3tt/TidyTuesday/master/plots/2020_02/2020_02_AustralianFires.png">#TidyTuesday contribution Week 2020/02</a>

---
class: inverse, center, middle

.pull-left[
 <img src="img/2020_25_AmericanSlavery.png" style='width:95%;'> <a style='color:#ebc500;' href="https://raw.githubusercontent.com/Z3tt/TidyTuesday/master/plots/2020_25/2020_25_AmericanSlavery.png">#TidyTuesday contribution Week 2020/25</a>
]

.pull-right[
 <img src="img/2020_28_CoffeeRatings.png" style='width:100%;'> <a style='color:#ebc500;' href="https://raw.githubusercontent.com/Z3tt/TidyTuesday/master/plots/2020_28/2020_28_CoffeeRatings.png">#TidyTuesday contribution Week 2020/28</a>
]

---
background-image: url("img/chart-choice-helpers.png")
background-size: contain

---
class: inverse, center, middle

# Visual Form 
# Follow design rules and data visualization principles

---
class: center, middle

# Colors 
# and Common Pitfalls

---
class: center

## Color Choice & Accessibility

<img src="img/dw_cols_4.png"> <a href="https://blog.datawrapper.de/colors/">What to consider when choosing colors for data visualization</a> by Lisa Charlotte Rost/DataWrapper

---
class: center

## Color Choice & Accessibility

<img src="img/dw_cols_2.png"> <a href="https://blog.datawrapper.de/colors/">What to consider when choosing colors for data visualization</a> by Lisa Charlotte Rost/DataWrapper

---
class: center

## Color Choice & Accessibility

<img src="img/dw_cols_1.png"> <a href="https://blog.datawrapper.de/colors/">What to consider when choosing colors for data visualization</a> by Lisa Charlotte Rost/DataWrapper

---
class: center, middle

---
class: center, middle

<img src="img/rainbow_map.png" style='width:100%;'> Source: eagereyes.org/basicss/rainbow-color-map

---
class: center, middle

<img src="img/rainbow_map_bw.png" style='width:100%;'> Modified from eagereyes.org/basicss/rainbow-color-map

---
class: center, middle

<img src="img/Rainbow_Fabio_Crameri1.jpg" style='width:43%;'> Source: fabiocrameri.ch/batlow

---
class: center, middle

<img src="img/Rainbow_Fabio_Crameri3.jpg" style='width:43%;'> Source: fabiocrameri.ch/batlow

---
class: center

## Color Choice & Accessibility

Choose color-blind friendly palettes: <a href="https://projects.susielu.com/viz-palette">projects.susielu.com/viz-palette</a>
 
Test your final visualization: <a href="https://color-blindness.com/coblis-color-blindness-simulator">color-blindness.com/coblis-color-blindness-simulator</a>
 
Create a CVD-version of your ggplot in R: <a href="https://github.com/clauswilke/colorblindr">github.com/clauswilke/colorblindr</a>

???

To make sure your visualizations work for people with CVD don’t just rely on provided color palettes. 
Instead, test your figures in a color-blindness simulator!

---
class: center

## Color Choice & Accessibility

<img src="img/viz-palette.png" style='width:98%;'> <a style='font-size:13pt;' href="https://projects.susielu.com/viz-palette">projects.susielu.com/viz-palette</a>

---
class: right, bottom
background-image: url("img/typography.png")
background-size: cover

# Typography &nbsp;

---
class: center

## The Choice of the Font(s)

<ul style='text-align:left;font-size:23pt;color:#5d5d5d;'>
<li> The font(s) should fit the topic and audience - context matters.</li>

<li> Avoid fancy fonts and squiggeled letters.</li>

<li> Use ways to visualize hierarchy.</li>

<li> Avoid using ALL CAPS.</li>

<li> Use a monospaced font with lining for numbers.</li> 
</ul>

---
class: center

## The Choice of the Font(s)

<ul style='text-align:left;font-size:23pt;color:#5d5d5d;'>
<li> The font(s) should fit the topic and audience - context matters.</li>

<li> Avoid fancy fonts and squiggeled letters.</li>

<li> Use ways to visualize hierarchy.</li>

<li> Avoid using ALL CAPS.</li>

<li> Use a monospaced font with lining for numbers.</li>

<li> Consistency is key!</li>
</ul>

---
class: center

## How to Visualize Hierarchy
 
I am important! 
I am important, too! 
Oh, hi there. Thanks for reading me... 
Yeah, I know I am kinda boring. Sorry.

---
class: center

## How to Visualize Hierarchy
 
I am important! 
I am important, too! 
Oh, hi there. Thanks for reading me... 
Yeah, I know I am kinda boring. Sorry.

---
class: center

## How to Visualize Hierarchy
 
I am important! 
I am important, too! 
Oh, hi there. Thanks for reading me... 
Yeah, I know I am kinda boring. Sorry.

---
class: center

## How to Visualize Hierarchy
 
I am important! 
I am important, too! 
Oh, hi there. Thanks for reading me... 
Yeah, I know I am kinda boring. Sorry.

---
class: center

## How to Visualize Hierarchy
 
I am important! 
I am important, too! 
Oh, hi there. Thanks for reading me... Yeah, I know I am kinda boring. Sorry.

---
class: center

## How to Visualize Hierarchy
 
I am important! 
I am important, too! 
Oh, hi there. Thanks for reading me... Yeah, I know I am kinda boring. Sorry.

---
class: center

## How to Visualize Hierarchy
 
I am important! 
I am important, too. 
Oh, hi there. Thanks for reading me... Yeah, I know I am kinda boring. Sorry.

---
class: center

## Keep it Simple

<img src="img/canva_fonts.jpg" style='width:92%;'> Source: canva.com

---
class: center

# The `1Il` Test

---
class: center
 
## Tabular (Monospaced) Numbers

<img src="img/medium_numbers.png" style='width:100%;'> So urce: Ti<a href="https://medium.com/nightingale/choosing-a-font-for-your-data-visualization-2ed37afea637">Choosing Fonts for Your Data Visualization</a> by ffany France onviaedium.com

---

## Allign Your Text

.left-column[
 
<ul style='font-weight:bold;font-size:18pt;'>
 <li>Left-align most text </li>
 <li>Title should be left alligned </li>
 <li>Labels and subtitles can be center or right alligned</li>
</ul>
]

.right-column[
 <img src="img/allignment.png" style='width:70%;'> Source: Will R. Chase
]

---
class: center

## (Don't) Rotate Your Text

.pull-left[
 <img src='img/bars_bad.png' style='width:95%;'>
]

.pull-right[
 <img src='img/bars_good.png' style='width:99%;'>
]

Modified from <a href="https://clauswilke.com/dataviz/">Fundamentals of Data Visualization</a> by Claus Wilke

---
class: center

## (Don't) Rotate Your Text

.pull-left[
 <img src='img/bars_bad.png' style='width:95%;'>
]

.pull-right[
 <img src='img/bars_best.png' style='width:99%;'>
]

&nbsp;

---
class: center

## Use Annotations

.pull-left[
 <img src='img/bars_best.png' style='width:100%;'>
]

.pull-right[
 <img src='img/bars_best_labs.png' style='width:100%;'>
]

&nbsp;

---
class: center

## Use Annotations

.pull-left[
 <img src='img/bars_best.png' style='width:100%;'>
]

.pull-right[
 <img src='img/bars_best_labs_anno.png' style='width:100%;'>
]

&nbsp;

---
class: inverse, center

.pull-left[
<img src="img/github.png" style='width:87%;'> 
<a href="https://github.com/Z3tt">github.com/Z3tt</a>
]

.pull-right[
<img src="img/blog.png" style='width:70%;'> 
<a href="https://cedricscherer.netlify.com">cedricscherer.netlify.com</a>
]

---
class: inverse, center

.pull-left[
<img src="img/blog-tutorial.png" style='width:63%;'>
]

.pull-right[
<img src="img/blog-evol.png" style='width:63%;'>
]

---
class: inverse, center

## Hands-On Coding

.pull-left[
<img src="img/original_jpm.png" style='width:100%;'>
<a href="https://z3tt.github.io/bespokeDS/docs/workshop_jpm/workshop_jpm.html">Timeseries by JPMorgan Chase Institute</a>
]

.pull-right[
<img src="img/original_ddh.png" style='width:100%;'>
<a href="https://z3tt.github.io/bespokeDS/docs/workshop_ddh/workshop_ddh.html">Gene Distribution by DataDrivenHypothesis</a>
]

---
class: inverse, center, middle

# <a href="https://z3tt.github.io/bespokeDS">z3tt.github.io/bespokeDS</a>