Graphics Presentation

class: center, middle, inverse, title-slide

# Graphics Presentation
### Jess Mukiri
### 4/13/2021

---

class: left, middle, inverse

#Graphics Chapter

-  Create Interactive Plots

- Responsive plots

- Rendering plots

---
class: left, middle, inverse

# Interactivity

<code><a href="https://rdrr.io/pkg/shiny/man/plotOutput.html">plotOutput()</a></code> is an output & input = 
**interactive graphics**

## Basics

### Clicking

### Other point events

### Brushing

###Modifying the plot

###Interactivity limitations

## Dynamic height and width

--
## Images

---

#Basics
.pull-left[
- A plot can respond to **4** different mouse:
- <code>click</code>,
- <code>dblclick</code> (double click),
- <code>hover</code> (when the mouse stays in the same place for a little while), and
- <code>brush</code> (a rectangular selection tool).

<p>(Note the use of <code><a href="https://rdrr.io/pkg/shiny/man/req.html">req()</a></code>, to make sure the app doesn’t do anything before the first click, and that the coordinates are in terms of the underlying <code>wt</code> and <code>mpg</code> variables.)</p>
]

.pull-right[

```r
library(shiny)
library(ggplot2)

ui <- fluidPage(
* plotOutput("plot", click = "plot_click"),
  verbatimTextOutput("info")
)
server <- function(input, output) {
  output$plot <- renderPlot({
    plot(mtcars$wt, mtcars$mpg)
  }, res = 96)

output$info <- renderPrint({
*   req(input$plot_click)
    x <- round(input$plot_click$x, 2)
    y <- round(input$plot_click$y, 2)
    cat("[", x, ", ", y, "]", sep = "")
  })
}
shinyApp(ui = ui, server = server)
```

<div style="width: 100% ; height: 400px ; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" class="muted well">Shiny applications not supported in static R Markdown documents</div>
]
---
# Clicking 
.pull-left[
- **X** & **Y** = location of data
-  <code><a href="https://rdrr.io/pkg/shiny/man/brushedPoints.html">nearPoints()</a></code> is used 
- You can use <code><a href="https://rdrr.io/r/base/browser.html">browser()</a></code> to see what is returned
]

.pull-right[

```r
library(shiny)
library(ggplot2)

ui <- fluidPage(
* plotOutput("plot", click = "plot_click"),
  tableOutput("data")
)
server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(mtcars$wt, mtcars$mpg)
  }, res = 96)
  
  output$data <- renderTable({
*   nearPoints(mtcars, input$plot_click, xvar = "wt", yvar = "mpg")
  })
}
shinyApp(ui = ui, server = server)
```

---
# Other point events

same approach works equally well with:
- <code>click</code>, 
- <code>dblclick</code>, and 
- <code>hover</code>

***just change the name of the argument.***

-  multiple interactions types on one plot

---

#Brushing 
.pull-left[
**Brush** =  a rectangular selection defined by four edges

- Master <code>click</code> and <code><a href="https://rdrr.io/pkg/shiny/man/brushedPoints.html">nearPoints()</a></code>

- switch to <code>brush</code> argument and the <code><a href="https://rdrr.io/pkg/shiny/man/brushedPoints.html">brushedPoints()</a></code> helper.</p>
]

.pull-right[

```r
library(shiny)
library(ggplot2)

ui <- fluidPage(
*   plotOutput("plot", brush = "plot_brush"),
    tableOutput("data")
)
server <- function(input, output, session) {
    output$plot <- renderPlot({
        ggplot(mtcars, aes(wt, mpg)) + geom_point()
    }, res = 96)
    
    output$data <- renderTable({
*       brushedPoints(mtcars, input$plot_brush)
    })
}
shinyApp(ui = ui, server = server)
```

---

# Other point events

- Displaying changes in the same plot you’re interacting with.
Unfortunately this requires an advanced reactivity technique that has not been covered t: <code><a href="https://rdrr.io/pkg/shiny/man/reactiveVal.html">reactiveVal()</a></code>.
-Covered in Chapter <a href="reactivity-components.html#reactivity-components">16</a>

---

#Interactivity limitations

***Flow***
1. JavaScript captures the mouse event.
1. Shiny sends the mouse event data back to R, telling the app that the input is now out of date.
1. All the downstream reactive consumers are recomputed.
1. plotOutput() generates a new PNG and sends it to the browser.

- time is key, to draw, to render etc

**it’s not possible to create Shiny apps where action and response is percieved as instanteous**

- More speed = **JavaScript**  or  Use **plotly** package, as documented in the book <a href="https://plotly-r.com"><em>Interactive web-based data visualization with R, plotly, and shiny</em></a>, by Carson Sievert

---

# Dynamic height and width
.pull-left[
- make plot size reactive, so the width and height changes in response to user actions

- <code>width</code> and <code>height</code> arguments of <code><a href="https://rdrr.io/pkg/shiny/man/renderPlot.html">renderPlot()</a></code> — these now must be defined in the server, not the UI due to change
]

.pull-right[

```r
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))
    }
  )
}
```
***note data does not change**
]

---
## Images

- You can use <code><a href="https://rdrr.io/pkg/shiny/man/renderImage.html">renderImage()</a></code> if you want to display existing images (not plots).

- **renderImage()** needs to return a list. The only crucial argument is src, a local path to the image file.

Supply:
- A contentType, which defines the MIME type of the image. If not provided, Shiny will guess from the file extension, so you only need to supply this if your images don’t have extensions.

- The width and height of the image, if known.

- Any other arguments, like class or alt will be added as attributes to the <img> tag in the HTML.

- You must also supply the **deleteFile** argument.

- **renderImage()** was made to work with temporary files= deleting  images after rendering them. 
- Behaviour changed in Shiny 1.5.0.

https://shiny.rstudio.com/gallery/plot-interaction-zoom.html

---
class: centre, middle, inverse
#Thank you