06-visualization.qmd

---
title: "Modelling and visualizing data"
---

```{r, include=FALSE}
library(tidyverse)
library(plotly)
library(leaflet)
library(htmltools)
library(listviewer)
library(htmlwidgets)
library(haven)

ess <- readRDS("data/ess_trust.rds")
ess_geo <- readRDS("data/ess_trust_geo.rds")
```

You will learn how to:

-   Implement and customize interactivity in plots
-   Leverage input events to fine-tune visualizations
-   Use proxies to update plots and maps on-the-fly (appendix)
-   Turn simple R plots into powerful Swiss knifes

## Interactive visualization: The core of Shiny

-   Shiny offers the perfect basis for visualization
    -   Plots can be modified using UI inputs
    -   Seamless integration of interactivity elements (e.g. pan, zoom)
    -   Dashboards facilitate the idea of story-telling by providing context to plots

### Good practice examples

-   Examples of these concepts can be seen in many Shiny apps, one example is Edward Parker's [COVID-19 tracker](https://vac-lshtm.shinyapps.io/ncov_tracker/)

::: callout-note
#### Question

Explore the COVID-19 tracker. Do you think this is a good Shiny app? If so, why? If not, why not?
:::

![COVID-19 Tracker](https://raw.githubusercontent.com/eparker12/nCoV_tracker/master/www/app_image.png)

### Plain plotting vs. Shiny

+---------------+--------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------+----------------------------------------------------------------------------+
| Feature       | Plain R                                                                              | Shiny                                                                                    | Examples                                                                   |
+===============+======================================================================================+==========================================================================================+============================================================================+
| Reactivity    | Changes in the visualization have to be changed in the code                          | Visualizations can be modified on the fly using widgets like drop-down menus             | [ExPanD](https://jgassen.shinyapps.io/expand_fuel_economy/)                |
+---------------+--------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------+----------------------------------------------------------------------------+
| Interactivity | Plots are static raster or vector images                                             | Plots can be dynamic and can be interacted with                                          | [COVID-19 tracker](https://vac-lshtm.shinyapps.io/ncov_tracker/)           |
+---------------+--------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------+----------------------------------------------------------------------------+
| Narrativity   | Sense-making happens through manual annotation, e.g. in an article or a presentation | Plots are embedded in a compilation of narrative elements that can tell a coherent story | [Freedom of Press Shiny app](https://johncoene.shinyapps.io/fopi-contest/) |
|               |                                                                                      |                                                                                          |                                                                            |
|               |                                                                                      |                                                                                          | [GRETA Analytics](https://projectgreta.shinyapps.io/greta-analytics/)      |
+---------------+--------------------------------------------------------------------------------------+------------------------------------------------------------------------------------------+----------------------------------------------------------------------------+

| Medium                   | Reactivity | Interactivity | Narrativity |
|--------------------------|------------|---------------|-------------|
| Plain image              | ❌         | ❌            | ❌          |
| Paper / report           | ❌         | ❌            | ✅          |
| Dashboard (e.g. Tableau) | ❌         | ☑️            | ✅          |
| Quarto / RMarkdown       | ❌         | ☑️            | ✅          |
| Traditional website      | ☑️         | ✅            | ✅          |
| Shiny                    | ✅         | ✅            | ✅          |

### Current app state

-   In the last sections, we added a table and a plot and linked them to a number of inputs
-   The code chunk below contains the current app state
-   In this section, we will:
    -   Augment the violin plot
    -   Add an interactive map

```{r test, eval=FALSE, file="shinyapps/example/06-base.R"}
#| code-fold: true
#| code-summary: Full code for the current app state
```

### Recap: Plotting in Shiny

-   Inserting plots in Shiny apps works just like any other UI component
-   You need two things: `plotOutput()` (or similar) in the UI and `renderPlot()` (or similar) in the server function
    -   [`plotOutput()`](https://shiny.posit.co/r/reference/shiny/1.7.4/plotoutput) creates the empty element in the UI where the plot will go
    -   [`renderPlot()`](https://shiny.posit.co/r/reference/shiny/1.7.4/renderplot) renders the plot and updates the UI element every time a reactive dependency is invalidated

## Data masking

-   Data masking means that function arguments are not evaluated traditionally, but captured or "defused" for later use
-   This strategy is employed by many functions for plotting or creating tables including the tidyverse (also called "tidy evaluation")
-   In a practical sense, this means you can specify string values such as column names as you would variables
-   To learn more about data masking in Shiny, see [chapter 20](https://adv-r.hadley.nz/evaluation.html) of Advanced R and [chapter 12](https://mastering-shiny.org/action-tidy.html#action-tidy) of Mastering Shiny

```{r, eval=FALSE}
# NSE as "tidy evaluation"
ess %>%
  summarize(mean = mean(trust_eu))

# NSE in base R
subset(ess, select = trust_eu)
with(ess, sum(trust_eu))
```

### Why is data masking a problem?

-   Data masks are a little tricky to handle in higher levels of abstraction, i.e. functions or reactive expressions
-   In such cases, we do not need one specific variable, but a dynamically changing variable

```{r, error=TRUE}
plot_df <- function(df, var) {
  ggplot(df) +
    aes(x = var) +
    geom_histogram()
}

plot_df(ess, "trust_eu")
```

### Strategy 1: Use tidy pronouns

-   Tidyverse functions that feature tidy evaluation support the `.data` and `.env` pronouns
-   The `.data` pronoun is a representation of the original data which can be used in a masked environment
-   See also the [reference](https://rlang.r-lib.org/reference/dot-data.html) of `rlang`

```{r, eval=FALSE}
plot_df <- function(df, var) {
  ggplot(df) +
    aes(x = .data[[var]]) +
    geom_histogram()
}

plot_df(ess, "trust_eu")
```

### Strategy 2: Convert strings to expressions

-   Sometimes, masked expressions can simply be constructed as strings
-   One example are formulas (e.g. in `lm(y ~ x1 + x2)`)
-   The `as.formula` function can create formula objects manually

```{r, eval=FALSE}
linreg <- function(df, y, x) {
  fm <- paste(y, "~", paste(x, collapse = " + "))
  fm <- as.formula(fm)
  lm(fm, data = df)
}

linreg(ess, y = "trust_eu", x = c("age", "left_right"))
```

### Strategy 3: Change names

-   In case of poorly implemented data masking, no tools are available to inject variables
-   One strategy to overcome such situations could be to simply change the object names

```{r, eval=FALSE}
plot_df <- function(df, var) {
  df <- df[, var]
  names(df) <- "x"

  ggplot(df) +
    aes(x = x) +
    geom_histogram()
}

plot_df(ess, "trust_eu")
```

## Interactivity

-   R itself is *very bad* at interactivity
-   Shiny supports some very essential interactivity through `plotOutput`
    -   Not covered in this workshop! For a primer, check out [chapter 7.1](https://mastering-shiny.org/action-graphics.html#interactivity) of Mastering Shiny
-   All of today's cool kids use interactivity through Javascript interfaces
-   Shiny can generally process all kinds of Javascript-based widgets because Shiny apps are HTML documents

### Popular Javascript interfaces

-   Examples of Javascript libraries and their corresponding R packages
    -   [Plotly](https://plotly-r.com/) (covered here)
    -   [Leaflet](https://rstudio.github.io/leaflet/) (covered here)
    -   [Highcharts](https://jkunst.com/highcharter/)
    -   [Bokeh](https://hafen.github.io/rbokeh/index.html)
    -   [D3](https://rstudio.github.io/r2d3/index.html)
    -   [Apache ECharts](https://echarts4r.john-coene.com/)
    -   [Frappe Charts](https://merlinoa.github.io/rfrappe/)
    -   [billboard.js](https://dreamrs.github.io/billboarder/)
    -   [apexcharts.js](https://dreamrs.github.io/apexcharter/)
    -   [Google Charts](https://mages.github.io/googleVis/)
    -   [amCharts 4](https://doi.org/10.32614/CRAN.package.rAmCharts4)
    -   [Deck.gl](https://symbolixau.github.io/mapdeck/articles/mapdeck.html)
    -   [WebGL](https://dmurdoch.github.io/rgl/index.html)

## Plotly

-   Plotly is an open-source library to create charts that can be interacted with in various way
-   It supports several languages including R and Python
-   Plotly is arguably the most renowned R package for interactive plotting
-   It even motivated an entire book: <https://plotly-r.com/>

### Plotly's grammar of graphics

-   Similar to ggplot2, R plotly defines its own grammar of graphics
-   A plotly canvas is created with `plot_ly()`
-   Additional plot elements can be added through pipes `%>%` or `|>`

```{r}
ess_geo <- readRDS("data/ess_trust_geo.rds")
ess_geo <- mutate(
  ess_geo,
  region = case_match(
    country,
    c("AT", "BE", "CH", "DE", "NL", "PL", "CZ") ~ "Central",
    c("BG", "EE", "HR", "HU", "LT", "LV", "PL", "SI", "SK") ~ "Eastern",
    c("ES", "IT", "PT", "RS", "ME") ~ "Southern",
    c("IS", "SE", "FI", "GB", "IE", "DK") ~ "Northern"
  )
)

plot_ly(
  sf::st_drop_geometry(ess_geo),
  x = ~trust_eu, # <1>
  y = ~left_right, # <1>
  z = ~age, # <1>
  color = ~region, # <1>
  text = ~country # <1>
) %>%
  add_markers() %>% # <2>
  layout(scene = list( # <3>
    xaxis = list(title = 'Trust in the EU'), # <3>
    yaxis = list(title = 'Left-right placement'), # <3>
    zaxis = list(title = 'Age') # <3>
  )) # <3>
```

1.  Variables such as x, y, z and color are defined as formulas in a call to `plot_ly`. This is comparable to calling `ggplot(aes(x, y, z, color))`.
2.  The plot type is added through a pipe. This is comparable to `ggplot2` functions such as `geom_point` or `geom_bar`.
3.  Visual sugar is then added by calling `layout` and manually editing the axis titles.

### Quick and dirty interactivity

-   One important advantage of plotly is that you do not need to learn its grammar
-   `ggplot2` plots can very easily be converted to an interactive plotly plot:

```{r}
p <- ggplot(iris) +
  geom_point(aes(Sepal.Width, Sepal.Length))
p
```

```{r}
ggplotly(p)
```

### Extending plotly

#### Customization

-   We can extend Plotly objects using three functions:
    -   `layout()` changes the plot organisation (think [`ggplot2::theme()`](https://ggplot2.tidyverse.org/reference/theme.html)), e.g.:
        -   colors, sizes, fonts, positions, titles, ratios and alignment of all kinds of plot elements
        -   `updatemenus` adds buttons or drop down menus that can change the plot style or layout (see [here](https://plotly.com/r/dropdowns/) for examples)
        -   `sliders` adds sliders that can be useful for time series (see [here](https://plotly.com/r/sliders/) for examples)
    -   `config()` changes interactivity configurations, e.g.:
        -   The `modeBarButtons` options and `displaylogo` control the buttons in the mode bar
        -   `toImageButtonOptions` controls the format of plot downloads
        -   `scrollZoom` enables or disables zooming by scrolling
    -   `style()` changes data-level attributes (think [`ggplot2::scale_`](https://ggplot2.tidyverse.org/reference/#scales)), e.g.:
        -   `hoverinfo` controls whether tooltips are shown on hover
        -   `mode` controls whether to show points, lines and/or text in a scatter plot
        -   `hovertext` modifies the tooltips texts shown on hover

#### Schema

-   The actual number of options is immense!
-   You can explore all options by calling [`plotly::schema()`](https://rdrr.io/cran/plotly/man/schema.html)

```{r eval=FALSE}
schema()
```

```{r echo=FALSE}
sch <- jsonedit(plotly:::Schema, mode = "form")
path <- file.path(getwd(), "schema.html")
saveWidget(sch, path)
tags$iframe(srcdoc = paste(readLines(path), collapse = '\n'), width = "100%", height = 500)
```

```{r echo=FALSE}
unlink(path)
```

#### Example

```{r}
p <- ggplot(iris) +
  geom_point(aes(Sepal.Width, Sepal.Length))

ggplotly(p) %>%
  config(
    modeBarButtonsToRemove = c( # <1>
      "sendDataToCloud", "zoom2d", "select2d", "lasso2d", "autoScale2d", # <1>
      "hoverClosestCartesian", "hoverCompareCartesian", "resetScale2d" # <1>
    ), # <1>

    displaylogo = FALSE, # <2>

    toImageButtonOptions = list( # <3>
      format = "svg", # <3>
      filename = "plot", # <3>
      height = NULL, # <3>
      width = NULL # <3>
    ), # <3>

    scrollZoom = TRUE # <4>
  )
```

1.  Removes specified buttons from the modebar.
2.  Removes the Plotly logo.
3.  Changes the output of snapshots taken of the plot. Setting `height` and `width` to `NULL` keeps the aspect ratio of the plot as it is shown in the app.
4.  Enables zooming through scrolling.

### Plotly and Shiny

-   Since plotly does not produce static plots like `ggplot2`, it cannot be served by `plotOutput` and `renderPlot`
-   Plotly defines two new functions:
    -   `plotlyOutput` on the UI side
    -   `renderPlotly` on the server side

UI:

```{r, eval=FALSE}
#| source-line-numbers: "17"
mainPanel(
  tabsetPanel(
    type = "tabs",
    
    ### Table tab ----
    tabPanel(
      title = "Table",
      div(
        style = "height: 600px; overflow-y: auto;",
        tableOutput("table")
      )
    ),
    
    ### Plot tab ----
    tabPanel(
      title = "Plot",
      plotlyOutput("plot", height = 600)
    )
  )
)
```

Server:

```{r, eval=FALSE}
#| source-line-numbers: "8,12"
output$plot <- renderPlotly({
  xvar <- input$xvar
  yvar <- input$yvar
  plot_data <- filtered() %>%
    drop_na() %>%
    mutate(across(where(is.numeric), .fns = as.ordered))
  
  p <- ggplot(plot_data) +
    aes(x = .data[[xvar]], y = .data[[yvar]], group = .data[[xvar]]) +
    geom_violin(fill = "lightblue", show.legend = FALSE) +
    theme_classic()
  ggplotly(p)
})
```

```{r, eval=FALSE, file="shinyapps/example/06-plotly.R"}
#| code-fold: true
#| code-summary: "Complete code (important lines are highlighted)"
#| source-line-numbers: "83,146,150"
```

## Leaflet

-   Leaflet is an open-source JavaScript library to create interactive maps
-   Like plotly it is one of the most popular applications for interactive mapping
-   The [leaflet](https://rstudio.github.io/leaflet/index.html) package makes it easy to create interactive maps directly in R
-   Leaflet is very light-weight! This is good, but it's also bad because it means extra work.

### Leaflet's grammar of graphics

-   Just like `ggplot2` and `plotly`, leaflet is inspired by a grammar of graphics
-   A map canvas can be created using the `leaflet()` function
-   Additional elements are added through pipes `%>%` or `|>`
-   Palettes are created using the `leaflet::color` function family

```{r}
leaflet(ess_geo) %>% # <1>
  addTiles() %>% # <2>
  addPolygons( # <3>
    weight = 2, # <3>
    opacity = 1, # <3>
    fillOpacity = 0.7 # <3>
  ) # <4>
```

1.  Leaflet supports four types of palettes: Bin, Quantile, Factor, and Numeric. In this case we have a numeric variable.
2.  `leaflet()` is the powerhorse of the `leaflet` package. It is comparable to `ggplot()` or `plot_ly()`.
3.  `addTiles()` adds a background map.
4.  `addPolygons()` adds polygons to the map. This function accepts several visual arguments to control, for example, the line width and opacity.

### Adding data

-   To add colorized data, we must first define how to color this data
-   Leaflet defines four color functions to create a palette:
    -   Numeric
    -   Bin
    -   Quantile
    -   Factor
-   Depending on the data

```{r}
#| source-line-numbers: "2,7"
pal <- colorNumeric("YlOrRd", domain = NULL) # <1>

leaflet(ess_geo) %>%
  addTiles() %>%
  addPolygons(
    fillColor = pal(ess_geo[["trust_eu"]]), # <2>
    weight = 2,
    opacity = 1,
    color = "white",
    fillOpacity = 0.7
  )
```

1.  Define a numeric palette with a gradient Yellow-Orange-Red
2.  Apply this palette to the data to generate color values

### Adding a legend

-   Just like adding data, adding legends has to be done manually
-   The `addLegend()` function

```{r}
#| source-line-numbers: "12-18"
pal <- colorNumeric("YlOrRd", domain = NULL)

leaflet(ess_geo) %>%
  addTiles() %>%
  addPolygons(
    fillColor = pal(ess_geo[["trust_eu"]]),
    weight = 2,
    opacity = 1,
    color = "white",
    fillOpacity = 0.7
  ) %>%
  addLegend(
    position = "bottomleft",
    pal = pal,
    values = ess_geo[["trust_eu"]],
    opacity = 0.7,
    title = "Trust in the EU"
  )
```

### Adding interactivity

-   Right now, the leaflet map cannot be interacted with
-   Interactivity has to be added manually
-   Two new features:
    -   `highlightOptions` adds a highlight effect when hovering over a polygon
    -   `labels` adds labels that appear when hovering over a polygon
-   Caveats:
    -   Labels have to be formatted manually, as per usual
    -   Beautifully styled labels require some knowledge of HTML and CSS

```{r}
#| source-line-numbers: "2-7,20-27"
labels <- sprintf( # <1>
  "<strong>%s</strong><br>%s", # <1>
  ess_geo$country, # <1>
  ess_geo$trust_eu # <1>
) # <1>
labels <- lapply(labels, HTML) # <2>

pal <- colorNumeric("YlOrRd", domain = NULL)

leaflet(ess_geo) %>%
  addTiles() %>%
  addPolygons(
    fillColor = pal(ess_geo[["trust_eu"]]),
    weight = 2,
    opacity = 1,
    color = "white",
    fillOpacity = 0.7,
    highlightOptions = highlightOptions( # <3>
      weight = 2, # <3>
      color = "#666", # <3>
      fillOpacity = 0.7, # <3>
      bringToFront = TRUE # <3>
    ), # <3>
    label = labels # <3>
  ) %>%
  addLegend(
    position = "bottomleft",
    pal = pal,
    values = ess_geo[["trust_eu"]],
    opacity = 0.7,
    title = "Trust in the EU"
  )
```

1.  Labels need to be created manually. Here, I generate very essential labels containing the country in bold and the trust value below it.
2.  Labels must be explicitly classified as HTML code. This can be done using the `shiny::HTML` function.
3.  Interactivity is then simply added through the `label` and `highlightOptions` arguments to `addPolygons()`.

### Leaflet and Shiny

-   Again, Leaflet does not produce static plots and thus cannot be served by `plotOutput` and `renderPlot`
-   The `leaflet` package defines two functions:
    -   `leafletOutput` to create the canvas in the UI
    -   `renderLeaflet` to render the Leaflet widget in the server function

UI:

```{r, eval=FALSE}
#| source-line-numbers: "21-24"
mainPanel(
  tabsetPanel(
    type = "tabs",
    
    ### Table tab ----
    tabPanel(
      title = "Table",
      div(
        style = "height: 600px; overflow-y: auto;",
        tableOutput("table")
      )
    ),
    
    ### Plot tab ----
    tabPanel(
      title = "Plot",
      plotlyOutput("plot", height = 600)
    ),
    
    ### Map tab ----
    tabPanel(
      title = "Map",
      leafletOutput("map", height = 600)
    )
  )
)
```

Server:

```{r, eval=FALSE}
output$map <- renderLeaflet({
  var <- input$xvar
  plot_data <- ess_geo[c("country", var)]
  
  # create labels with a bold title and a body
  labels <- sprintf(
    "<strong>%s</strong><br>%s",
    plot_data$country,
    plot_data[[var]]
  )
  labels <- lapply(labels, HTML)
  
  # create a palette for numerics and ordinals
  if (is.ordered(plot_data[[var]])) {
    pal <- colorFactor("YlOrRd", domain = NULL)
  } else {
    pal <- colorNumeric("YlOrRd", domain = NULL)
  }

  # construct leaflet canvas
  leaflet(plot_data) %>%
    # add base map
    addTiles() %>%
    # add choropleths
    addPolygons(
      fillColor = pal(plot_data[[var]]),
      weight = 2,
      opacity = 1,
      color = "white",
      fillOpacity = 0.7,
      # highlight polygons on hover
      highlightOptions = highlightOptions(
        weight = 2,
        color = "#666",
        fillOpacity = 0.7,
        bringToFront = TRUE
      ),
      label = labels
    ) %>%
    # add a legend
    addLegend(
      position = "bottomleft",
      pal = pal,
      values = plot_data[[var]],
      opacity = 0.7,
      title = var
    )
})
```

```{r, eval=FALSE, file="shinyapps/example/06-leaflet.R"}
#| code-fold: true
#| code-summary: "Complete code (important lines are highlighted)"
#| source-line-numbers: "86-90,153-201"
```

## Appendix: Reactivity

-   We already covered Shiny's reactivity quite extensively
-   Recall:
    -   A user changes an input
    -   The server processes that input
    -   The UI updates
-   It turns out, most plotting systems in Shiny support what we will call "plot events"

### Plot events

-   A plot event is triggered by a widget if a user interacts with it
-   In a sense, plot events are a cross-over of interactivity and reactivity
-   A plot event is hidden, i.e. it does not have to be explicitly defined in the UI -- it's just created automatically on the go.
-   By far not all widgets define plot events, but the most important plotting frameworks do:
    -   `plotly` defines a plethora of plot events through the `event_data` function
    -   `leaflet` automatically creates a number of plot events for each map
    -   Even basic plotting supports plot events through additional arguments to `plotOutput`
-   To illustrate plot events, we will use `leaflet` events

### Leaflet's plot events

-   Leaflet events are accessed like so:

::: {style="font-size: 20px;"}
`input$<Map ID>`{style="color: red;"}`_<Object type>`{style="color: green;"}`_<Event type>`{style="color: blue;"}
:::

-   Map ID refers to the input ID given to the leaflet map

#### Leaflet object types

-   "Object type" refers to the geometry, which can be one of:
    -   `marker` for points
    -   `shape` for polygons and lines
    -   `geojson` and `topojson` for data that was passed in GeoJSON or TopoJSON format

#### Leaflet event types

-   "Event type" refers to the action that is performed on the geometry to trigger the event, one of:
    -   `click`
    -   `mouseover`
    -   `mouseout`

#### Other events

-   Additionally, Leaflet has some more general events:
    -   `input$<Map ID>_click` triggers when the background of the map is clicked
    -   `input$<Map ID>_bounds` provides the bounding box of the current view
    -   `input$<Map ID>_zoom` provides the current zoom level
    -   `input$<Map ID>_center` provides the center point of the current view

## Appendix: Proxies

-   Similar to plot events, most Shiny plotting frameworks implement what is called proxies
-   A proxy is a representation of an existing widget
-   Such proxies can be manipulated *in place*, i.e. they do not need to be re-rendered

### Proxies in Shiny frameworks

-   Many Shiny extensions provide proxy functions:
    -   [`DT::dataTableProxy()`](https://rdrr.io/cran/DT/man/proxy.html)
    -   [`plotly::plotlyProxy()`](https://rdrr.io/cran/plotly/man/plotlyProxy.html)
    -   [`leaflet::leafletProxy()`](https://rstudio.github.io/leaflet/reference/leafletProxy.html)

### Proxy workflow

1.  Initialize an isolated output widget (i.e., no dependencies) / `isolate()`
2.  Create an observer that updates input dependencies / `observe()`
3.  Invalidate an input
4.  Remove existing features and add new ones

![Reactive graph for proxies](resources/proxies.svg)

### Manipulating proxies

-   Proxies are best combined with functions that add to, remove to, or clear a widget
-   The following table summarizes these functions

+----------+----------------------------------------------------------------------+--------------------+-------------------+
| Category | Add functions                                                        | Remove             | Clear             |
+==========+======================================================================+====================+===================+
| tile     | `addTiles()`, `addProviderTiles()`                                   | `removeTiles()`    | `clearTiles()`    |
+----------+----------------------------------------------------------------------+--------------------+-------------------+
| marker   | `addMarkers()`, `addCircleMarkers()`                                 | `removeMarker()`   | `clearMarkers()`  |
+----------+----------------------------------------------------------------------+--------------------+-------------------+
| shape    | `addPolygons()`, `addPolylines()`, `addCircles()`, `addRectangles()` | `removeShape()`    | `clearShapes()`   |
+----------+----------------------------------------------------------------------+--------------------+-------------------+
| geojson  | `addGeoJSON()`                                                       | `removeGeoJSON()`  | `clearGeoJSON()`  |
+----------+----------------------------------------------------------------------+--------------------+-------------------+
| topojson | `addTopoJSON()`                                                      | `removeTopoJSON()` | `clearTopoJSON()` |
+----------+----------------------------------------------------------------------+--------------------+-------------------+
| control  | `addControl()`                                                       | `removeControl()`  | `clearControls()` |
+----------+----------------------------------------------------------------------+--------------------+-------------------+

### Synthesis: Plot events, proxies, and plot manipulation

-   Proxies unleash their potential when combined with plot events and plot manipulation:
-   This combination allows users to manipulate plots themselves (e.g. adding or removing elements)
-   The following example makes use of all three concepts to create a map that can add and remove simple markers
    -   Plot events: `input$map_click` and `input$map_marker_click` to register where markers should be added and removed
    -   `leafletProxy("map")`: A proxy is needed to manipulate the map without resetting the view
    -   `addMarkers` and `removeMarker` to add and remove markers

```{r, eval=FALSE}
ui <- fluidPage(
  leafletOutput("map")
)

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

  # initial map render
  output$map <- renderLeaflet({ # <1>
    leaflet() %>% # <1>
      addTiles() %>% # <1>
      setView(lng = 7, lat = 52, zoom = 7) # <1>
  }) # <1>

  # add marker
  observe({ # <2>
    click <- input$map_click # <2>
    leafletProxy("map") %>% # <2>
      addMarkers(lng = click$lng, lat = click$lat, layerId = toString(click)) # <2>
  }) %>% # <2>
    bindEvent(input$map_click) # <2>

  # remove marker
  observe({ # <3>
    click <- input$map_marker_click # <3>
    leafletProxy("map") %>% # <3>
      removeMarker(click$id) # <3>
  }) %>% # <3>
    bindEvent(input$map_marker_click) # <3>
}

shinyApp(ui, server)
```

1.  Render the leaflet map once. Note that the render function does not take any dependencies and is thus only run once.
2.  Add a marker every time the map is clicked somewhere. Note that the marker is added not to a new map, but to a proxy of the map that is already rendered.
3.  Remove a marker that is clicked. Note how the observer is only triggered when a marker is clicked, i.e. when `input$map_marker_click` is triggered.

## Exercise session

### Plotly

::: callout-note
#### Exercise 1.1

Taking the ESS app (full code below), add an output canvas to the UI and a render function to the server function such that the new tab is able to display an interactive plotly widget.

```{r, eval=FALSE, file="shinyapps/example/app.R"}
#| code-fold: true
#| code-summary: "Complete code for the ESS app"
```
:::

::: {.callout-warning collapse="true"}
#### Solution 1.2

In the UI, add a new `tabPanel()` to the `tabsetPanel()`.

```{r, eval=FALSE}
#| source-line-numbers: "26-30"
mainPanel(
  tabsetPanel(
    type = "tabs",
    
    ### Table tab ----
    tabPanel(
      title = "Table",
      div(
        style = "height: 600px; overflow-y: auto;",
        tableOutput("table")
      )
    ),
    
    ### Plot tab ----
    tabPanel(
      title = "Plot",
      plotlyOutput("plot", height = 600)
    ),
    
    ### Map tab ----
    tabPanel(
      title = "Map",
      leafletOutput("map", height = 600)
    ),

    ### New tab ----
    tabPanel(
      title = "Histogram",
      plotlyOutput("hist", height = 600)
    )
  )
)
```

In the server function, add `renderPlotly` and assign it to the output object.

```{r, eval=FALSE}
output$hist <- renderPlotly({

})
```

```{r, eval=FALSE}
#| code-fold: true
#| code-summary: "Complete code (important lines are highlighted)"
#| source-line-numbers: "92-96,209-211"
library(dplyr)
library(tidyr)
library(shiny)
library(plotly)
library(leaflet)
library(haven)

ess <- readRDS("ess_trust.rds")
ess_geo <- readRDS("ess_trust_geo.rds")

# UI ----
ui <- fluidPage(
  titlePanel("European Social Survey - round 10"),
  
  ## Sidebar ----
  sidebarLayout(
    sidebarPanel(
      ### select dependent variable
      selectInput(
        "xvar",
        label = "Select a dependent variable",
        choices = c(
          "Trust in country's parliament" = "trust_parliament",
          "Trust in the legal system" = "trust_legal",
          "Trust in the police" = "trust_police",
          "Trust in politicians" = "trust_politicians",
          "Trust in political parties" = "trust_parties",
          "Trust in the European Parliament" = "trust_eu",
          "Trust in the United Nations" = "trust_un"
        )
      ),
      
      ### select a variable ----
      selectInput(
        "yvar",
        label = "Select an independent variable",
        choices = c(
          "Placement on the left-right scale" = "left_right",
          "Age" = "age",
          "Feeling about household's income" = "income_feeling",
          "How often do you use the internet?" = "internet_use",
          "How happy are you?" = "happiness"
        )
      ),
      
      ### select a country ----
      selectizeInput(
        "countries",
        label = "Filter by country",
        choices = unique(ess$country),
        selected = "FR",
        multiple = TRUE
      ),
      
      ### filter values ----
      sliderInput(
        "range",
        label = "Set a value range",
        min = min(ess$trust_parliament, na.rm = TRUE),
        max = max(ess$trust_parliament, na.rm = TRUE),
        value = range(ess$trust_parliament, na.rm = TRUE),
        step = 1
      )
    ),
    
    ## Main panel ----
    mainPanel(
      tabsetPanel(
        type = "tabs",
        
        ### Table tab ----
        tabPanel(
          title = "Table",
          div(
            style = "height: 600px; overflow-y: auto;",
            tableOutput("table")
          )
        ),
        
        ### Plot tab ----
        tabPanel(
          title = "Plot",
          plotlyOutput("plot", height = 600)
        ),
        
        ### Map tab ----
        tabPanel(
          title = "Map",
          leafletOutput("map", height = 600)
        ),

        ### New tab ----
        tabPanel(
          title = "Histogram",
          plotlyOutput("hist", height = 600)
        )
      )
    )
  )
)


# Server ----
server <- function(input, output, session) {
  # update slider ----
  observe({
    var <- na.omit(ess[[input$xvar]])
    is_ordered <- is.ordered(var)
    var <- as.numeric(var)
    updateSliderInput(
      inputId = "range",
      min = min(var),
      max = max(var),
      value = range(var),
      step = if (is_ordered) 1
    )
  }) %>%
    bindEvent(input$xvar)
  
  # filter data ----
  filtered <- reactive({
    req(input$countries, cancelOutput = TRUE)
    
    xvar <- input$xvar
    yvar <- input$yvar
    range <- input$range
    
    # select country
    ess <- ess[ess$country %in% input$countries, ]
    
    # select variable
    ess <- ess[c("idno", "country", xvar, yvar)]
    
    # apply range
    ess <- ess[ess[[xvar]] > range[1] & ess[[xvar]] < range[2], ]
    ess
  })
  
  # render table ----
  output$table <- renderTable({
    filtered()
  }, height = 400)
  
  # render plot ----
  output$plot <- renderPlotly({
    xvar <- input$xvar
    yvar <- input$yvar
    plot_data <- filtered() %>%
      drop_na() %>%
      mutate(across(where(is.numeric), .fns = as.ordered))
    
    p <- ggplot(plot_data) +
      aes(x = .data[[xvar]], y = .data[[yvar]], group = .data[[xvar]]) +
      geom_violin(fill = "lightblue", show.legend = FALSE) +
      theme_classic()
    ggplotly(p)
  })
  
  # render map ----
  output$map <- renderLeaflet({
    var <- input$xvar
    ess_geo <- ess_geo[c("country", var)]
    
    # create labels with a bold title and a body
    labels <- sprintf(
      "<strong>%s</strong><br>%s",
      ess_geo$country,
      ess_geo[[var]]
    )
    labels <- lapply(labels, HTML)
    
    # create a palette for numerics and ordinals
    if (is.ordered(ess_geo[[var]])) {
      pal <- colorFactor("YlOrRd", domain = NULL)
    } else {
      pal <- colorNumeric("YlOrRd", domain = NULL)
    }
    
    # construct leaflet canvas
    leaflet(ess_geo) %>%
      # add base map
      addTiles() %>%
      # add choropleths
      addPolygons(
        fillColor = pal(ess_geo[[var]]),
        weight = 2,
        opacity = 1,
        color = "white",
        fillOpacity = 0.7,
        # highlight polygons on hover
        highlightOptions = highlightOptions(
          weight = 2,
          color = "#666",
          fillOpacity = 0.7,
          bringToFront = TRUE
        ),
        label = labels
      ) %>%
      # add a legend
      addLegend(
        position = "bottomleft",
        pal = pal,
        values = ess_geo[[var]],
        opacity = 0.7,
        title = var
      )
  })
  
  output$hist <- renderPlotly({
    
  })
}

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

::: callout-note
#### Exercise 1.2

In section 3, we implemented a bivariate plot of the ESS data. For this exercise, create a plotly histogram of one of the trust variables. The idea is to get a quick overview of the statistical distribution of a trust variable.

You can do this either through plotly's own grammar (`plot_ly()`) or by converting a ggplot (`ggplotly()`). In the solutions, I will be using plotly though.

Note that, due to a bug in plotly, the labels of the ESS dataset have to be removed from the dataset. This can be done either by casting `as.numeric` on a variable or by zapping labels with `haven::zap_labels()`.
:::

::: {.callout-warning collapse="true"}
#### Solution 1.2

The following solution implements a histogram of the `trust_parliament` variable.

```{r}
ess <- readRDS("data/ess_trust.rds")

plot_ly(ess, x = ~as.numeric(trust_parliament)) %>%
  add_histogram()
```
:::

::: callout-note
#### Exercise 1.3

Customize the plotly plot according to the following requests:

-   Change the axis titles to something useful
-   Decrease the opacity to 70%
-   Remove the modebar
-   Increase the gap between histogram bars to 20%.
-   Change the bar color to green

Plotly can be very confusing and using Google and other utensils is explicitly welcome!
:::

::: {.callout-tip collapse="true"}
Recall that plotly can be customized using the `layout`, `style`, and `config` functions.

To find out about options specific to a plotly histogram, call `plotly::schema()` and navigate to `traces -> histogram`.
:::

::: {.callout-warning collapse="true"}
#### Solution 1.3

```{r}
plot_ly(ess) %>%
  add_histogram(x = ~as.numeric(trust_parliament)) %>%

  # everything that changes the overall theming goes here
  layout(
      xaxis = list(title = "Trust in the national parliament"),
      yaxis = list(title = "Observations"),
      bargap = 0.2
  ) %>%

  # everything that changes the data- and plot-specific theming goes here
  style(opacity = 0.7, marker = list(color = "green")) %>%

  # everything that changes the interactivity goes here
  config(displayModeBar = FALSE)
```
:::

::: callout-note
#### Exercise 1.4

Implement the plot from exercise 1.3 in the Shiny app. Instead of plotting a single static variable, link the histogram to the input selector for the dependent variable (`input$xvar`) such that choosing a different trust variable updates the histogram.
:::

::: {.callout-warning collapse="true"}
#### Solution 1.4

```{r, eval=FALSE}
output$hist <- renderPlotly({
  plot_ly(filtered()) %>%
    add_histogram(x = as.numeric(ess[input$xvar])) %>%

  # everything that changes the overall theming goes here
  layout(
    xaxis = list(title = "Trust in the national parliament"),
    yaxis = list(title = "Observations"),
    bargap = 0.2
  ) %>%

  # everything that changes the data- and plot-specific theming goes here
  style(opacity = 0.7, marker = list(color = "green")) %>%

  # everything that changes the interactivity goes here
  config(displayModeBar = FALSE)
})
```

```{r, eval=FALSE, file="shinyapps/example/06-exercise1.R"}
#| code-fold: true
#| code-summary: "Complete code (important lines are highlighted)"
#| source-line-numbers: "92-96,209-225"

```
:::

### Leaflet

::: callout-note
#### Exercise 2.1

Taking the ESS app (full code below), add a new tab to the app. Add an output canvas to the UI and a render function to the server function such that the new tab is able to display an interactive map.

```{r, eval=FALSE, file="shinyapps/example/app.R"}
#| code-fold: true
#| code-summary: "Complete code for the ESS app"
```
:::

::: {.callout-warning collapse="true"}
#### Solution 2.1

In the UI, add a new `tabPanel()` to the `tabsetPanel()`.

```{r, eval=FALSE}
#| source-line-numbers: "26-30"
mainPanel(
  tabsetPanel(
    type = "tabs",
    
    ### Table tab ----
    tabPanel(
      title = "Table",
      div(
        style = "height: 600px; overflow-y: auto;",
        tableOutput("table")
      )
    ),
    
    ### Plot tab ----
    tabPanel(
      title = "Plot",
      plotlyOutput("plot", height = 600)
    ),
    
    ### Map tab ----
    tabPanel(
      title = "Map",
      leafletOutput("map", height = 600)
    ),

    ### New tab ----
    tabPanel(
      title = "Countries",
      leafletOutput("countrymap", height = 600)
    )
  )
)
```

In the server function, add `renderLeaflet` and assign it to the output object.

```{r, eval=FALSE}
output$hist <- renderLeaflet({

})
```

```{r, eval=FALSE}
#| code-fold: true
#| code-summary: "Complete code (important lines are highlighted)"
#| source-line-numbers: "92-96,209-211"
library(dplyr)
library(tidyr)
library(shiny)
library(plotly)
library(leaflet)
library(haven)

ess <- readRDS("ess_trust.rds")
ess_geo <- readRDS("ess_trust_geo.rds")

# UI ----
ui <- fluidPage(
  titlePanel("European Social Survey - round 10"),
  
  ## Sidebar ----
  sidebarLayout(
    sidebarPanel(
      ### select dependent variable
      selectInput(
        "xvar",
        label = "Select a dependent variable",
        choices = c(
          "Trust in country's parliament" = "trust_parliament",
          "Trust in the legal system" = "trust_legal",
          "Trust in the police" = "trust_police",
          "Trust in politicians" = "trust_politicians",
          "Trust in political parties" = "trust_parties",
          "Trust in the European Parliament" = "trust_eu",
          "Trust in the United Nations" = "trust_un"
        )
      ),
      
      ### select a variable ----
      selectInput(
        "yvar",
        label = "Select an independent variable",
        choices = c(
          "Placement on the left-right scale" = "left_right",
          "Age" = "age",
          "Feeling about household's income" = "income_feeling",
          "How often do you use the internet?" = "internet_use",
          "How happy are you?" = "happiness"
        )
      ),
      
      ### select a country ----
      selectizeInput(
        "countries",
        label = "Filter by country",
        choices = unique(ess$country),
        selected = "FR",
        multiple = TRUE
      ),
      
      ### filter values ----
      sliderInput(
        "range",
        label = "Set a value range",
        min = min(ess$trust_parliament, na.rm = TRUE),
        max = max(ess$trust_parliament, na.rm = TRUE),
        value = range(ess$trust_parliament, na.rm = TRUE),
        step = 1
      )
    ),
    
    ## Main panel ----
    mainPanel(
      tabsetPanel(
        type = "tabs",
        
        ### Table tab ----
        tabPanel(
          title = "Table",
          div(
            style = "height: 600px; overflow-y: auto;",
            tableOutput("table")
          )
        ),
        
        ### Plot tab ----
        tabPanel(
          title = "Plot",
          plotlyOutput("plot", height = 600)
        ),
        
        ### Map tab ----
        tabPanel(
          title = "Map",
          leafletOutput("map", height = 600)
        ),

        ### New tab ----
        tabPanel(
          title = "Histogram",
          leafletOutput("hist", height = 600)
        )
      )
    )
  )
)


# Server ----
server <- function(input, output, session) {
  # update slider ----
  observe({
    var <- na.omit(ess[[input$xvar]])
    is_ordered <- is.ordered(var)
    var <- as.numeric(var)
    updateSliderInput(
      inputId = "range",
      min = min(var),
      max = max(var),
      value = range(var),
      step = if (is_ordered) 1
    )
  }) %>%
    bindEvent(input$xvar)
  
  # filter data ----
  filtered <- reactive({
    req(input$countries, cancelOutput = TRUE)
    
    xvar <- input$xvar
    yvar <- input$yvar
    range <- input$range
    
    # select country
    ess <- ess[ess$country %in% input$countries, ]
    
    # select variable
    ess <- ess[c("idno", "country", xvar, yvar)]
    
    # apply range
    ess <- ess[ess[[xvar]] > range[1] & ess[[xvar]] < range[2], ]
    ess
  })
  
  # render table ----
  output$table <- renderTable({
    filtered()
  }, height = 400)
  
  # render plot ----
  output$plot <- renderPlotly({
    xvar <- input$xvar
    yvar <- input$yvar
    plot_data <- filtered() %>%
      drop_na() %>%
      mutate(across(where(is.numeric), .fns = as.ordered))
    
    p <- ggplot(plot_data) +
      aes(x = .data[[xvar]], y = .data[[yvar]], group = .data[[xvar]]) +
      geom_violin(fill = "lightblue", show.legend = FALSE) +
      theme_classic()
    ggplotly(p)
  })
  
  # render map ----
  output$map <- renderLeaflet({
    var <- input$xvar
    ess_geo <- ess_geo[c("country", var)]
    
    # create labels with a bold title and a body
    labels <- sprintf(
      "<strong>%s</strong><br>%s",
      ess_geo$country,
      ess_geo[[var]]
    )
    labels <- lapply(labels, HTML)
    
    # create a palette for numerics and ordinals
    if (is.ordered(ess_geo[[var]])) {
      pal <- colorFactor("YlOrRd", domain = NULL)
    } else {
      pal <- colorNumeric("YlOrRd", domain = NULL)
    }
    
    # construct leaflet canvas
    leaflet(ess_geo) %>%
      # add base map
      addTiles() %>%
      # add choropleths
      addPolygons(
        fillColor = pal(ess_geo[[var]]),
        weight = 2,
        opacity = 1,
        color = "white",
        fillOpacity = 0.7,
        # highlight polygons on hover
        highlightOptions = highlightOptions(
          weight = 2,
          color = "#666",
          fillOpacity = 0.7,
          bringToFront = TRUE
        ),
        label = labels
      ) %>%
      # add a legend
      addLegend(
        position = "bottomleft",
        pal = pal,
        values = ess_geo[[var]],
        opacity = 0.7,
        title = var
      )
  })
  
  output$hist <- renderLeaflet({
    
  })
}

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

::: callout-note
#### Exercise 2.2

In section 4, we added an interactive map showing the average of the ESS dataset across Europe. For this exercise, create an interactive map that maps one of the trust variables using a binned scale. Add a basemap, polygons, a legend, and set the default view on Southeastern Europe.

Gathering all information for creating a Leaflet map can be a struggle, so using Google and other utensils is explicitly welcome.
:::

::: {.callout-warning collapse="true"}
#### Solution 2.2

-   `colorBin` creates a binned palette function to use in Leaflet. The `domain` argument must be passed, else the legend will be empty
-   `addTiles` adds an OpenStreetMap basemap
-   `setView` zooms in to a specific location
-   `addPolygons` adds polygon data to the map
    -   The `fillColor` argument takes a vector of colors which can be created using the `pal` palette function
-   `addLegend` adds the legend

```{r, results='asis'}
ess_geo <- readRDS("data/ess_trust_geo.rds")

pal <- colorBin("YlOrRd", domain = ess_geo$trust_eu)

leaflet(ess_geo) %>%
  addTiles() %>%
  setView(13, 45, 5) %>%
  addPolygons(
    fillColor = ~pal(trust_eu)
  ) %>%
  addLegend(
    pal = pal,
    values = ~trust_eu
  )
```
:::

::: callout-note
#### Exercise 2.3

Customize the map from exercise 2.2 according to the following requests:

-   Increase the fill opacity to 60%
-   Replace the polygon borders with small, opaque, black lines
-   Replace the OpenStreetMap basemap with a Stamen basemap
-   Add a small blue dot where GESIS Mannheim is (Longitude: 8.46°, Latitude: 49.48°)
-   Move the legend to the bottomleft and make it opaque
:::

::: {.callout-warning collapse="true"}
#### Solution 2.3

-   Fill opacity is controlled with the `fillOpacity` argument to `addPolygons`
-   Border size is controlled with the `weight` argument
-   Border opacity is controlled with the `opacity` argument
-   Border color is controlled with the `color` argument
-   Basemaps from known providers can be added with the `addProviderTiles` function
-   Dots can be added with the `addCircleMarkers` function
    -   To control color and size, you can use the `color`, `fillOpacity`, `opacity`, and `radius` arguments
-   Legend positioning is controlled with the `position` argument of `addLegend`

```{r, results='asis'}
pal <- colorBin("YlOrRd", domain = ess_geo$trust_eu)

leaflet(ess_geo) %>%
    addProviderTiles("Stadia.StamenTerrain") %>%
    setView(13, 45, 5) %>%
    addPolygons(
      fillColor = ~pal(trust_eu),
      color = "black",
      opacity = 1,
      weight = 1,
      fillOpacity = 0.6
    ) %>%
    addLegend(
      pal = pal,
      values = ~trust_eu,
      position = "bottomright",
      opacity = 1
    ) %>%
    addCircleMarkers(
      lng = 8.46,
      lat = 49.48,
      color = "blue",
      fillOpacity = 1,
      opacity = 1,
      radius = 3
    )
```
:::

::: callout-note
#### Exercise 2.4

In section 4, we added labels that appear when hovering over a polygon. In this exercise, add labels that appear when clicking on the GESIS marker from the last exercise. The label should read "This is **GESIS** in Mannheim, DE" (incl. formatting).
:::

::: {.callout-warning collapse="true"}
#### Solution 2.3

```{r, results='asis'}
pal <- colorBin("YlOrRd", domain = ess_geo$trust_eu)
popup <- HTML("This is <strong>GESIS</strong> in Mannheim, DE")

leaflet(ess_geo) %>%
    addProviderTiles("Stadia.StamenTerrain") %>%
    setView(13, 45, 5) %>%
    addPolygons(
      fillColor = ~pal(trust_eu),
      color = "black",
      opacity = 1,
      weight = 1,
      fillOpacity = 0.6
    ) %>%
    addLegend(
      pal = pal,
      values = ~trust_eu,
      position = "bottomright",
      opacity = 1
    ) %>%
    addCircleMarkers(
      lng = 8.46,
      lat = 49.48,
      color = "blue",
      fillOpacity = 1,
      opacity = 1,
      radius = 3,
      popup = popup
    )
```
:::

::: callout-note
#### Exercise 2.5

Implement the leafelt map from exercise 2.2 to 2.4 in the Shiny app. Instead of plotting a single static variable, link the histogram to the input selector for the dependent variable (`input$xvar`) such that choosing a different trust variable updates the histogram.
:::

::: {.callout-warning collapse="true"}
#### Solution 2.5

```{r, eval=FALSE, results='asis'}
output$gmap <- renderLeaflet({
  xvar <- input$xvar
  pal <- colorBin("YlOrRd", domain = ess_geo[[xvar]])
  popup <- HTML("This is <strong>GESIS</strong> in Mannheim, DE")

  leaflet(ess_geo) %>%
    addProviderTiles("Stadia.StamenTerrain") %>%
    setView(13, 45, 5) %>%
    addPolygons(
      fillColor = pal(ess_geo[[xvar]]),
      color = "black",
      opacity = 1,
      weight = 1,
      fillOpacity = 0.6
    ) %>%
    addLegend(
      pal = pal,
      values = ess_geo[[xvar]],
      position = "bottomright",
      opacity = 1
    ) %>%
    addCircleMarkers(
      lng = 8.46,
      lat = 49.48,
      color = "blue",
      fillOpacity = 1,
      opacity = 1,
      radius = 3,
      popup = popup
    )
})
```

```{r, eval=FALSE, file="shinyapps/example/06-exercise2.R"}
#| code-fold: true
#| code-summary: "Solution for exercise 2.5 (important lines are highlighted)"
#| source-line-numbers: "92-96,209-240"

```
:::

### Proxies and plot events

::: callout-note
## Exercise 3.1

Taking the body of a server function below, how can you modify a proxy of the `plot` output every time the input is updated? Add a reactive expression that accesses the plot proxy on each input update.

```{r, eval=FALSE}
output$map <- renderPlotly({
  var <- input$variable
  plot_ly(x = ess[[var]]) %>%
    add_histogram()
})
```
:::

::: {.callout-tip collapse="true"}
A proxy typically resides in an observer.

How can you ensure that the observer triggers when the input is updated?
:::

::: {.callout-warning collapse="true"}
## Solution 3.1

```{r, eval=FALSE}
output$map <- renderPlotly({
  var <- input$variable
  plot_ly(x = ess[[var]]) %>%
    add_histogram()
})

observe({
  plotlyProxy("plot")
}) %>%
  bindEvent(input$variable)
```
:::

::: callout-note
#### Exercise 3.2

Taking the code below, implement a proxy of the Leaflet map, that is, whenever the map is updated update the map proxy (`leafletProxy()`) instead of re-rendering the map. What are the advantages of updating the map using a proxy?

Note that you need to isolate `input$xvar` in `renderLeaflet()`. This step is necessary in order to render the leaflet map exactly once. You can isolate an input by typing `isolate(input$xvar)`. Isolation severs an input from the reactive graph.

```{r, eval=FALSE, file="shinyapps/example/06-exercise3_2.R"}
#| code-fold: true
#| code-summary: "Code for exercise 3.2"

```
:::

::: {.callout-tip collapse="true"}
The workflow to update the map using a proxy is the following:

1.  Render the map once using `renderLeaflet()`
2.  Everytime the map is updated (by changing `input$xvar`), trigger an observer
3.  The observer changes `leafletProxy("map")`
4.  Using the proxy, clear all polygons and add the updated polygons

You can clear the existing polygons and the legend using the `leaflet::clearShapes()` and `leaflet::clearControls()` functions.
:::

::: {.callout-warning collapse="true"}
#### Solution 3.2

A solution for exercise 3.1 is presented in the collapsed code chunk below. A proxy is implemented by first rendering the map once through `renderLeaflet` and then triggering an observer each time the map is updated. The observer contains a call to `leafletProxy` which updates the map in place instead of re-rendering.

Although the proxy does not serve any important purpose in this case, there are two key advantages which can be observed in the result:

1.  The map becomes much snappier, that means the updates are shown much faster than before
2.  The map view does not reset when the map updates. You can preserve the pan position and zoom level

These advantages might be irrelevant in this scenario, but can come in handy in more specific use cases.

```{r, eval=FALSE, file="shinyapps/example/06-exercise3_2_solution.R"}
#| code-fold: true
#| code-summary: "Solution for exercise 3.2 (important line are highlighted)"
#| source-line-numbers: "42,78-111"
```
:::

::: callout-note
#### Exercise 3.3

Taking the code from exercise 3.1, add a proxy that adds small blue dots when clicking anywhere on one of the polygons.
:::

::: {.callout-tip collapse="true"}
The proxy should be triggered if and only if a polygon is clicked. How can this plot event be accessed? Revisit section 6.2 if you are lost.

To add a blue dot, see the [`addCircleMarkers`](https://rstudio.github.io/leaflet/reference/map-layers.html) function.
:::

::: {.callout-warning collapse="true"}
#### Solution 3.3

To add a blue dot when a user clicks on a polygon, add a observer that holds a proxy to "map" and depends on `input$map_click_shape.`

The full solution is presented in the collapsed code chunk below.

```{r, eval=FALSE}
  observe({
    coords <- input$map_shape_click
    leafletProxy("map") %>%
      addCircleMarkers(
        lng = coords$lng,
        lat = coords$lat,
        radius = 1,
        color = "blue",
        fillColor = "blue",
        opacity = 1,
        fillOpacity = 1
      )
  }) %>%
    bindEvent(input$map_shape_click)
```

```{r, eval=FALSE, file="shinyapps/example/06-exercise3_3_solution.R"}
#| code-fold: true
#| code-summary: "Solution for exercise 3.3 (important line are highlighted)"
#| source-line-numbers: "114-127"

```
:::

::: callout-note
#### Exercise 3.4

So far, we have only talked about plot events in Leaflet. Taking the code below, implement an observer that prints the current plot coordinates every time a user hovers over the plot elements. Use plotly's [`event_data()`](https://rdrr.io/cran/plotly/man/event_data.html) function. What kinds of information are displayed?

```{r, eval=FALSE, file="shinyapps/example/06-exercise3_4.R"}
#| code-fold: true
#| code-summary: "Code for exercise 3.4"
```
:::

::: {.callout-tip collapse="true"}
To easily print arbitrary R output to a Shiny app, you can use `verbatimTextOutput()` in the UI and `renderPrint()` in the server function.

Or you can just print to the console using `print()`.
:::

::: {.callout-warning collapse="true"}
#### Solution 3.4

A solution for exercise 3.4 is presented in the collapsed code chunk below. The event contains information on something called "curve number", point number, and x-y coordinates inside the plot.

```{r, eval=FALSE}
output$text <- renderPrint({
  event_data("plotly_hover")
}) %>%
  bindEvent(event_data("plotly_hover"))
```

```{r, eval=FALSE, file="shinyapps/example/06-exercise3_4_solution.R"}
#| code-fold: true
#| code-summary: "Solution for exercise 3.4 (important line are highlighted)"
#| source-line-numbers: "34-37"

```
:::

### Beyond plotly and leaflet

::: callout-note
#### Exercise 4.1

Thinking back to the list of Javascript libraries for interactive plotting in section 2.1, pick one R interface that appeals to you the most. Study its documentation and vignettes to get a basic understanding of the interface.
:::

::: callout-note
#### Exercise 4.2

Add a new tab to the app. Replicate the violin plots from section 3 as boxplots using an R interface of your choice.

Note that not all plotting libraries support violin and boxplots to the same degree.
:::

::: {.callout-warning collapse="true"}
#### Example solution 4.2

An example solution with the `highcharter` package:

```{r, eval=FALSE, file="shinyapps/example/06-exercise4_highcharts.R"}
#| code-fold: true
#| code-summary: "Complete code (important lines are highlighted)"
#| source-line-numbers: "92-96,209-236"
```

An example solution with the `apexcharter` package:

```{r, eval=FALSE, file="shinyapps/example/06-exercise4_apexcharts.R"}
#| code-fold: true
#| code-summary: "Complete code (important lines are highlighted)"
#| source-line-numbers: "92-96,209-218"
```
:::