Senior Thesis

class: inverse center middle

# Senio.r-color[R] Thesis

.large[Jonathan Trattner | 05-07-2021]

---
class: inverse center middle

# Hello, World.

???

Hi! So my name is Jonathan Trattner. I am graduate with a Bachelor’s of Science in Computational Neuroscience. This was an interdisciplinary major and I was able to work with Dr. Lucy D'Agostino McGowan from the Department of Statistics on some really cool applied projects.

The one I'm going to be talking about today is a tool we developed for what's called behavioral data collection in neuroscience-land and surveys or questionnaires everywhere else. Without further ado, I'm just going to jump right into it.

---
name: theme
layout: true
.my-header[
]

.my-footer[
]

---
class: top
.my-header[
.title[
What is R?
]
]

.absolute.left-2.top--1.mt4[
![:r_logo]
]

???
R is a letter. Between Q and S.

.relative.top-2.mt5.left-2.ml5.f2.tl.lh-title.pt7[
.relative.top-0.pt3[
is a letter between Q and S.
]
]

???
In computer land, R is what's known as an interpreted, object oriented language. 
A descendent of S, a statistical analysis environment developed at Bell Laboratories -- part of AT&T -- in the 1970s.

---
class: top
.my-header[
.title[
What is R?
]
]

.absolute.left-2.top--1.mt4[
![:r_logo]
]

.relative.top-2.mt5.left-2.ml5.f2.tl.lh-title.pt7[
.relative.top-0.pt3[
is .strike[a letter between Q and S.]
]
]

.relative.left-2.ml5.f2.tl.lh-title[
.relative.left-2.r-color.top-0[an interpreted, .underline[object-oriented] language.]
]

---
class: top center gradient-list
.my-header[
.title[Why R?
]
]

.mt6.top-2.pt2.f2.lh-title.black.ml0[
* It's free 🤑
]

???

First and foremost, R is free unlike some other statistical softwares used in academia like SPSS or Stata.

.relative.f2.lh-title.black.ml0[
* It is easily extendible with 📦
]

???

Secondly, it's easily extendible and open source. So, as we will see, anyone can develop a package with code that is easily usable by others.

.relative.f2.lh-title.black.ml0[
* It has a vibrant community of use.r-color.b[R]s
]

???

Thirdly, it has a vibrant community of users and developers all of whom are super nice. There's a lot of discussion with people of all skill-levels about how to make R the best for the most people.

Another benefit, not on the slide because I'm going to get into it more, is R's easy integration with other programming languages. So, R itself is derived from the language S, but its creators Ross Ihaka and Robert Gentleman took lots of inspiration from Scheme. A lot of R is actually written in C and C++ to optimize performance, and there a many packages that help users integrate these languages.

What I'm going to focus on today is R's integration with HTML, CSS, and JavaScript.

---
class: top center
.my-header[
.title[
Talk R 2 Me
]
]

.f2.lh-copy.mt6.tc.bb.bt.br3.bw2.b--green[
Websites are mainly built with three languages.
]

.relative.flex.justify-between.top--2.mt5.tc[

.mr2.column.w-33.ph3.bg-washed-green.dark-gray.b--green.ba.bw1.br3.ph3.pv0.shadow-5[

.center.b[HTML]

.f4[Defines the structure of websites.]
]

.mr2.column.w-33.ph3.bg-washed-green.dark-gray.b--green.ba.bw1.br3.ph3.pv0.shadow-5[
.center.b[CSS]

.f4[Defines the aesthetics of websites.]
]

.mr2.column.w-33.ph3.bg-washed-green.dark-gray.b--green.ba.bw1.br3.ph3.pv0.shadow-5[
.center.b[JavaScript]

.f4[Defines the behavior of websites.]

]
]

---
class: top center
.my-header[
.title[
Talk R 2 Me
]
]

.f2.lh-copy.mt6.tc.bb.bt.br3.bw2.b--green[
Websites are .strike[mainly] .r-color.fw6.f1[![:annotate -100px](also)] built with .strike[three languages] .r-color.b.f1[![:annotate -150px](R)].
]

.relative.flex.justify-between.top--2.mt5.tc[

.mr2.column.w-33.ph3.bg-washed-green.dark-gray.b--green.ba.bw1.br3.ph3.pv0.shadow-5[

.center.b[HTML]

.f4[Defines the structure of websites.]
]

.mr2.column.w-33.ph3.bg-washed-green.dark-gray.b--green.ba.bw1.br3.ph3.pv0.shadow-5[
.center.b[CSS]

.f4[Defines the aesthetics of websites.]
]

.mr2.column.w-33.ph3.bg-washed-green.dark-gray.b--green.ba.bw1.br3.ph3.pv0.shadow-5[
.center.b[JavaScript]

.f4[Defines the behavior of websites.]

]
]

---
class: top center
.my-header[
.title[
Talk R 2 Me
]
]

.f2.lh-copy.mt6.tc.bb.bt.br3.bw2.b--green[
Websites are .strike[mainly] .r-color.fw6.f1[![:annotate -100px](also)] built with .strike[three languages] .r-color.b.f1[![:annotate -150px](R)].
]

.w-25.relative.pt2.top-1[
![:shiny]
]

.absolute.mt6.left-2.top-0.ml7.pt7.w-60.tl[
Shiny allows users to combine R's computational power with the interactivity of web applications.
]

---
class: top center
.my-header[
.title[
Time to ✨shine ✨
]
]

.star-list li {
  list-style: none;
  text-indent: 1rem;
  margin-bottom: 1rem;
}

.star-list li:before {
  content: "🌟";
  margin-right: 1rem;
}
</style>

.left-0.relative.mt6.pb3.pt2.fw4.measure-center.f1.tl.lh-title.avenir[
"Shiny gives you the ability to pass on some of your .r-color.fw5[R] superpowers to anyone who can use the web."

.tr.right-2.relative.f2.fw3[
\- Hadley Wickham
]
]

.footnote[
[Mastering Shiny by Hadley Wickham, 2020](https://mastering-shiny.org/preface.html)
]

???

Why is this important? Well Shiny is used in academia and industry for a whole host of, well, everything. A lot of data analysis pipelines are built with R, where you can connect to a data base, train and run some model, and analyze and visualize your results.

---
class: top center
.my-header[
.title[
Oooh, ✨shiny ✨
]
]

.mt6[
![](graphics/shinysurveys/shiny-cranlogs-dashboard.gif)
]

.footnote[
[Developed by Joe Cheng & Colleagues, RStudio](https://github.com/rstudio/shiny-examples/tree/master/087-crandash)
]

???

* Create dashboards that track data and/or model metrics in real time

---
class: top center
.my-header[
.title[
Oooh, ✨shiny ✨
]
]

.mt5.pt2[
![:scale 75%](graphics/shinysurveys/shiny-medical-demo.png)
]

.footnote[
[Developed by David Granjon, The Interface Group](https://shiny.rstudio.com/gallery/teach-physiology.html)
]

???

* Create demos for teaching complex materials

---
class: top center
.my-header[
.title[
Oooh, ✨shiny ✨
]
]

.mt6.pt1[
![](graphics/shinysurveys/shiny-mri.gif)
]

.footnote[
[Developed by Hao Zhuname](https://shiny.rstudio.com/gallery/mri-images.html)
]

???

* Visualize MRI data

---
class: top center
.my-header[
.title[
Shine bright like a 💎
]
]

.mt6.pt2.tl.ba.br3.shadow-3[

```r
ui <- fluidPage(
  "Hello, World"
  )

server <- function(input, output, session) {
  
}

shinyApp(ui, server)
```

]

---
class: top center
.my-header[
.title[
Shine bright like a 💎
]
]

.mt6.pt2.tl.ba.br3.shadow-3[

```r
*ui <- fluidPage(
* "Hello, World"
* )

server <- function(input, output, session) {
  
}

shinyApp(ui, server)
```

]

???

The ui or user-interface which describes what you will actually see

---
class: top center
.my-header[
.title[
Shine bright like a 💎
]
]

.mt6.pt2.tl.ba.br3.shadow-3[

```r
ui <- fluidPage( 
  "Hello, World"
  )

*server <- function(input, output, session) {
*  
*}

shinyApp(ui, server)
```

]

???
The server which describes the logic or rules for what happens when you interact with the application.

---
class: top center
.my-header[
.title[
Shine bright like a 💎
]
]

.mt6.pt2.tl.ba.br3.shadow-3[

```r
ui <- fluidPage(
  "Hello, World" 
  )

server <- function(input, output, session) {
  
}

*shinyApp(ui, server)
```

]

???

The command to actually start the application

---
class: top center
.my-header[
.title[
shinysurveys
]
]

.mt5.top-2.left-2.absolute.left.pt3[

.pt1[
![:scale 40%](graphics/shinysurveys/shinysurveys_hex-4.png)
]
.absolute.right-2.tr.w-50.top-2.mt5.pt4.pr4.f2.tj.mr3[
.underline[shinysurveys] is an easy-to-use, minimalistic package for creating & deploying surveys in R.
]

]

???

The overarching theme of my thesis was to develop software that would help professionals, in academia and industry, utilize R more effectively. And a specific focus was for behavioral data collection, which I have been involved with conducting neuroscience research.

---
class: center gradient-list
.my-header[
.title[
Why shinysurveys?
]
]

.mt5.pt5[
- Surveys are used across disciplines to gather information
]

???

Surveys are extremely useful tools for gathering information from individuals on a large scale, and they are widely used in a variety of domains.

.sub-gradient-list[
- Correlate behaviors with 🧠 📷 data.
- Epidemiological questionnaires 📋
]

???

My neuroscience research lab, for example, has used surveys in the past to correlate behaviors such as political ideology with nueroimaging data. Within the medical field, there are many epidemiological questionnaires, such as did you get your Covid-19 vaccine?

.relative[
- Existing survey tools don't always integrate well with data analysis pipelines
]

???

So the ability to easily collect and analyze data is important. Google Forms, SurveyMonkey, Qualtrics, all exist for this purpose, but they often don't integrate with existing data analysis or research pipelines.

As I mentioned, R has become an extremely popular language and so, with the help of Dr. McGowan, we designed {shinysurveys} to streamline this data collection and analysis process.

Well, those of you who were here for Nuri's talk a few minutes ago, might recall the use of a survey module to collect demographic information. That was actually done using {shinysurveys}.

There's a huge number of applications for our package, and today I'm just going to highlight some of the key design features of it, technical challenges, and next steps.

---
class: top center
.my-header[
.title[
shinysurveys
]
]

.tl.f3.mt6.pt1.ba.br3.shadow-3[

```r
library(shinysurveys)

ui <- fluidPage(
  surveyOutput()
)

server <- function(input, output, session) {
 renderSurvey() 
}
```
]

???
Recalling the basic structure of a shiny application, the user-interface and the server, our package provides two functions. One for each component.

---
class: top center
.my-header[
.title[
shinysurveys
]
]

.tl.f3.mt6.pt1.ba.br3.shadow-3[

```r
library(shinysurveys)

ui <- fluidPage(
* surveyOutput(df = questions,
*              survey_title = "Hello, World!",
*              survey_description = "A demo survey")
)

server <- function(input, output, session) {
   renderSurvey(df = questions, 
              theme = "#63B8FF")
}
```
]

???
In the ui component, you call surveyOutput, which takes in a data frame of questions, and an optional title or description.

---
class: top center
.my-header[
.title[
shinysurveys
]
]

.tl.f3.mt6.pt1.ba.br3.shadow-3[

```r
library(shinysurveys)

ui <- fluidPage(
  surveyOutput(df = questions,
               survey_title = "Hello, World!",
               survey_description = "A demo survey")
)

server <- function(input, output, session) {
*  renderSurvey(df = questions,
*             theme = "#63B8FF")
}
```
]

???
In the server component, you call renderSurvey(), which takes in the same data frame of questions, and an optional theme color.

---
class: top center
.my-header[
.title[
shinysurveys
]
]

.mt6[
<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 50em; "> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: #bc00f5 !important;"> TRUE </td>
  </tr>
</tbody>
</table>
]

???
Now I've been talking about this data frame of questions, what does that mean?

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.mt6[
<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 50em; color: black !important;background-color: #f69f8c !important;"> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: #bc00f5 !important;"> TRUE </td>
  </tr>
</tbody>
</table>
]

.tc.ph3.ba.bw1.br3.relative.mt3.black.b--gray.shadow-4.box-color[

The question to be asked.

]

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.mt6[
<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 50em; "> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;color: black !important;background-color: #f6d48c !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: #bc00f5 !important;"> TRUE </td>
  </tr>
</tbody>
</table>
]

.tc.ph3.ba.bw1.br3.relative.mt3.black.b--gray.shadow-4.box-color[

A possible response to the question.

]

???

In multiple choice questions, for example, this would be the possible answers. For questions without discrete answers, such as a numeric input, this would be the default option shown on the input. For text inputs, like this one, it is the placeholder value. We can also have it as an NA, meaning no value, and the package will automatically add a placeholder of quote-on-quote "Placeholder."

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.mt6[
<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 50em; "> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: black !important;background-color: #e3f68c !important;"> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: #bc00f5 !important;"> TRUE </td>
  </tr>
</tbody>
</table>
]

.tc.ph3.ba.bw1.br3.relative.mt3.black.b--gray.shadow-4.box-color[

What type of response is expected? Numeric? Multiple choice? Text?

]

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.mt6[
<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 50em; "> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: black !important;background-color: #aef68c !important;"> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: #bc00f5 !important;"> TRUE </td>
  </tr>
</tbody>
</table>
]

.tc.ph3.ba.bw1.br3.relative.mt3.black.b--gray.shadow-4.box-color[

A unique identifier that allows the Shiny server to identify the input.

]

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.mt6[
<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 50em; "> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;color: black !important;background-color: #8cf69f !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: #bc00f5 !important;"> TRUE </td>
  </tr>
</tbody>
</table>
]

.tc.ph3.ba.bw1.br3.relative.mt3.black.b--gray.shadow-4.box-color[

The input id of the question this depends upon.

]

???
Should this question only appear if a different one has a specific value?

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.mt6[
<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 50em; "> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; "> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: red !important;color: black !important;background-color: #8cf6d4 !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;width: 36em; color: #bc00f5 !important;"> TRUE </td>
  </tr>
</tbody>
</table>
]

.tc.ph3.ba.bw1.br3.relative.mt5.black.b--gray.shadow-4.box-color[

The value of the dependent question that triggers this one to be shown.

]

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.tc.ph3.ba.bw1.br3.relative.mt5.black.b--gray.shadow-4.box-color[

Should the question be required? .i[`TRUE`] or .i[`FALSE`].

]

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

???

We've seen that you can create surveys with a flat file like a csv or excel spreadsheet that can easily be read into R. But what does that look like? Well, consider the question "What is your favorite food?" and let's add another question "What's your name?"

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.mt6[

<table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; margin-left: auto; margin-right: auto;'>
 <thead>
  <tr>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Question </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Option </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Type </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Input Id </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Dependence Value </th>
   <th style="text-align:left;font-weight: bold;text-decoration: underline;color: black !important;text-align: center;font-size: largepx;"> Required </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;"> What is your favorite food? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;"> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;"> favorite_food </td>
   <td style="text-align:left;font-weight: bold;text-align: center;color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;color: #bc00f5 !important;"> TRUE </td>
  </tr>
  <tr>
   <td style="text-align:left;font-weight: bold;text-align: center;background-color: #FFFFFF !important;"> What's your name? </td>
   <td style="text-align:left;font-weight: bold;text-align: center;background-color: #FFFFFF !important;color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;background-color: #FFFFFF !important;"> text </td>
   <td style="text-align:left;font-weight: bold;text-align: center;background-color: #FFFFFF !important;"> name </td>
   <td style="text-align:left;font-weight: bold;text-align: center;background-color: #FFFFFF !important;color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;background-color: #FFFFFF !important;color: red !important;"> NA </td>
   <td style="text-align:left;font-weight: bold;text-align: center;background-color: #FFFFFF !important;color: #bc00f5 !important;"> FALSE </td>
  </tr>
</tbody>
</table>

]

???

So this is great. We have a data frame, i.e. a table, that can be saved and shared as a csv or excel spreadsheet, and that's what we can use to define our survey.

---
class: top center
.my-header[
  .title[
    shinysurveys
  ]
]

.relative.mt7[
![](graphics/presentation-questions-csv-screenshot.png)
]

???
So here is just a screenshot of the csv file that I opened in Excel and it contains our two questions. As I mentioned, one of the benefits of our package is that you can easily share these files and read them into R to create a survey.

So, if one wanted to create a survey asking about favorite foods and names, like we see here, we could do so with this csv.

---
class: top center
.my-header[
  .title[
    shinysurveys demo
  ]
]

.tl.f3.relative.ph1.ba.br3.shadow-3.mt5.top-1[

```r
library(shiny)
library(shinysurveys)

demo_questions <- read.csv("demo-questions.csv")

ui <- fluidPage(
  surveyOutput(df = demo_questions,
               survey_title = "Hello, World!",
               survey_description = "A demo survey")
)

server <- function(input, output, session) {
   renderSurvey(df = demo_questions,
                theme = "#63B8FF")
}

shinyApp(ui, server)
```
]

???

So, revisiting our shinysurveys code, we can read in our data like such:

---
class: top center
.my-header[
  .title[
    shinysurveys demo
  ]
]

.tl.f3.relative.ph1.ba.br3.shadow-3.mt5.top-1[

```r
library(shiny)
library(shinysurveys)

*demo_questions <- read.csv("demo-questions.csv")

ui <- fluidPage(
  surveyOutput(df = demo_questions,
               survey_title = "Hello, World!",
               survey_description = "A demo survey")
)

server <- function(input, output, session) {
   renderSurvey(df = demo_questions,
                theme = "#63B8FF")
}

shinyApp(ui, server)
```
]

???

And we pass the data frame of questions to the survey output and render survey functions
---
class: top center
.my-header[
  .title[
    shinysurveys demo
  ]
]

.tl.f3.relative.ph1.ba.br3.shadow-3.mt5.top-1[

```r
library(shiny)
library(shinysurveys)

demo_questions <- read.csv("demo-questions.csv")

ui <- fluidPage(
* surveyOutput(df = demo_questions,
               survey_title = "Hello, World!",
               survey_description = "A demo survey")
)

server <- function(input, output, session) {
*  renderSurvey(df = demo_questions,
                theme = "#63B8FF")
}

shinyApp(ui, server)
```
]

???

And voila! We're done.

---
class: top center
.my-header[
  .title[
    shinysurveys demo
  ]
]

.mt5.pt3.relative.top--1[

<a href = "https://jdtrat-apps.shinyapps.io/presentation-demo/">
![:scale 80%](graphics/demo-survey-screenshot.png)
</a>
]

???
Let's have a look at what that survey would look like!

---
class: top center gradient-list
.my-header[
  .title[
    Conclusion
  ]
]

.mt5.top-2.left-2.absolute.left.pt3[

.pt1[
![:scale 40%](graphics/shinysurveys/shinysurveys_hex-4.png)
]

]

???
Today I briefly covered one of the packages I've worked on this year with Dr. McGowan. shinysurveys was designed to help bridge the gap between data collection and data processing that is not as well supported with other options such as Google Forms or Qualtrics.

---
class: top center gradient-list
.my-header[
  .title[
    Conclusion
  ]
]

.mt5.top-2.left-2.absolute.left.pt3[

.pt1[
![:scale 40%](graphics/shinysurveys/shinysurveys_hex-4.png)
]

.absolute.right-2.tr.w-50.top-0.mt5.pt4.pr4.tj.mr3[
.tl[
- Designed to bridge the gap between data collection and data processing
]
]
]

---
class: top center gradient-list
.my-header[
  .title[
    Conclusion
  ]
]

.mt5.top-2.left-2.absolute.left.pt3[

.pt1[
![:scale 40%](graphics/shinysurveys/shinysurveys_hex-4.png)
]
.absolute.right-2.tr.w-50.top-0.mt5.pt4.pr4.mr3[

.tl[
- Designed to bridge the gap between data collection and data processing
- Easy to implement and extend
]
]
]

???

As you've seen here today, shinysurveys is straightforward to implement. There are some advanced features such as URL-based user tracking and dependency questions that I did not cover, but are fully documented online, which leads to my last point that it is fully open source!

---
class: top center gradient-list
.my-header[
  .title[
    Conclusion
  ]
]

.mt5.top-2.left-2.absolute.left.pt3[

.pt1[
![:scale 40%](graphics/shinysurveys/shinysurveys_hex-4.png)
]
.absolute.right-2.tr.w-50.top-0.mt5.pt4.pr4.mr3[

.tl[
- Designed to bridge the gap between data collection and data processing
- Easy to implement and extend
- Open source 💻
]
]

]

???

shinysurveys is open-source so anyone can look at the code, suggest changes, or modify it themselves for internal purposes.

In the future, we hope to make it even easier for people to deploy our surveys and are working on developing a GUI, a graphical user interface, similar to Google Forms or Qualtrics that will allow you to simply define your questions and download the R code needed to deploy the code.

---
class: top center gradient-list
.my-header[
  .title[
    Conclusion
  ]
]

top-2.mt6.f-subheadline.lh-solid.ba.br3.bg-light-gray.bw1.shadow-5.black-outline[

[senior-thesis.jdtrat.com](https://senior-thesis.jdtrat.com/index.html)

]

???

And just to really wrap it up, I'd like to point anyone interested in this work, or some of the other packages I worked on for my thesis, towards my thesis website, senior-thesis.jdtrat.com.

I go more in-depth into shinysurveys there, as well as provide a more robust background on R and the other packages I worked on. And, most importantly, I thank all of the people who helped shape my academic trajectory. Some of those people are here today, and that leads me to my next slide. There are three people who I'm especially grateful to who helped me hone my R skills and directly led to this thesis project.

---
class: top center ty-gradient-list
.my-header[
.title[
Thank you 👏
]
]

/* Inspired by https://speckyboy.com/html-lists-style/*/
.ty-gradient-list li {
    list-style: none;
    margin: 1.75rem 0;
    padding-left: 1rem;
    background: white;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    box-shadow: 0.075rem 0.1rem 0.05rem 0.05rem rgba(0,0,0,0.5);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    min-height: 3rem;
    padding: 1rem 1rem 1rem 3rem;
    position: relative;
}

.ty-gradient-list li:after {
      background: linear-gradient(135deg, #95BAFC 0%, DarkTurquoise 100%);
      box-shadow: 0.075rem 0.1rem 0.05rem 0.05rem rgba(0,0,0,0.15);
      border-radius: 1rem 1rem 0 1rem;
      padding-top: 16px;
      content: '\01F64F';
      height: 3rem;
      left: -1rem;
      overflow: hidden;
      position: absolute;
      top: -0.25rem;
      width: 3rem;
}

</style>

.mt6.relative.top-2.w-70.center.pt2[

- Dr. Lucy D'Agostino McGowan

]

???

Dr. Lucy McGowan: She is my thesis advisor through the stats department and helped foster my interest in R and programming in general.

I learned so much about statistics and R through her statistical learning course, even more as her TA, and still more from working with her. She's been such a huge help and I owe her so much for my current trajectory post-college. So thank you, Dr. McGowan.

.relative.w-70.top-2.center[
- Dr. Ken Kishida
]

???

Dr. Ken Kishida: He is a professor in the Department of Neuroscience at Wake Forest School of Medicine and I've been doing research with him for the past three plus years. In about a week, I'll be joining his lab full time to pursue a master's, and he's just been super supportive of my endeavors and provided me the space to combine my interests with R, programming, and neuroscience, and I'm excited to see what we come up with over the next year.

.relative.w-70.top-2.center[
- Dr. Mason Garrison
]

???

Dr. Mason Garrison: She is a professor of quantitative psychology and I met her randomly right before I went abroad my junior fall, and when I came back we got to chatting about our mutual interests in R, and she took me into her lab and we've produced some really cool R packages. She's really fun to work with and super supportive of my ventures, and yeah. Thank you so much.

And, as I mentioned for a full-list of people who have contributed to my educational maturation, please check out my written thesis at senior-thesis.jdtrat.com. And, now I'll take some questions!

---
class: inverse center middle

# Questions?

.large-emoji[
🙋
]