Eye Fitting Straight Lines in the Modern Era

class:title-slide-custom

<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;
}

.title-slide-custom .remark-slide-number {
  display: none;
}

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

.title-slide-custom {
  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-custom > h1  {
  color: #111111;
  font-size: 40px;
  text-shadow: none;
  font-weight: 500;
  text-align: left;
  margin-left: 15px;
  padding-top: 80px;
  padding-bottom: 10px;
}
.title-slide-custom > h2  {
  margin-top: -25px;
  padding-bottom: 30px;
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 32px;
  text-align: left;
  margin-left: 15px;
}
.title-slide-custom > h3  {
  margin-top: -25px;
  padding-bottom: -25px;
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 32px;
  text-align: left;
  margin-left: 15px;
}
.title-slide-custom > h4  {
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 28px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: -30px;
  padding-bottom: -25px;
}
.title-slide-custom > h5  {
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 24px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: -40px;
}

</style>

<br><br>
# Eye Fitting Straight Lines in the Modern Era
## Joint Statistical Meetings, Washington, D.C.
### August 8, 2022
#### Emily Robinson 
#### Department of Statistics, University of Nebraska - Lincoln 
##### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:black;overflow:visible;position:relative;"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></svg> [erobin17@calpoly.edu](emily.robinson@huskers.unl.edu) 
##### <svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:black;overflow:visible;position:relative;"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg> [www.emilyarobinson.com](https://www.emilyarobinson.com/) 
##### <svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:black;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> [earobinson95](https://github.com/earobinson95)

---
class:primary
# Outline

<i class="fa fa-chart-bar" role="presentation" aria-label="chart-bar icon"></i> Introduction to graphical testing

<i class="fa fa-pen" role="presentation" aria-label="pen icon"></i> Let's see your drawing skills!

<i class="fa fa-chart-line" role="presentation" aria-label="chart-line icon"></i> Eye Fitting Straight Lines in the Modern Era

<i class="fa fa-superscript" role="presentation" aria-label="superscript icon"></i> Extension to non-linear setting

<i class="fa fa-list" role="presentation" aria-label="list icon"></i> Discussion and limitations

<i class="fa fa-spinner" role="presentation" aria-label="spinner icon"></i> Future work

???

In my talk today I am going to introduce graphical testing and give you a chance to participate in a graphical testing task. I will then provide validation for a modern method of fitting visual regression lines. My dissertation work specifically addresses the perception of logarithmic scales and exponential growth. I will then conclude with my future work.

---
class:primary
# Testing Statistical Graphics

Evaluate design choices and understand cognitive biases through the use of **visual tests** (Cleveland and McGill, 1984; Lewandowsky and Spence, 1989; Spence, 1990; Vanderplas, Cook, and Hofmann, 2020).

Could ask participants to:

- identify differences in graphs.
- read information off of a chart accurately.
- use data to make correct real-world decisions.
- 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.

???

How do we know graphics work and are effective?

One way we can evaluate these design choices through the use of graphical tests.

Could ask participants to:

- identify differences in graphs.
- read information off of a chart accurately.
- use data to make correct real-world decisions.
- 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.

There are different ways of engaging in graphics and how effective the graphic is depends on how you engage with the chart.

---
class:primary
# Fitting Trends by Eye

Initial studies in the 20th century explored the use of fitting lines by eye through a set of points
(Finney, 1951; Mosteller, Siegel, Trapido, et al., 1981; Unwin and Wills, 1988).

Common methods:
+ maneuvering a string,
+ black thread, or
+ ruler.

Recently, Ciccione and Dehaene (2021) conducted a comprehensive set of studies investigating human ability to detect trends in graphical representations using physical adjustment and manipulation methods.

???

Common methods:
+ maneuvering a string,
+ black thread,
+ ruler

until the fit is suitable, then drawing the line through the set of points.

In @ciccione2021can, participants were asked to judge trends, estimate slopes, and conduct extrapolation.
To estimate slopes, participants were asked to report the slope of the best-fitting regression line using a track-pad to adjust the tilt of a line on the screen.
Results indicated the slopes participants reported were always in excess of the ideal slopes, both in the positive and in the negative direction, and those biases increase with noise and with number of points.

---
class:primary
# 'You Draw It' Feature 
## (New York Times, 2015)
.pull-left[

<img src="images/nyt-caraccidents-frame4.png" width="100%" style="display: block; margin: auto;" />
.center[
(Katz, 2017)
]

].pull-right[

Readers are asked to input their own assumptions about various metrics and compare how these assumptions relate to reality.

+ [Family Income affects college chances](https://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html) (Aisch, Cox, and Quealy, 2015)
+ [Just How Bad Is the Drug Overdose Epidemic?](https://www.nytimes.com/interactive/2017/04/14/upshot/drug-overdose-epidemic-you-draw-it.html) (Katz, 2017)
+ [What Got Better or Worse During Obama’s Presidency](https://www.nytimes.com/interactive/2017/01/15/us/politics/you-draw-obama-legacy.html?_r=0) (Buchanan, Park, and Pearce, 2017)
]

???

While not explicitly intended for perceptual testing, in 2015, the New York Times introduced an interactive feature, called 'You Draw It'.
Readers were asked to input their own assumptions about various metrics and compare how these assumptions relate to reality.

The New York Times team utilizes **Data Driven Documents (D3)** that allows readers to predict these metrics through the use of drawing a line on their computer screen with their mouse.

While this interactive feature is designed to get readers to confront their own intuitions about data in the news, we feel that the interactivity of this method may be useful for the purpose of graphical testing and measuring the patterns humans see in data.

---
class:primary
# Research Objectives

<i class="fa fa-laptop-code" role="presentation" aria-label="laptop-code icon"></i> **Adapt & Establish**

Establish 'You Draw It', adapted from the New York Times feature, as a new tool for graphical testing.

<i class="fa fa-check-double" role="presentation" aria-label="check-double icon"></i> **Validate**

Validate ‘You Draw It’ as a method by replicating the less technological study conducted in Mosteller, Siegel, Trapido, et al. (1981).

<i class="fa fa-chart-bar" role="presentation" aria-label="chart-bar icon"></i> **Statistically Model**

Introduce a method for statistically modeling the participant drawn lines using generalized additive mixed models (GAMM).

???

+ Adapt and establish 'You Draw It', adapted from the New York Times feature, as a new tool for graphical testing.

+ Validate ‘You Draw It’ as a method by replicating the less technological study conducted in Mosteller et al. (1981).

+ Extend the study with formal statistical analysis methods in order to better understand the perception of linear regression.

+ Introduce a method for statistically modeling the participant drawn lines using generalized additive mixed models (GAMM).

+ The graphical testing method used in this study differs from prior methods found in @mosteller1981eye and @ciccione2021can by allowing participants to freely draw estimated trend lines - a method which extends nicely to a nonlinear setting.

---
class:primary
# 'You Draw It' Task

Study Participant Prompt: *Use your mouse to fill in the trend in the yellow box region.*

???

Here we see an example of a "You Draw It" task plot used in the study. Participants are prompted to "Use your mouse to fill in the trend in the yellow box region. The yellow box region moves along as the participant draws their trend-line until the yellow region disappears."

Task plots were created using Data Driven Documents (D3), a JavaScript-based graphing framework that facilitates user interaction. We then integrate this into RShiny using the r2d3 package.

---
class:primary
# 'You Draw It' Shiny + D3 Code Sketch

<br>

<br>

See [‘You Draw It’: Implementation of visually fitted trends
with `r2d3`](https://earobinson95.github.io/sdss-2022-you-draw-it-manuscript/2022-sdss-you-draw-it-manuscript.pdf) for details on the adaptation of 'You Draw It'.

---
class:primary
# Let's see your drawing skills!

.pull-left[
.center[
<img src="images/eyefitting_example.gif" width="100%" style="display: block; margin: auto;" />
]
].pull-right[
<img src="images/can-you-draw-it-mobile-qrcode.png" width="88%" style="display: block; margin: auto;" />

.center[
<font size="6">

<br>
OR VISIT <a href="https://emily-robinson.shinyapps.io/can-you-draw-it/">bit.ly/3BF56Zj</a>

</font>
]

]

---
class:primary
# Did it looks something like this?

---
class:primary
# Fitted Regression Lines

**Big Idea:** How do statistical regression results compare to intuitive, visually fitted results?

???

The principle of simple linear regression is to find the line (i.e., determine its equation) which passes as close as possible to the observations, that is, the set of points.

We are going to focus on two regression lines determined by ordinary least squares regression and regression based on the principal axis. The figure illustrates the difference between an OLS regression line which minimizes the vertical distance of points from the line and a regression line based on the principal axis (Principal Component) which minimizes the Euclidean distance of points (orthogonal) from the line. This is what we refer to as “ensemble perception” indicating the visual system can compute averages of various features in parallel across the items in a set (in this case, over the x and y-axes).

**Big Idea:** How do statistical regression results compare to intuitive, visually fitted results?

---
class:primary
# Eye Fitting Straight Lines
## Mosteller, Siegel, Trapido, et al. (1981)

.pull-left[

+ **Big Idea:** Students fitted lines by eye to four sets of points.
+ **Method:** 8.5 x 11 inch transparency with a straight line etched across the middle.
+ **Sample:** 153 graduate students and post docs in Introductory Biostatistics.
+ **Experimental Design:** Latin square.
+ **Findings:** Students tended to fit the slope of the first principal component.

].pull-right[

]

???

I want to introduce a study conducted in 1981 called Eye Fitting Straight Lines by Mosteller et al. In this study:

+ Students fitted lines by eye to four sets of points.
+ 8.5 x 11 inch transparency with a straight line etched across the middle.
+ 153 graduate students and post docs in Introductory Biostatistics.
+ Latin square.
+ Students tended to fit the slope of the first principal component or major axis (the line that minimizes the sum of squares of perpendicular rather than vertical distances).

In the past -> draw on paper

---
class:primary
# Data Generation

.pull-left[

`\(N = 30\)` points `\((x_i, y_i), i = 1,...,N\)` were generated for `\(x_i \in [x_{\text{min}}, x_{\text{max}}]\)`.

Data were simulated based on the point-slope form of a linear model, `\((\bar{x}, y_{\bar{x}})\)`, with additive errors:
`\begin{equation}
y_i = \beta_1(x_i-\bar{x}) + y_{\bar{x}} + e_i
\end{equation}`

where `\(e_i \sim N(0, \sigma^2).\)`

Parameters `\(\beta_1\)`, `\(y_{\bar{x}}\)`, and parameter choice letter names (S, F, V, N), were selected to reflect the four data sets used in Mosteller, Siegel, Trapido, et al. (1981).

].pull-right[

<img id='imgeyefittingexamplesimplot' src='images/eyefitting-example-simplot.png' alt=' ' width='100%'>

<div id='modaleyefittingexamplesimplot' class='modal'>
  
  <img class='modal-content' id='imgmodaleyefittingexamplesimplot'>
  
  <div id='captioneyefittingexamplesimplot' class='modal-caption'></div>
</div>
]

???

Data were simulated based on the point-slope form of a linear model with additive errors.

Parameters `\(\beta_1\)`, `\(y_{\bar{x}}\)`, and parameter choice letter names (S, F, V, N), were selected to reflect the four data sets used in Mosteller, Siegel, Trapido, et al. (1981).

+ **S:** positive slope; small variance; `\(x \in [0, 20]\)`. 
+ **F:** positive slope; a large variance; `\(x \in [0, 20]\)`.  
+ **V:** steep positive slope; small variance; `\(x \in [4, 16]\)`. 
+ **N:** negative slope; large variance; `\(x \in [0, 20]\)`.

---
class:primary
# Study Design

+ Participants recruited through Twitter, Reddit, and direct email in May 2021.

+ A total of 35 individuals completed 131 unique you draw it task plots.

+ Data sets were generated randomly, independently for each participant at the start of the experiment.

+ Participants shown 2 practice plots followed by each of the 4 task plots (S, F, V, N) randomly assigned for each individual in a completely randomized design.

+ The shiny app used to conduct and distribute the study can be accessed at  [emily-robinson.shinyapps.io/you-draw-it-validation-applet](https://emily-robinson.shinyapps.io/you-draw-it-validation-applet/)

???
Participants were recruited through through Twitter, Reddit, and direct email in May 2021. The experiment was conducted and distributed through an RShiny application. Participants were first shown 2 practice plots followed by the 4 You Draw It task plots randomly assigned for each individual in a completely randomized design.

Participants in the study were shown two 'You Draw It' practice plots in order to train participants in the skills associated with executing the task - in particular, the responsiveness of the applet requires that participants draw a line at a certain speed, ensuring that all of the evenly spaced points along the hand-drawn line are filled in. 
During the practice session, participants were provided with instruction prompts accompanied by a .gif and a practice plot.
Instructions guided participants to start at the edge of the yellow box, to make sure the yellow shaded region was moving along with their mouse as they drew, and that they could draw over their already drawn line.

---
class:primary
# Model Data
 
.pull-left[
For each participant, the final data set used for analysis contains:
+ `\(x_{ijk}\)`, `\(y_{ijk,drawn}\)`, `\(\hat y_{ijk,OLS}\)`, `\(\hat y_{ijk,PA}\)`

for 
+ parameter choice `\(i = 1,2,3,4\)`, 
+ participant j = `\(1,...,N_{\text{participant}}\)` 
+ `\(x_{ijk}\)` value corresponding to increment `\(k = 1, ...,4 x_{max} + 1\)`.

**Vertical residuals** between the drawn and fitted values were calculated as: 
+ `\(e_{ijk,OLS} = y_{ijk,drawn} - \hat y_{ijk,OLS}\)`
+ `\(e_{ijk,PA} = y_{ijk,drawn} - \hat y_{ijk,PA}\)`.

].pull-right[

<img id='imgeyefittingtrialplot' src='images/eyefitting-trial-plot.png' alt=' ' width='100%'>

<div id='modaleyefittingtrialplot' class='modal'>
  
  <img class='modal-content' id='imgmodaleyefittingtrialplot'>
  
  <div id='captioneyefittingtrialplot' class='modal-caption'></div>
</div>
]

???
We compare the participant drawn line to two regression lines determined by ordinary least squares regression and regression based on the principal axis. The figure illustrates the difference between an OLS regression line which minimizes the vertical distance of points from the line and a regression line based on the principal axis (Principal Component) which minimizes the Euclidean distance of points (orthogonal) from the line.

Here we see an example of the feedback data from one you draw it plot. For 0.25 increments across the domain, we have the participant drawn values, the fitted values from the ordinary least squares regression, and the fitted values from the regression based on the principal axis.

We are mainly interested in the deviation of the participant drawn line from the fitted regression lines. So while it seems counter-intuitive, the residual actually becomes our response in this case.

---
class:primary
# Linear Trend Constraint
The **Linear Mixed Model** equation for each fit (OLS and PCA) residuals is given by:
`\begin{equation}
e_{ijk,fit} = \left[\gamma_0 + \alpha_i\right] + \left[\gamma_{1} x_{ijk} + \gamma_{2i} x_{ijk}\right] + p_{j} + \epsilon_{ijk}
\end{equation}`
where

+ `\(e_{ijk,fit}\)` is the residual between the drawn and fitted y-values for the `\(i^{th}\)` parameter choice, `\(j^{th}\)` participant, and `\(k^{th}\)` increment of x-value corresponding to either the OLS or PA fit
+ `\(\gamma_0\)` is the overall intercept
+ `\(\alpha_i\)` is the effect of the `\(i^{th}\)` parameter choice (S, F, V, N) on the intercept
+ `\(\gamma_1\)` is the overall slope for `\(x\)`
+ `\(\gamma_{2i}\)` is the effect of the parameter choice on the slope
+ `\(x_{ijk}\)` is the x-value for the `\(i^{th}\)` parameter choice, `\(j^{th}\)` participant, and `\(k^{th}\)` increment
+ `\(p_{j} \sim N(0, \sigma^2_{participant})\)` is the random error due to the `\(j^{th}\)` participant's characteristics
+ `\(\epsilon_{ijk} \sim N(0, \sigma^2)\)` is the residual error.

???

The 'You Draw It' method does not restrict participants to draw a straight line as other methods would, such as using a ruler. Instead, participants are allowed to freely draw a line with potential curvature.
Using the `lmer` function in the lme4 package [@lme4], a linear mixed model (LMM) was fit separately to the OLS residuals and PA residuals, emulating the effect of constraining participants to draw a linear trend.

Both fixed and random parameter estimates in the LMM were determined by optimizing the restricted maximum likelihood (REML) through penalized least squares.
Parameter choice, `\(x\)`, and the interaction between `\(x\)` and the parameter choice were treated as fixed effects with a random participant effect included to account for variation due to participant.

---
class:primary
# Linear Trend Constraint

???
Results indicate the estimated trends of PA residuals (orange) appear to align closer to the y = 0 horizontal (dashed) line than the OLS residuals (blue). In particular, this trend is more prominent in parameter choices with large variances (F and N). These results are consistent to those found in Mosteller
et al. (1981) indicating participants fit a trend-line closer to the estimated regression line with the slope of based on the first principal axis than the estimated OLS regression line.

---
class:primary
# Smoothing Spline Trend
The **Generalized Additive Mixed Model** equation for each fit (OLS and PCA) residuals is given by: 
`\begin{equation}
e_{ijk,fit} = \alpha_i + s_{i}(x_{ijk}) + p_{j} + s_{j}(x_{ijk})
\end{equation}`
where

+ `\(e_{ijk,fit}\)` is the residual between the drawn and fitted y-values for the `\(i^{th}\)` parameter choice, `\(j^{th}\)` participant, and `\(k^{th}\)` increment of x-value corresponding to either the OLS or PA fit
+ `\(\alpha_i\)` is the intercept for the parameter choice `\(i\)`
+ `\(s_{i}\)` is the smoothing spline for the `\(i^{th}\)` parameter choice
+ `\(x_{ijk}\)` is the x-value for the `\(i^{th}\)` parameter choice, `\(j^{th}\)` participant, and `\(k^{th}\)` increment
+ `\(p_{j} \sim N(0, \sigma^2_{participant})\)` is the error due to participant variation
+ `\(s_{j}\)` is the random smoothing spline for each participant.

???

Eliminating the linear trend constraint, the `bam` function in the mgcv package is used to fit a generalized additive mixed model (GAMM) separately to the OLS and PA residuals to allow for estimation of smoothing splines.

---
class:primary
# Smoothing Spline Trend

???
The results of the GAMM align with those in the linear constraint trend providing support that for scatter-plots with more noise (F and N), estimated trends of PA residuals (orange) appear to align closer to the y = 0 horizontal (dashed) line than the OLS residuals (blue). However, By fitting smoothing splines, we can determine whether participants naturally fit a straight trend-line to the set of points or whether they deviate throughout the domain providing us with further insight into the curvature humans perceive in a set of points.

---
class:primary
# Conclusion

+ Estimated drawn trend-lines followed closer to the regression line based on the principal axis than the OLS regression line.

+ GAMM's can be used assess the deviation of the participant drawn lines from the statistically fitted regression lines.

**The reproducibility of these results serve as validation of the 'You Draw It' tool and method.**

???

The intent of this research was to adapt 'You Draw It' from the New York Times feature as a tool and method for testing graphics and introduce a method for statistically modeling the participant drawn lines.
We provided support for the validity of the 'You Draw It' method by replicating the study found in @mosteller1981eye.
Using generalized additive mixed models, we assessed the deviation of the participant drawn lines from the statistically fitted regression lines.
Our results found that when shown points following a linear trend, participants visually fit a regression line that mimics the first principal axis regression as opposed to ordinary least squares regression. 
Data simulated with a larger variance provided strong support for a participants tendency to visually fit the first principal axis regression.
We utilized modern technology to replicate a study conducted 40 years ago, and strengthened the original results with current analysis methods which allow for more flexibility and sophistication.
Our results indicate that participants minimized the distance from their drawn regression line over both the `\(x\)` and `\(y\)` axis simultaneously.

This study reinforces the differences between intuitive visual model fitting and statistical model fitting, providing information about human perception as it relates to the use of statistical graphics.

**The reproducibility of these results serve as validation of the 'You Draw It' tool and method.**

---
class:primary
# Extension to Non-linear Data

Example from a study examining participants ability to make forecasts for exponentially increasing data on log and linear scales.

<img id='imgnonlineargammplot' src='images/nonlinear-gamm-plot.png' alt=' ' width='43%'>

<img id='imgnonlinearspaghettiplot' src='images/nonlinear-spaghetti-plot.png' alt=' ' width='50%'>

<div id='modalnonlineargammplot' class='modal'>
  
  <img class='modal-content' id='imgmodalnonlineargammplot'>
  
  <div id='captionnonlineargammplot' class='modal-caption'></div>
</div>

<div id='modalnonlinearspaghettiplot' class='modal'>
  
  <img class='modal-content' id='imgmodalnonlinearspaghettiplot'>
  
  <div id='captionnonlinearspaghettiplot' class='modal-caption'></div>
</div>

The combination of the GAMM analysis and visual display demonstrates the strength of the 'You Draw It' method for testing statistical graphics.

???

The analysis method presented above extends nicely beyond the linear regressions tested in @mosteller1981eye. Here we briefly demonstrate this with an example from a study examining participants ability to make forecasts for exponentially increasing data on log and linear scales. Along with analyzing the feedback data with the GAMM method for flexibility due to non-linear data, we used spaghetti plots to conduct a visual analysis of participant forecasts compared to the non-linear least squares statistical model and make comparisons between two chart design features ([@fig-exponential-spaghetti-plot]). The combination of the GAMM analysis and visual display demonstrates the strength of the 'You Draw It' method for testing statistical graphics.

---
class:primary
# Discussion

Researchers in cognitive and human movement sciences have found that human arm movement is a complex task (Miall and Haggard, 1995; Rousset, Bérard, and Ortega, 2015).

+ Indirect interaction vs direct interaction

+ Learning curve with completing the task (slow movements, etc.) (De Graaf, Sittig, and van der
Gon, 1991).
+ Some participants may have used a track-pad and results may have been influenced by the pressure placed on their track-pad (Easton and Falzett, 1978).

???

We allowed participants to draw trend lines that deviated from a straight line and gained an insight into the curvature the human eye perceives in a set of points.

The 'You Draw It' method described in this paper uses *indirect interaction* in which the mouse position and resulting visual line on the screen are dissociated.
Therefore, curvature found in participant drawn lines from a straight lines could potentially be explained by the lack of coordination which results from the eye-hand dissociation from indirect drawing and the distortion of visual perception affecting the curvature of movements. (Miall and Haggard, 1995; Rousset, Bérard, and Ortega, 2015)

Additionally, there is a training effect related to the completion of the 'You Draw It' task - the movement of the line must be slow so that the visual representation on the screen can accurately capture each movement.

+ De Graaf, Sittig, and van der
Gon (1991) conducted a study in which participants moved their hand slowly from an initial position in front of them to a visual target (movement task); they were then asked to repeat the task using different sizes of pointers (perceptual task). Their results indicated that deviations from the shortest pointers were comparable to those of the movement task, but that bias increased as the length of the pointer increased.

+ While we suggested participants use a mouse to complete the study, we could not require the use; therefore, some participants may have used a track-pad and results may have been influenced by the pressure placed on their track-pad (Easton and Falzett, 1978).

---
class:primary
# Future Work

**Additional method validation**

+ Compare manual adjustment methods such as shifting and rotating a horizontal line
+ Compare the method conducted by direct interaction (digital pen on tablet) to indirect interaction (computer mouse or track-pad)

**Perception of linear regression**

+ Introduce one (or multiple) extreme outliers

**Extensions**

+ Non-linear settings and forecasting trends
+ Real data to facilitate scientific communication

**Software development**

+ Create an R package designed for easy implementation of 'You Draw It'

---
class:primary
# References
<font size="1.5">
<p><cite><a id='bib-aisch_cox_quealy_2015'></a><a href="#cite-aisch_cox_quealy_2015">Aisch, G., A. Cox, and K. Quealy</a>
(2015).
<em>You Draw It: How Family Income Predicts Children's College Chances</em>.
URL: <a href="https://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html">https://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html</a>.</cite></p>

<p><cite><a id='bib-buchanan_park_pearce_2017'></a><a href="#cite-buchanan_park_pearce_2017">Buchanan, L., H. Park, and A. Pearce</a>
(2017).
<em>You Draw It: What Got Better or Worse During Obama's Presidency</em>.
URL: <a href="https://www.nytimes.com/interactive/2017/01/15/us/politics/you-draw-obama-legacy.html">https://www.nytimes.com/interactive/2017/01/15/us/politics/you-draw-obama-legacy.html</a>.</cite></p>

<p><cite><a id='bib-ciccione2021can'></a><a href="#cite-ciccione2021can">Ciccione, L. and S. Dehaene</a>
(2021).
&ldquo;Can humans perform mental regression on a graph? Accuracy and bias in the perception of scatterplots&rdquo;.
In: <em>Cognitive Psychology</em> 128, p. 101406.</cite></p>

<p><cite><a id='bib-cleveland1984graphical'></a><a href="#cite-cleveland1984graphical">Cleveland, W. S. and R. McGill</a>
(1984).
&ldquo;Graphical perception: Theory, experimentation, and application to the development of graphical methods&rdquo;.
In: <em>Journal of the American Statistical Association</em> 79.387, pp. 531&ndash;554.</cite></p>

<p><cite><a id='bib-de1991misdirections'></a><a href="#cite-de1991misdirections">De Graaf, J., A. Sittig, and J. van der
Gon</a>
(1991).
&ldquo;Misdirections in slow goal-directed arm movements and pointer-setting tasks&rdquo;.
In: <em>Experimental Brain Research</em> 84.2, pp. 434&ndash;438.</cite></p>

<p><cite><a id='bib-easton1978finger'></a><a href="#cite-easton1978finger">Easton, R. D. and M. Falzett</a>
(1978).
&ldquo;Finger pressure during tracking of curved contours: Implications for a visual dominance phenomenon&rdquo;.
In: <em>Perception &amp; Psychophysics</em> 24.2, pp. 145&ndash;153.</cite></p>

<p><cite><a id='bib-finney1951subjective'></a><a href="#cite-finney1951subjective">Finney, D.</a>
(1951).
&ldquo;Subjective judgment in statistical analysis: An experimental study&rdquo;.
In: <em>Journal of the Royal Statistical Society: Series B (Methodological)</em> 13.2, pp. 284&ndash;297.</cite></p>

<p><cite><a id='bib-katz_2017'></a><a href="#cite-katz_2017">Katz, J.</a>
(2017).
<em>You Draw It: Just How Bad Is the Drug Overdose Epidemic?</em>
URL: <a href="https://www.nytimes.com/interactive/2017/04/14/upshot/drug-overdose-epidemic-you-draw-it.html">https://www.nytimes.com/interactive/2017/04/14/upshot/drug-overdose-epidemic-you-draw-it.html</a>.</cite></p>

<p><cite><a id='bib-lewandowsky1989perception'></a><a href="#cite-lewandowsky1989perception">Lewandowsky, S. and I. Spence</a>
(1989).
&ldquo;The perception of statistical graphs&rdquo;.
In: <em>Sociological Methods &amp; Research</em> 18.2-3, pp. 200&ndash;242.</cite></p>

<p><cite><a id='bib-miall1995curvature'></a><a href="#cite-miall1995curvature">Miall, R. and P. Haggard</a>
(1995).
&ldquo;The curvature of human arm movements in the absence of visual experience&rdquo;.
In: <em>Experimental Brain Research</em> 103.3, pp. 421&ndash;428.</cite></p>

<p><cite><a id='bib-mosteller1981eye'></a><a href="#cite-mosteller1981eye">Mosteller, F., A. F. Siegel, E. Trapido, et al.</a>
(1981).
&ldquo;Eye fitting straight lines&rdquo;.
In: <em>The American Statistician</em> 35.3, pp. 150&ndash;152.</cite></p>

<p><cite><a id='bib-rousset2015study'></a><a href="#cite-rousset2015study">Rousset, Ãƒ., F. BÃ©rard, and M. Ortega</a>
(2015).
&ldquo;Study of the effect of the directness of the interaction on novice users when drawing straight lines&rdquo;.
In: 
<em>Proceedings of the 27th Conference on l'Interaction Homme-Machine</em>.
, pp. 1&ndash;7.</cite></p>

<p><cite><a id='bib-spence1990visual'></a><a href="#cite-spence1990visual">Spence, I.</a>
(1990).
&ldquo;Visual psychophysics of simple graphical elements.&rdquo;
In: <em>Journal of Experimental Psychology: Human Perception and Performance</em> 16.4, p. 683.</cite></p>

<p><cite><a id='bib-unwin1988eyeballing'></a><a href="#cite-unwin1988eyeballing">Unwin, A. and G. Wills</a>
(1988).
&ldquo;Eyeballing time series&rdquo;.
In: 
<em>Proceedings of the 1988 ASA Statistical Computing Section</em>.
, pp. 263&ndash;268.</cite></p>

<p><cite><a id='bib-vanderplas2020testing'></a><a href="#cite-vanderplas2020testing">Vanderplas, S., D. Cook, and H. Hofmann</a>
(2020).
&ldquo;Testing Statistical Charts: What makes a good graph?&rdquo;
In: <em>Annual Review of Statistics and Its Application</em> 7, pp. 61&ndash;88.</cite></p>
</font>

---
class:inverse
<br>
<br>
<br>
<br>
<br>
<br>
.center[
# Thank you!
<br
<br>
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></svg> **erobin17@calpoly.edu**
<svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg> **www.emilyarobinson.com**
<svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> **earobinson95**
]

---
class:primary
# Data Generation

<table>
<caption>Designated model equation parameters for simulated data.</caption>
 <thead>
  <tr>
   <th style="text-align:center;"> Parameter Choice </th>
   <th style="text-align:center;"> `\(y_{\bar{x}}\)` </th>
   <th style="text-align:center;"> `\(\beta_1\)` </th>
   <th style="text-align:center;"> `\(\sigma\)` </th>
   <th style="text-align:center;"> Domain </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:center;"> S </td>
   <td style="text-align:center;"> 3.88 </td>
   <td style="text-align:center;"> 0.66 </td>
   <td style="text-align:center;"> 1.30 </td>
   <td style="text-align:center;"> (0,20) </td>
  </tr>
  <tr>
   <td style="text-align:center;"> F </td>
   <td style="text-align:center;"> 3.90 </td>
   <td style="text-align:center;"> 0.66 </td>
   <td style="text-align:center;"> 1.98 </td>
   <td style="text-align:center;"> (0,20) </td>
  </tr>
  <tr>
   <td style="text-align:center;"> V </td>
   <td style="text-align:center;"> 3.89 </td>
   <td style="text-align:center;"> 1.98 </td>
   <td style="text-align:center;"> 1.50 </td>
   <td style="text-align:center;"> (4,16) </td>
  </tr>
  <tr>
   <td style="text-align:center;"> N </td>
   <td style="text-align:center;"> 4.11 </td>
   <td style="text-align:center;"> -0.70 </td>
   <td style="text-align:center;"> 2.50 </td>
   <td style="text-align:center;"> (0,20) </td>
  </tr>
</tbody>
</table>

---
class:inverse
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
.center[
# Data Driven Documents (D3.js)
]

---
class:primary
# Background of D3

**Who?** [Mike Bostock](https://observablehq.com/@mbostock) created D3 during his time working on graphics at the New York Times.
  
**What?** Open-source JavaScript based graphing framework
+ D3 = "Data Driven Documents"
+ `D3` is to JavaScript as `ggplot2` is to R
+ Framework for binding objects and layers to plotting area
  + framework for movement and user interaction

**When?** D3 v1.0 released in 2011, D3.js recently celebrated it's 10th anniversary!

**Where?** The internet!

**Why?** Advantages of using D3 include animation and allowing for movement and user interaction.

**How?** `r2d3`!

???

+ Used by major news and research organizations such as the New York Times, FiveThirtyEight, Washington Post, and the Pew Research Center create and customize graphics.
+ `D3` is to JavaScript as `ggplot2` is to R
+ Advantages include animation and allowing for movement and user interaction.

---
class:primary
# Relationship between D3 and R

.pull-left[
The `r2d3` package in R provides an efficient integration of D3 visuals and R by displaying them in familiar formats:
+ RMarkdown with HTML output
+ Shiny applications (amazing!)

].pull-right[
.center[ 
 <img src="images/r2d3-hex.png" width="40%"/>
]
]

`r2d3` makes it easy to do your data processing in R, then apply D3.js code to visualize that data!

--
.pull-left[
**How?**
+ Converts data in R to JSON that can be interpreted by JavaScript
+ Sources D3 code library
+ Creates plot container (svg)
+ Renders plot using source code
].right-plot[

```r
r2d3(data = data,
     script = "d3-source-code.js",
     d3_version= "5")
```
]

???

A challenge of working with D3 is the environment necessary to display the graphics and images.

The `r2d3` package in R provides an efficient integration of D3 visuals and R by displaying them in familiar formats:
+ RMarkdown with HTML output
+ Shiny applications (amazing!)

`r2d3` makes it easy to do your data processing in R, then apply D3.js code to visualize that data!

The example R code illustrates the structure of the r2d3 function which includes specification of a data frame in R (converted to a JSON file), the D3.js source code file, and the D3 version that accompanies the source code.
A default SVG (scalable vector graphic) container for layering elements is then generated by the r2d3 function which renders the plot using the source code.

---
class:primary
# Getting Started with D3

`D3.js` is to JavaScript as `ggplot2` is to R

.pull-left[
<i class="fab fa-js" role="presentation" aria-label="js icon"></i> [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript)

<i class="fa fa-image" role="presentation" aria-label="image icon"></i> Understand [SVG](http://tutorials.jenkov.com/svg/g-element.html) elements: inspect elements in web browser!

<i class="fa fa-book-open" role="presentation" aria-label="book-open icon"></i> Amelia Wattenberger's [Full Stack D3 and Data Visualization Book](https://www.newline.co/fullstack-d3)

<i class="fa fa-chart-bar" role="presentation" aria-label="chart-bar icon"></i> Build a basic graphic using [r2d3](https://rstudio.github.io/r2d3/articles/introduction.html)

<i class="fa fa-grimace" role="presentation" aria-label="grimace icon"></i> Modify `D3.js` code until it does what you want!
]
.pull-right[
**Additional Resources**

<i class="fa fa-code" role="presentation" aria-label="code icon"></i> [How to learn D3 with no coding experience](https://www.heshameissa.com/blog/learn-d3)

<i class="fab fa-twitter" role="presentation" aria-label="twitter icon"></i> Amelia Wattenberger on [Twitter](https://twitter.com/Wattenberger)
]