Pandemic Dilemmas: Human perception of exponentially increasing data displayed on a log scale evaluated through experimental graphics tasks

class: center, middle, inverse, title-slide

# Pandemic Dilemmas: Human perception of exponentially increasing data displayed on a log scale evaluated through experimental graphics tasks
## University of Nebraska - Lincoln
### Emily Robinson, Susan VanderPlas, Reka Howard
### JSM 2021

---

<style>

/* colors: #EEB422, #8B0000, #191970, #00a8cc */
/* define the new color palette here! */
a, a > code {
  color: #8B0000;
  text-decoration: none;
}

.title-slide h2::after, .mline h1::after {
  content: '';
  display: block;
  border: none;
  background-color: #8B0000;
  color: #8B0000;
  height: 2px;
}

.remark-slide-content {
  background-color: #FFFFFF;
  border-top: 80px solid #8B0000;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  
  background-image: url(css/UNL.svg);
	background-position: 2% 98%;
	background-size: 10%;
	border-bottom: 0;
}

.inverse {
  background-color: #8B0000;
  
  
	
  
}

.remark-slide-content > h1 {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 45px;
  margin-top: -95px;
  margin-left: -00px;
  color: #FFFFFF;
}

.title-slide {
  background-color: #FFFFFF;
  
  background-image:  url(css/UNL.svg);
	background-position: 98% 98%;
	
	background-size: 20%;
	border-bottom: 0;
	border: 10px solid 	#8B0000;
	
}

.title-slide > h1  {
  color: #111111;
  font-size: 32px;
  text-shadow: none;
  font-weight: 500;
  text-align: left;
  margin-left: 15px;
  padding-top: 80px;
}
.title-slide > h2  {
  margin-top: -25px;
  padding-bottom: -20px;
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 28px;
  text-align: left;
  margin-left: 15px;
}
.title-slide > h3  {
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 28px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: -20px;
}

body {
  font-family: 'Roboto';
  font-weight: 300;
}

.remark-slide-number {
  font-size: 13pt;
  font-family: 'Roboto';
  color: #272822;
  opacity: 1;
}

.inverse .remark-slide-number {
  font-size: 13pt;
  font-family: 'Roboto';
  color: #FAFAFA;
  opacity: 1;
}

</style>

# Motivation

Data visualizations played an important role in during the **COVID-19 pandemic**.

.left-col[
Dashboards displayed:
+ case counts. 
+ transmission rates.
+ outbreak regions.

].right-col[

<img id='img91divoccasesjuly2021' src='images/91divoc-cases-july2021.png' alt='(Fagen-Ulmschneider, 2020)' width='100%'>

<div id='modal91divoccasesjuly2021' class='modal'>
  
  <img class='modal-content' id='imgmodal91divoccasesjuly2021'>
  
  <div id='caption91divoccasesjuly2021' class='modal-caption'></div>
</div>
]
???

Data visualizations played an important role in during the COVID-19 pandemic in displaying case counts, transmission rates, and outbreak regions.

+ Mass media routinely showed charts to share information with the public about the progression of the pandemic.
+ Graphics helped guide decision makers to implement policies such as shut-downs or mandated mask wearing.
+ Facilitated communication with the public to increase compliance.

One of the many dashboards was called 91-DIVOC (COVID-19 backwards!). Gives the viewer choices of what to show: case count, mortality, hospitalizations, standardized to population, geographic regions, scales (log/linear).

---
class:primary
# Logarithmic Scales

.center[

<img id='imglogscaleexample' src='images/log-scale-example.jpg' alt=' ' width='60%'>

<div id='modallogscaleexample' class='modal'>
  
  <img class='modal-content' id='imgmodallogscaleexample'>
  
  <div id='captionlogscaleexample' class='modal-caption'></div>
</div>
]

Our perception is **logarithmic at first**, but transitions to a **linear scale later** in development.

.center[
<img src="images/log-numberline.png" width="70%"/>
]

???

One problem we face is when data spans several orders of magnitude shown on its original scale compresses the smaller magnitudes into relatively little area. We can address this problem through the use of a log scale transformation; however, this alters the contextual appearance of the data.

In fact, past research has found that our perception is **logarithmic at first**, but transitions to a **linear scale later** in development. For example, a kindergartner asked to place numbers one through ten along a number line would place three close to the middle, following the logarithmic perspective. We have all experienced this when making a poster where we misjudged the space needed and end up compressing the last few letters onto the poster board.

Therefore, if we perceive logarithmically by default, it is a natural (and presumably low effort) way to display information and should be easy to read and understand/use.

---
class:primary
# Research Objectives

**Big Idea:** Are there benefits to displaying exponentially increasing data on a log scale rather than a linear scale?

1. [Perception of Exponential Growth](https://shiny.srvanderplas.com/log-study/) 📈 📈 📈
2. [Prediction of Exponential Trends](https://shiny.srvanderplas.com/you-draw-it/) ✏️
3. Estimation by Numerical Translation 📏

.pull-left[
.center[

<img id='imglinearlineupexample' src='images/linear-lineup-example.png' alt=' ' width='80%'>

<div id='modallinearlineupexample' class='modal'>
  
  <img class='modal-content' id='imgmodallinearlineupexample'>
  
  <div id='captionlinearlineupexample' class='modal-caption'></div>
</div>
]
].pull-right[
.center[

<img id='imgexponential_example' src='images/exponential_example.gif' alt=' ' width='80%'>

<div id='modalexponential_example' class='modal'>
  
  <img class='modal-content' id='imgmodalexponential_example'>
  
  <div id='captionexponential_example' class='modal-caption'></div>
</div>

]
]

???

One way to evaluate design choices is through the use of graphical tests. We could ask participants to identify differences in graphs, read information off of a chart accurately, use data to make correct real-world decisions, or predict the next few observations. All of these types of tests require different levels of use and manipulation of the information presented in the chart.

The main goal of this research is to use graphical tests to determine if there **are benefits to displaying exponentially increasing data on a log scale rather than a linear scale?** We have developed three graphical tests:

1. [Perception of Exponential Growth](https://shiny.srvanderplas.com/log-study/) 📈 📈 📈
  + Utilizes statistical lineups to test an individuals ability to perceptually differentiate exponentially increasing data with differing rates of change on both the linear and log scale.
2. [Prediction of Exponential Trends](https://shiny.srvanderplas.com/you-draw-it/) ✏️
  + Tests an individuals ability to make predictions for exponentially increasing data with 'You Draw It'
3. Estimation by Numerical Translation 📏
  + Tests an individuals ability to translate a graph of exponentially increasing data into real value quantities.
  
---
class:inverse
<br>
<br>
<br>
<br>
<br>
<br>
.center[
# Thank you!
<br
<br>
To learn more, visit **www.emilyarobinson.com**.
]

???

Thank you for listening to my talk, please place any questions or discussion points in the chat on the JSM platform.