---
title: Shiny
subtitle: "Lecture 19"
author: "Dr. Colin Rundel"
footer: "Sta 523 - Fall 2024"
format:
  revealjs:
    theme: slides.scss
    transition: fade
    slide-number: true
    self-contained: true
execute:
  echo: true
  warning: true
engine: knitr
---


```{r setup}
#| message: False
#| warning: False
#| include: False
options(
  htmltools.dir.version = FALSE, # for blogdown
  width=70
)

knitr::opts_chunk$set(
  fig.align = "center", fig.retina = 2, dpi = 150,
  out.width = "100%"
)

library(dplyr)
```


#

![](imgs/hex-shiny.png){fig-align="center" width="66%"}

## Shiny

> Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.

## Shiny App

<br/>

::: columns
::: {.column width="40%" .larger}
Server

::: {style="border: 2px solid; border-radius: 5px; text-align:center; font-size: 90px; height: 250px"}
`r fontawesome::fa("r-project")` + `r fontawesome::fa("server")`
:::
:::

::: {.column width="20%"}
::: {style="text-align: center; font-size: 90px; padding-top: 20px"}
<br/>⇄
:::
:::


::: {.column width="40%" .larger}
Client / Browser

::: {style="border: 2px solid; border-radius: 5px; text-align: center; height: 250px"}
::: {style="font-size: 90px"}
`r fontawesome::fa("file-code")`
:::

::: {style="font-size: 50px"}
`r fontawesome::fa("html5")` + `r fontawesome::fa("js")` + `r fontawesome::fa("css3")`
:::
:::

:::
:::

## Anatomy of an App

```{r shiny-anatomy}
#| eval: false
#| echo: true
library(shiny)

ui = list()

server = function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)
```

## Sidebar layout

![](imgs/layout-sidebar.png){fig-align="center" width="60%"}

::: aside
From [Mastering Shiny](https://mastering-shiny.org/action-layout.html#page-with-sidebar)
:::

## Multi-row layout

![](imgs/layout-fluidrow.png){fig-align="center" width="60%"}

::: aside
From [Mastering Shiny](https://mastering-shiny.org/action-layout.html#multi-row)
:::

## Other layouts

- Tabsets 
    
  - see `tabsetPanel()`

- Navbars and navlists

  - See `navlistPanel()`
  
  - and `navbarPage()`

- Dashboards
    
  - [flexdashboard](https://pkgs.rstudio.com/flexdashboard/)
    
  - [Shinydashboard](https://rstudio.github.io/shinydashboard/)
    
  - [bslib](https://rstudio.github.io/bslib/)


## Shiny Widgets Gallery

::: {style="text-align: center"}
<https://shiny.posit.co/r/gallery/widgets/widget-gallery/>
:::

<iframe data-src="https://gallery.shinyapps.io/081-widgets-gallery/" width="100%" height="500px" style="border:1px solid;border-radius: 5px;" data-external="1">

</iframe>


## A brief widget tour

::: {style="text-align: center"}
[rundel.shinyapps.io/widgets/](https://rundel.shinyapps.io/widgets/)
:::


<iframe data-src="https://rundel.shinyapps.io/widgets/" width="100%" height="500px" style="border:1px solid;border-radius: 5px;" data-external="1">

</iframe>



## App background

I've brought a coin with me to class and I'm claiming that it is fair (equally likely to come up heads or tails).

I flip the coin 10 times and we observe 7 heads and 3 tails, should you believe me that the coin is fair? Or more generally what should you believe about the coin's fairness now?


## Model

Let $y$ be the number of successes (heads) in $n$ trials then,

**Likelihood:**
$$
\begin{aligned}
y|n,p &\sim \text{Binom}(n,p) \\
f(y|n,p) &= {n \choose y} p^y(1-p)^{n-y} \\
         &= \frac{n!}{y!(n-y)!} p^y(1-p)^{n-y}
\end{aligned}
$$

. . .

**Prior:**
$$
\begin{aligned}
p &\sim \text{Beta}(a,b) \\
\pi(p|a,b) &= \frac{\Gamma(a+b)}{\Gamma(a)\Gamma(b)} p^{a-1} (1-p)^{b-1}
\end{aligned}
$$

## Posterior

From the definition of Bayes' rule:

$$
\begin{aligned}
f(p|y,n,a,b) 
  &= \frac{f(y|n,p)}{\int^\infty_{-\infty} f(y|n,p) \, dp} \pi(p|a,b) \\
  &\propto f(y|n,p) \, \pi(p|a,b) \\
\end{aligned}
$$

. . .

We then plug in the likelihood and prior and then simplify by dropping any terms not involving $p$,

$$
\begin{aligned}
f(p|y,n,a,b) 
  &\propto \left( \frac{n!}{y!(n-y)!} p^y(1-p)^{n-y} \right)
    \left(\frac{\Gamma(a+b)}{\Gamma(a)\Gamma(b)} p^{a-1} (1-p)^{b-1}\right) \\
  &\propto \Big( p^y(1-p)^{n-y} \Big)
    \Big( p^{a-1} (1-p)^{b-1}\Big) \\
  &\propto p^{y+a-1} (1-p)^{n-y + b-1}
\end{aligned}
$$

## Posterior distribution

Based on the form of the density we can see that the posterior of $p$ must also be a Beta distribution with parameters,

$$
p|y,n,a,b \sim \text{Beta}(y+a, n-y + b)
$$
