07-graphics.Rmd

# Graphics

**Learning objectives**

- Use `renderPlot()` to display reactive plots.
- Create interactive plots.
- Display images with `renderImage()`.

## Interactivity: the basics

```{r 07-01, message=FALSE, warning=FALSE, paged.print=FALSE}
library(shiny)
library(ggplot2)
```

The syntax for displaying a plot in a Shiny app is:

 In the **UI** the `plotOutput()` function releases an output that can also be an input.

In the server the `renderPlot()` function releases the plot.

### Summary of interactive action events

- `click`
- `dblclick`: (double click)
- `hover`: (when the mouse stays in the same place for a little while) 
- `brush`: (a rectangular selection tool)

#### Clicking

As we see in this example, there are two options available:

- `"plot_click"`
- `nearPoints()`

The first option allows you to select specific points from the data, the other one select the area around the selected point, so it releases values which are near the observed value.

```{r 07-02,eval=FALSE, message=FALSE, warning=FALSE, include=T, paged.print=FALSE}

ui <- fluidPage(
  
  plotOutput("plot", click = "plot_click", brush = "plot_brush"),
  verbatimTextOutput("info"),
  tableOutput("data")
  
)

server <- function(input, output, session) {
  
  output$plot <- 
    renderPlot({
    plot(mtcars$wt, mtcars$mpg)
      }, res = 96)
  
  output$info <- 
    renderPrint({
    # this is to make sure the app does nothing before the first click
    req(input$plot_click)
    x <- round(input$plot_click$x, 1)
    y <- round(input$plot_click$y, 1)
    cat("[", x, ", ", y, "]", sep = "")
    })
  
   output$data <- 
     renderTable({
    req(input$plot_click)
    # browser() (you need to use the function with all options as is)
    # nearPoints() function translates coords to data
    nearPoints(mtcars, input$plot_click, xvar = "wt", yvar = "mpg")
    # brushedPoints(mtcars, input$plot_brush, xvar = "wt", yvar = "mpg")
       })
   
    output$data <- 
     renderTable({
    req(input$plot_click)
    
    brushedPoints(mtcars, input$plot_brush, xvar = "wt", yvar = "mpg")
       })
}


# shinyApp(ui,server)
```


More specific example here : https://gallery.shinyapps.io/095-plot-interaction-advanced/


#### Brushing

- brush: a rectangular selection

Example of a [Brushed Points App](https://hadley.shinyapps.io/ms-brushedPoints)
```{r 07-03,eval=FALSE, include=T}
ui <- fluidPage(
  plotOutput("plot", brush = "plot_brush"),
  tableOutput("data")
)
server <- function(input, output, session) {
  output$plot <- renderPlot({
    # here we change the plot() function with ggplot()
    ggplot(mtcars, aes(wt, mpg)) + geom_point()
  }, res = 96)
  
  output$data <- renderTable({
    brushedPoints(mtcars, input$plot_brush)
  })
}
```


## Modifying the plot

- `reactiveVal()`
- `reactive()`

see more info in [chapter 16 Escaping the graph](https://mastering-shiny.org/reactivity-components.html)

This is part of the **function factories** (more info here: [Function factories](https://adv-r.hadley.nz/function-factories.html)), i.e. a function that makes functions. This is the main difference with `reactive()`, the `reactiveVal()` function updates the values.
It need to be run in an reactive environment. If you'd like to debug the function you can use `browser()` inside the app, as we shown before.

```{r 07-04,eval=FALSE, include=T}
val <- reactiveVal(10)
val()
```

Let's see the distance between a click and the points: [Modifying Size App]( https://hadley.shinyapps.io/ms-modifying-size)

```{r 07-05,eval=FALSE, include=T}
set.seed(1014)
df <- data.frame(x = rnorm(100), y = rnorm(100))



ui <- fluidPage(
  plotOutput("plot", click = "plot_click") # comma
)


server <- function(input, output, session) {
  # the reactiveVal function
  dist <- reactiveVal(rep(1, nrow(df)))
  # and the observeEvent calling the reactivity
  observeEvent(input$plot_click,
    dist(nearPoints(df, 
                    input$plot_click, 
                    allRows = TRUE, 
                    addDist = TRUE)$dist_) # this "dist_" gives the distance between the row and the event (in pixels) 
  )

  output$plot <- renderPlot({
    df$dist <- dist()
    ggplot(df, aes(x, y, size = dist)) + 
      geom_point() + 
      # set the limits
      scale_size_area(limits = c(0, 1000), max_size = 10, guide = NULL)
  }, res = 96)
}

# shinyApp(ui,server)
```


Another example with different colors:

- initialise the `reactiveVal()` to a vector of FALSEs
- use `brushedPoints()` and `|` to add any points under the brush to the selection
- double clicking reset the selection

```{r 07-06,eval=FALSE, include=T}
ui <- fluidPage(
  plotOutput("plot", brush = "plot_brush", dblclick = "plot_reset")
)


server <- function(input, output, session) {
  
  selected <- 
    reactiveVal(rep(FALSE, nrow(mtcars)))
    
    observeEvent(input$plot_brush, {
    brushed <- brushedPoints(mtcars, 
                             input$plot_brush,
                             # "selected_" whether it’s near the click event
                             allRows = TRUE)$selected_   
    selected(brushed | selected())
  })
  
  observeEvent(input$plot_reset, {
    selected(rep(FALSE, nrow(mtcars)))
  })

  output$plot <- renderPlot({
    mtcars$sel <- selected()
    
    ggplot(mtcars, aes(wt, mpg)) + 
      geom_point(aes(colour = sel)) +
      scale_colour_discrete(limits = c("TRUE", "FALSE"))
  }, res = 96)
}

# shinyApp(ui,server)
```

## Interactivity limitations

The basic data flow in interactive plots:
```{r 07-07,echo=FALSE,fig.align="center",fig.dim="100%"}
DiagrammeR::mermaid(
  "graph TB
  A(JavaScript captures the mouse event)-->B(Shiny sends the mouse event data back to R)
  B-->C(The reactive actions are recomputed)
  C-->D(plotOutput send an image of the results to the browser)
  "
)
```

In terms of limitations, here we talk about **time response**. To achieve what is thought to be **instantaneous** reaction at click, such as the requested modification is immediately visible, it would be necessary to improve JavaScript computation. And this can be obtained to the **plotly package**.

Here is the resource: [Interactive web-based data visualization with R, plotly, and shiny](https://plotly-r.com/)

## Dynamic height and width

How to change the plot size interactively?
see this example: https://hadley.shinyapps.io/ms-resize
```{r 07-08}
ui <- fluidPage(
  sliderInput("height", "height", min = 100, max = 500, value = 250),
  sliderInput("width", "width", min = 100, max = 500, value = 250),
  plotOutput("plot", width = 250, height = 250)
)
server <- function(input, output, session) {
  output$plot <- renderPlot(
    width = function() input$width,
    height = function() input$height,
    res = 96,
    {
      plot(rnorm(20), rnorm(20))
    }
  )
}
# shinyApp(ui,server)
```


## Images

To display images use `renderImage()` as in this app: https://hadley.shinyapps.io/ms-puppies.

```{r 07-09}
puppies <- tibble::tribble(
  ~breed, ~ id, ~author, 
  "corgi", "eoqnr8ikwFE","alvannee",
  "labrador", "KCdYn0xu2fU", "shaneguymon",
  "spaniel", "TzjMd7i5WQI", "_redo_"
)

ui <- fluidPage(
  selectInput("id", "Pick a breed", 
              choices = setNames(puppies$id, puppies$breed)),
  htmlOutput("source"),
  imageOutput("photo")
)
server <- function(input, output, session) {
  output$photo <- renderImage({
    list(
      src = file.path("puppy-photos", paste0(input$id, ".jpg")),
      contentType = "image/jpeg",
      width = 500,
      height = 650
    )
  }, deleteFile = FALSE)
  
  output$source <- renderUI({
    info <- puppies[puppies$id == input$id, , drop = FALSE]
    HTML(glue::glue("<p>
      <a href='https://unsplash.com/photos/{info$id}'>original</a> by
      <a href='https://unsplash.com/@{info$author}'>{info$author}</a>
    </p>"))
  })
}
```

More info here: https://shiny.rstudio.com/articles/images.html


## Resources

- [Shiny cheatsheet](https://shiny.rstudio.com/images/shiny-cheatsheet.pdf)
- [Images](https://shiny.rstudio.com/articles/images.html)


## Presentation Cohort 1

Follow this link to the presentation for this chapter:

```{r test, echo=FALSE}
knitr::include_url("https://masteringshinych7.netlify.app/#1")
```

## Meeting Videos

### Cohort 1

`r knitr::include_url("https://www.youtube.com/embed/UsE8-qBciDo")`

<details>
  <summary> Meeting chat log </summary>
  
```
00:09:09	Russ Hyde:	Hi everyone.
00:09:19	Layla Bouzoubaa:	👋🏼
00:36:50	priyanka gagneja:	thanks this is awesome .. i had been looking to make this kind of progress bar .. I tired a few things but they were not so pretty 
00:37:28	Russ Hyde:	The website for waiter is really sweet: https://waiter.john-coene.com/#/
00:48:16	Andrew Bates:	https://stackoverflow.com/questions/44112000/move-r-shiny-shownotification-to-center-of-screen
00:50:27	Russ Hyde:	There might be other notification approaches: https://github.com/dreamRs/shinypop
```
</details>

### Cohort 2

`r knitr::include_url("https://www.youtube.com/embed/W01MoW3AWpY")`

<details>
  <summary> Meeting chat log </summary>
  
```
00:21:58	shane:	https://rstudio.github.io/thematic/
00:25:03	Collin Berke:	https://bootswatch.com/
00:28:50	Conor Tompkins:	"This works because, at plot time, thematic grabs CSS styles from the plot(s) HTML container (via shiny::getCurrentOutputInfo())1 and uses that info to set new R styling defaults."
00:28:56	Conor Tompkins:	From https://rstudio.github.io/thematic/articles/auto.html#shiny
00:31:15	Collin Berke:	Not sure how this relates, but here is the link to the `theme_set()` function I referenced: https://ggplot2.tidyverse.org/reference/theme_get.html
00:46:41	Collin Berke:	You can also see the object here: https://gallery.shinyapps.io/095-plot-interaction-advanced/
00:50:48	Collin Berke:	Here's some more about subsetting list objects. Check out this chapter from Advanced R: https://adv-r.hadley.nz/subsetting.html
01:13:14	Ryan Metcalf:	https://www.osti.gov/servlets/purl/1115145
```
</details>

### Cohort 3

`r knitr::include_url("https://www.youtube.com/embed/KwUE61NVDUk")`

<details>
  <summary>Meeting chat log</summary>
```
00:46:29	Njoki Njuki Lucy:	Sorry to ask; what is the reactive
00:46:44	Njoki Njuki Lucy:	reactiveVal() doing here? I am lost
00:57:28	Ryan Metcalf:	"res" in the explanation is the size or scale relation / ratios between your x and y. In this case, 96 pixels is the relationship between height and width.
00:58:18	Ryan Metcalf:	Or maybe a better way to convey resolution is how “zoomed in" or “zoomed out" your graphical object is rendered.
00:58:41	Njoki Njuki Lucy:	Thank you, Ryan! :)
01:01:38	Njoki Njuki Lucy:	what would be the importance of having dynamic height and width?
01:09:49	Federica Gazzelloni:	https://shiny.rstudio.com/articles/images.html
01:11:43	Oluwafemi Oyedele:	Thank you!!!
```
</details>


### Cohort 4

`r knitr::include_url("https://www.youtube.com/embed/Zq6z00X3jzM")`

<details>
  <summary>Meeting chat log</summary>
```
00:11:01	LUCIO ENRIQUE CORNEJO RAMÍREZ:	hello
00:11:11	Lydia Gibson:	Hi Lucio!
00:11:56	Lydia Gibson:	Trevin won’t be able to join today, but I believe Matthew will be.
00:12:12	Lydia Gibson:	Let’s give him a couple more minutes
00:35:47	Lydia Gibson:	https://shiny.rstudio.com/gallery/plot-interaction-advanced.html
00:40:58	Lydia Gibson:	https://plotly-r.com/index.html
00:41:17	LUCIO ENRIQUE CORNEJO RAMÍREZ:	mmm not really, it was pretty clear
00:41:19	LUCIO ENRIQUE CORNEJO RAMÍREZ:	cool demos
00:41:50	LUCIO ENRIQUE CORNEJO RAMÍREZ:	I' bee presenting next week
00:41:53	LUCIO ENRIQUE CORNEJO RAMÍREZ:	thank you, bye
```
</details>


### Cohort 5

`r knitr::include_url("https://www.youtube.com/embed/URL")`

<details>
  <summary>Meeting chat log</summary>
```
LOG
```
</details>