Interactive elements in HTML documents

# Interactive elements in HTML documents
## <span><i class="fas  fa-rocket fa-lg faa-spin animated-hover " data-fa-transform="grow-15 " style=" color:#F4790B;"></i></span>
### <br/><br/><br/>Ariel Muldoon
### May 18, 2021

---

## Today's Goal

**Practice adding interactive elements to HTML output documents**

We will briefly explore

- **plotly** to add interactivity to plots made with **ggplot2**  
- **DT** for interactive data objects    
- **leaflet** for interactive maps  
- **dygraphs** to make interactive plots of time series data  
- Adding interactive elements from packages above to a dashboard made with **flexdashboard**

Adding interactive elements to HTML output documents allows for *pre-computed* interactive elements without needing a server. For more complex interactivity see package **shiny**.

???

Students won't necessarily know what it means to need a server, but the crux here is that adding basic interactivity to HTML is simpler. For complex interactivity, giving the user more control over the plot/table output, you'll need a different tool

**htmlwidgets** must pre-compute everything that is included in the interactive element. With **shiny** we can allow users to choose different computations but also would need to have a server to host the resulting app

*Before we begin:*

Make sure you saved [`week08_interaction.Rmd`](files/week08_interaction.Rmd) from the class website onto your computer. You will knit this file so you can explore the interactive output.

???

There is so much more you can do with each of these tools that this session will barely scratch the surface

The goal of knitting rather than providing the document is so students can "see" that we insert these into HTML documents through R code in the Rmd

---

## Resources

- [Intro to **htmlwidgets**](https://www.htmlwidgets.org/)   
- [Using **plotly** for interactive plots](https://plotly.com/r/)  
- [Interactive R data objects with **DT**](https://rstudio.github.io/DT/)    
- [Interactive maps with **leaflet**](https://rstudio.github.io/leaflet/)    
- [Charting time series data in R with **dygraphs**](https://rstudio.github.io/dygraphs/)  
- [Interactive dashboards in R with **flexdashboard**](https://rmarkdown.rstudio.com/flexdashboard/)

.center[
<img src="figs/week08_files/flexdashboard.png" title="flexdashboard hex logo" alt="flexdashboard hex logo" width="25%" />
]

---

# <font style="font-family: cursive; font-style:italic">Let's get started!</font>

---

## Today's code

- This week's session is in a tasting menu style, going over examples of interactive plots and data without a lot of detail. The idea is for you to get a *taste* of a variety of packages. 😋

- We'll be looking at the code and output from several **htmlwidgets**-packages that can be used to add interactive elements to HTML output documents.

- Since we're just getting quick tastes of these packages you won't practice writing your own code but will see code I have written.

- Open your copy of [`week08_interaction.Rmd`](files/week08_interaction.Rmd) in a clean R session. Knit it now. We will go through the output document, looking at code and interactive output elements together.

???

I originally was going to have students had the interactivity code and knit each time to make it a more active class but ultimately that would be fairly time-consuming so I included all the code in the Rmd file and students knit once.

---

## R packages

We'll load **palmerpenguins 0.1.0** and **ggplot2 3.3.3** now.

You'll see additional packages loaded as we go through the slides/HTML output document. This is to help clarify which package we are using in each section.

```r
library(palmerpenguins) # v. 0.1.0
library(ggplot2) # v. 3.3.3
```

---

## Penguin dataset

We will work with the Palmer penguin data while exploring packages **plotly** and **DT**.

This dataset includes various size measurements for three penguin species on the Palmer Archipelago, as well as `sex` and measurement `year`. See `?penguins` for more information.

Here are the first 5 lines.

```r
head(penguins, n = 5)
```

|species |island    | bill_length_mm| bill_depth_mm| flipper_length_mm| body_mass_g|sex    | year|
|:-------|:---------|--------------:|-------------:|-----------------:|-----------:|:------|----:|
|Adelie  |Torgersen |           39.1|          18.7|               181|        3750|male   | 2007|
|Adelie  |Torgersen |           39.5|          17.4|               186|        3800|female | 2007|
|Adelie  |Torgersen |           40.3|          18.0|               195|        3250|female | 2007|
|Adelie  |Torgersen |             NA|            NA|                NA|          NA|NA     | 2007|
|Adelie  |Torgersen |           36.7|          19.3|               193|        3450|female | 2007|

---

## plotly for interactive ggplot2

[Plotly](https://plotly.com/graphing-libraries/) can be used to make a wide variety of interactive charts and maps in Python, R, and JavaScript.

In R, the **plotly** package can be used to build stand-alone interactive graphics or to make static plots interactive. 😲

<br/>
We will use `ggplotly()` to add interactive elements to static plots made with **ggplot2**.

Start by loading the **plotly** package.

```r
library(plotly) # v. 4.9.3
```

<br/>
**Of interest:** Another option for adding interactivity to **ggplot2** plots is package **ggiraph**. This package adds interactive layers within **ggplot2**.

---

## plotly for interactive ggplot2

The first step is to make a standard **ggplot2** plot. Here is a scatterplot of `bill_length_mm` vs `bill_depth_mm` for each `species` of penguin. The plot is named `g1`.

```r
g1 = ggplot(data = penguins, 
            aes(x = bill_depth_mm, 
                y = bill_length_mm,
                color = species)) +
  geom_point()
```

<br/><br/>
You are welcome to add code to the RMD file to print this plot if you'd like but we won't do it here. Instead let's jump to adding interactivity with `ggplotly()`.

---

## plotly for interactive ggplot2

.pull-left[
We can use `ggplotly()` to convert a plot made with **ggplot2** into an interactive **plotly** object.

```r
ggplotly(g1)
```
]

.pull-right[
Go to the rendered HTML document based on `week08_interaction.Rmd` to explore the interactive output plot.

There is a table of contents at the top of the HTML document to help you navigate, if needed.
]

---

## plotly for interactive ggplot2

.pull-left[
Take a few minutes to explore the interactive features, such as zooming, panning, and hovering.

<br/>
Click on legend items to focus on one group.

<br/>
Double click the plot or click on the "Reset axes" button to reset.
]

.pull-right[
<div id="htmlwidget-9df844fb6d1b5a15f0b9" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-9df844fb6d1b5a15f0b9">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-5.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

???

The selection tool seems to be most useful when you want to make interactive output (like in a shiny app) but you can link two plots together using `highlight_key()`.

---

### Changing the hover text

A **tooltip** is generic term for the text that pops up when hovering over an interactive element. By default, `ggplotly()` includes all plotted data in the tooltip.

<br/>
Let's put just the `x` and `y` values in the tooltip, leaving out the `colour` values.
]

```r
ggplotly(g1, 
         tooltip = c("x", "y"))
```
]

???

The order is supposed to be set in `tooltip` but this appears not to work (open issue [here](https://github.com/ropensci/plotly/issues/849))

---

### Changing the hover text

.pull-right[
<div id="htmlwidget-392dd8e0e573ad7ca205" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-392dd8e0e573ad7ca205">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-7.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

### Linking two plots

You may have noticed that you could select or *highlight* points in the interactive scatterplots but then couldn't do much with them.

The select tool becomes most useful if including the plot in, e.g., a **shiny** app, but there are also some built-in tools in **plotly** where selection is useful. This makes use of package **crosstalk** under the hood.

<br/><br/>
We start by using `highlight_key()` on the dataset we are plotting.

```r
peng2 = highlight_key(penguins)
```

???

Since we are doing a "tasting menu" of packages today I am not getting into detail with this function and how it links across the dataset.

---

### Linking two plots

<br/>
The first is the same scatterplot we used before without the species info and the second is `flipper_length_mm` vs `body_mass_g`.
]

```r
g2 = ggplot(data = peng2, 
            aes(x = bill_depth_mm, 
                y = bill_length_mm)) +
  geom_point()
```

```r
g3 = ggplot(data = peng2,
            aes(x = body_mass_g, 
                y = flipper_length_mm)) +
  geom_point()
```
]

---

### Linking two plots

.pull-left[
Now we link the plots together using the `subplot()` function.  The `highlight()` function allows selection across the two now-linked plots. 
]

```r
g2 %>%
  subplot(g3) %>%
  highlight(on = "plotly_selected",
            off = "plotly_deselect")
```
]

---

### Linking two plots

.pull-left[
Now when we select points in one plot points from the same rows are selected in the second. This allows the user to explore more variables at one time.

<br/>
I found this approach was a little awkward for plots with legends. It helped a bit if the legend is removed from one of the plots using `plotly::style()`.
]

.pull-right[
<div id="htmlwidget-cc933f836972876311bb" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-cc933f836972876311bb">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-12.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

???

I really didn't want to get bogged down into any details, which is why I didn't talk more about more options (such as `plotly:;style()`)

---

## DT for interactive data

The [**DT** package](https://rstudio.github.io/DT/) allows us to display R data objects such as data.frames as interactive tables of data.

For example, it provides the user the ability to filter and sort the data in the output table.

<br/>
Start by loading package **DT**.

```r
library(DT) # v. 0.18
```

---

## DT for interactive data

<br/>
Using `datatable()` directly like this may be sufficient for the interactivity we want much of the time.
]

.pull-right[
The simple code below is a good start for exploring the default output from `datatable()`.

```r
datatable(penguins)
```
]

---

## DT for interactive data

<br/>
The results are *paginated*, defaulting to showing 10 rows per page. Click on a page number below the table to move through more rows. Change the number of rows showing with the top drop-down menu.

<br/>
You can sort by individual columns and filter to values using the overall search box at the top.
]

.pull-right[
<br/>
<div id="htmlwidget-e927028816dcef19fe09" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-e927028816dcef19fe09">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-15.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

???

The search box searches the whole table for values, so isn't very precise

---

### Change table options

There are so many options you can change via the `options` argument that they have their own [article on the **DT** website](https://rstudio.github.io/DT/options.html).

.pull-left[
<br/>
Here we change the default page length to 5 and the numbers in the drop down menu of page lengths to 5, 7, or 10.
]

```r
datatable(penguins,
*         options = list(pageLength = 5,
*                        lengthMenu = c(5, 7, 10)))
```
]
]

---

### Change table options

<br/>
We also now have only the three options we defined for how many rows to show on each page under `Show`.
]

.pull-right[
<div id="htmlwidget-9ac5793b499c9c33c5ef" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-9ac5793b499c9c33c5ef">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-17.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

### Add column filters

In addition to the overall `Search`, we can generate filters for each column  by adding the `filter` argument. We'll place the filters at the `top` of the table.

```r
datatable(penguins,
*         filter = "top",
          options = list(autoWidth = TRUE,
                         scrollX = TRUE,
                         columnDefs = list(list(width = '80px', targets = "_all"))))
```

<br/>
In some cases columns are too narrow for the categorical variable filter boxes. Here I widen them in `options` following [this Stack Overflow post](https://stackoverflow.com/a/31814197/2461552) and this [GitHub issue](https://github.com/rstudio/DT/issues/29).

???

Other options for `filter` are none (default) and bottom

The column widths only work with scrollX = TRUE per the GitHub issue, which can be unfortunate

---

### Add column filters

<br/>
Numeric columns get range sliders and character columns get select drop-down menus.
]

.pull-right[
<div id="htmlwidget-a91f2186458b45be20f9" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-a91f2186458b45be20f9">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-19.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

## leaflet for interactive maps

The [**leaflet** package](https://rstudio.github.io/leaflet/) is popular for making interactive maps.

The package can render spatial objects created from **sf** or **sp**, works with data.frames that contain latitude/longitude columns, or can center maps on defined latitude/longitude values.

<br/>
Start by loading package **leaflet**.

```r
library(leaflet) # v. 2.0.4.1
```

---

### Center map with `setView()`

We'll start with a map centered on Corvallis, OR, USA.  Note the pipes in the code; this is the common coding style for **leaflet**.

.pull-left[
We center the output  map by providing a latitude and longitude, setting the amount of space around the map center with the `zoom` argument in `setView()`.

<br/>
The `addTiles()` layer is key here. This function is how we add the base map. By default `OpenStreetMap` tiles are used but others can be used via `addProviderTiles()`.

]

```r
leaflet() %>% 
*   setView(lng = -123.2620,
*           lat = 44.5646,
*           zoom = 12) %>%
*   addTiles()
```
]

---

### Center map with `setView()`

<br/>
You can pan around as well as zoom the resulting map.
]

.pull-right[
<br/>
<div id="htmlwidget-d6c27415074c4ea91882" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-d6c27415074c4ea91882">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-22.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

### Add a single marker

**Markers** are added to maps to note places of interest. In interactive maps these markers are often associated with hover or click tooltip information.

<br/>
Here we use `addAwesomeMarkers()` to add an icon as the marker. We must provide the latitude/longitude for marker placement.

<br/>
The `popup` argument allows information that will pop up when the marker is clicked on; in this case identifying what is at that location.
]

```r
leaflet() %>% 
    setView(lng = -123.2620, 
            lat = 44.5646, 
            zoom = 12) %>%
    addTiles() %>%
*   addAwesomeMarkers(lng = -123.2794, lat = 44.5638,
*                     icon = awesomeIcons(),
*                     popup = "Oregon State University")
```
]
]

---

### Add a single marker

Click on the icon to see the pop up information.
]

.pull-right[
<div id="htmlwidget-70ba32b14f426a10cb89" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-70ba32b14f426a10cb89">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-24.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

### Mapping spatial data

Now let's switch to plotting some spatial data from a data.frame.

We'll work with annual temperature and precipitation data from climate stations throughout the state of Oregon, USA taken from the [UO GEOG 4/595 website](https://pjbartlein.github.io/GeogDataAnalysis/datasets.html).

Note the `lat` and `lon` columns in the dataset, which are key for mapping from data.frames with **leaflet**.

```r
orstationc = read.csv("https://pjbartlein.github.io/GeogDataAnalysis/data/csv/orstationc.csv")
head(orstationc)
```
]

|station |    lat|      lon| elev| tjan| tjul| tann| pjan| pjul| pann|  idnum|Name                            |
|:-------|------:|--------:|----:|----:|----:|----:|----:|----:|----:|------:|:-------------------------------|
|ANT     | 44.917| -120.717|  846|  0.0| 20.2|  9.6|   41|    9|  322| 350197|ANTELOPE 1 N USA-OR             |
|ARL     | 45.717| -120.200|   96|  0.9| 24.6| 12.5|   40|    6|  228| 350265|ARLINGTON USA-OR                |
|ASH     | 42.217| -122.717|  543|  3.1| 20.8| 11.1|   70|    7|  480| 350304|ASHLAND 1 N USA-OR              |
|AST     | 46.150| -123.883|    2|  5.1| 15.6| 10.3|  287|   26| 1768| 350328|ASTORIA WSO           //R USA-O |
|BKA     | 44.833| -117.817| 1027| -3.8| 19.2|  7.6|   26|   12|  270| 350412|BAKER FAA AIRPORT USA-OR        |
|BKK     | 44.783| -117.833| 1050| -2.8| 20.2|  8.4|   30|   17|  302| 350417|BAKER KBKR USA-OR               |
]

???

Have jan and july temps and precip. We'll look at july temperature.

---

### Mapping spatial data

.pull-left[
We now use the `data` argument in `leaflet()`. **leaflet** automatically finds lat/long columns if named something recognizable (e.g., `lng`, `long`, `lat`, `latitude`) and reports what it used.

<br/>
Although we `addTiles()` first, the map extent is not set until we add the markers, based on the range within the lat/long columns in the dataset.

<br/>
We add the climate station locations as circles with `addCircleMarkers()`. The `label` argument adds tooltip info from variables in the dataset; here, average July temperature.
]

```r
*leaflet(data = orstationc) %>%
    addTiles() %>%
*   addCircleMarkers(label = ~tjul)
```

<br/>
**Note:** There are `lng` and `lat` arguments in `addCircleMarkers()`. You will need to define the lat/long variables manually if the column names of the lat/long columns in the dataset aren't recognized by `leaflet()`.
]

???

Not showing writing out lat and lng arguments because it seems fairly standard to leave them out and let leaflet guess when lat/long named appropriately (which is likely usual for spatial data). They'll see the message where leaflet reports which columns were used in the HTML document

---

### Mapping spatial data

<br/>
The map extent is based on the climate station locations, shown as circles.

<br/>
The average July temperature of each station pops up when you hover over each marker.
]

.pull-right[
<br/>
<div id="htmlwidget-81afe0557980563e7394" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-81afe0557980563e7394">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-28.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

### Adding color scale to markers

We can color markers based on the dataset as long as we define a palette.

.pull-left[
We'll color the markers based on the average July temperature. We use the Yellow-Orange-Red `RColorBrewer` palette in `colorQuantile()`.

<br/>
The `color` argument in `addCircleMarkers()` is mapped to `tjul`, wrapped in the `pal()` we made.

<br/>
We add a second tooltip to show the name of the climate station when a marker is clicked using `popup` in addition to `label`.
]

```r
*pal = colorQuantile(palette = "YlOrRd",
*                   domain = NULL,
*                   n = 8)
```

<br/>

```r
leaflet(data = orstationc) %>% 
    addTiles() %>%
*   addCircleMarkers(color = ~pal(tjul),
                     label = ~tjul,
*                    popup = ~Name)
```
]

???

I'm not getting into the colorQuantile() code here, but it is from **leaflet** and is for mapping data to colors. This is a quick demonstration with no real details

---

### Adding color scale to markers

<br/>
Now the circles are colored based on the average July temperature.

<br/>
You can hover to get to see the temperature or click to see the climate station name.
]

.pull-right[
<br/>
<div id="htmlwidget-1a684ceefd74dfcdf6f9" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-1a684ceefd74dfcdf6f9">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-31.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

## dygraphs for interactive time series

The [**dygraphs** package](https://rstudio.github.io/dygraphs/index.html) is for plotting interactive time series data.

It is specifically for **xts** time series objects or any object that can be converted to an **xts** object.

<br/>
Start by loading package **dygraphs**.

```r
library(dygraphs) # v. 1.1.1.6
```

---

### Basic time series

We'll use time series datasets that come with **dygraphs** to look at a few plots.

<br/>
First up is a plot of New Haven temperatures through time, using `nhtemp`. Add a title with `main`.
]

```r
dygraph(data = nhtemp, 
         main = "Temperatures New Haven")
```
]

---

### Basic time series

<br/>
Hovering over the plot shows the time as well as the data in the line.

<br/>
You can zoom into part of the time series by selecting a plot area.

<br/>
Double-click the plot to zoom back out.
]

.pull-right[
<div id="htmlwidget-b5884c1044e6357d00f5" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-b5884c1044e6357d00f5">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-34.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

### Add range selector

.pull-left[
Add a range selector to the bottom of the plot for panning and zooming via `dyRangeSelector()`.

<br/>
Note the use of the pipe in the code.
]

```r
dygraph(data = nhtemp, 
        main = "Temperatures New Haven") %>%
    dyRangeSelector()
```

<br/>
While we won't explore it here, you can change, e.g., the size, color, and date window within `dyRangeSelector()`.
]
]

---
### Add range selector

.pull-right[
<div id="htmlwidget-5ecb71f5b5549df7b27a" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-5ecb71f5b5549df7b27a">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-36.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

### Multiple time series

You can plot multiple time series in a single plot if you have multiple columns of time series data in a single time series object.

.pull-left[
We'll look at male and female deaths from lung disease in the UK from 1974-1979 for this example.

<br/>
The first step is to bind the two separate time series together into one with `cbind()`.

<br/>
Then the two time series can be plot together with `dygraphs()`.  Change the names and colors of the series using `dySeries()`.
]

```r
lungDeaths = cbind(mdeaths, fdeaths)
```

```r
dygraph(data = lungDeaths) %>%
    dySeries(name = "mdeaths", 
             label = "Male",
             color = "purple") %>%
    dySeries(name = "fdeaths", 
             label = "Female",
             color = "orange")
```

**Note:** Colors can also be changed to an overall color palette by adding a `dyOptions()` layer (*not shown*)
]

---

### Multiple time series

<br/>
Notice the labels we created in `dySeries()` are shown in the tooltip.
]

<div id="htmlwidget-29218eff0c5141dd50c4" style="width:100%;height:252px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-29218eff0c5141dd50c4">{"x":{"url":"week08_interactive_elements_files/figure-html//widgets/widget_unnamed-chunk-39.html","options":{"xdomain":"*","allowfullscreen":false,"lazyload":false}},"evals":[],"jsHooks":[]}</script>
]

---

## Build an interactive dashboard

We'll end the day by making a dashboard with interactive elements using [package **flexdashboard**](https://rmarkdown.rstudio.com/flexdashboard/).

A **flexdashboard** is a specialized R Markdown template that allows for basic dashboard layouts. The output is an HTML document.

Create a new **flexdashboard** document.

Go to `File > New File > R Markdown...`

Click `From Template` and then choose `Flex Dashboard`. Click `OK` to create.

.center[
<img src="figs/week08_files/new_dashboard.png" title="Image that shows choosing the flex dashboard from the template windown when making a new R Markdown document" alt="Image that shows choosing the flex dashboard from the template windown when making a new R Markdown document" width="65%" />
]

???

HTML output is the key here

---

## Build an interactive dashboard

Give your dashboard a title in the YAML header. I called mine `My Dashboard`. Then save the file as a `.Rmd` document somewhere on your computer.

```r
---
title: "My Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---
```

???

flexdashboard starts out with some default info filled in, like many Rmd docs

<br/>
**flexdashboard** has a variety of dashboard layouts available. See [here](https://rstudio.github.io/flexdashboard/articles/layouts.html) for some examples.

The default layout is a `fill` layout with `columns` orientation, which we will proceed with today. Column widths are set within the document; e.g., `Column {data-width=650}`.

???

They'll see an example of the layout on the next slide (after knitting)

I'm not going to talk any more about setting column widths and such, but the provided link should be useful

---

## Build an interactive dashboard

Knit the dashboard to see the basic default layout, before adding any content.

.pull-left[
You can see the overall title in a blue header from the [default theme](https://rstudio.github.io/flexdashboard/articles/using.html#appearance-1).

<br/>
The layout we used has three charts, with one chart in the wider left column and two charts in the narrower right column.

<br/>
You can see that each chart window has been given a name (e.g., `Chart A`).
]

.pull-right[
<img src="figs/week08_files/first_dashboard.png" title="Image of the initial dashboard with a blue color scheme and 3 chart windows after naming it 'My Dashboard' but before adding any content" alt="Image of the initial dashboard with a blue color scheme and 3 chart windows after naming it 'My Dashboard' but before adding any content" width="100%" />
]

???

There are other built-in themes available or you can refer to a CSS file

---

## Build an interactive dashboard

Add the packages you are using in the document into the *setup* chunk at the very top of the file. It is named `setup`.

You can see it already loads package **flexdashboard** by default.  Add **ggplot2**, **palmerpenguins**, **plotly**, **DT**, and **leaflet**.

This is what your setup chunk will look like after adding these.

```{r setup, include=FALSE}
    library(flexdashboard)
    library(ggplot2)
    library(palmerpenguins)
    library(plotly)
    library(DT)
    library(leaflet)
    ```

---

## Build an interactive dashboard

Then create a `datatable()` of the penguins dataset in the code chunk in the first section. That code chunk will then look like:

```{r}
    datatable(penguins)
    ```

Knit to see the dashboard. Note all code is suppressed in the dashboard by default.
]

???

I wrote out whole code chunk here to try to be clear, but will only show code in later slides.

.pull-right[
<img src="figs/week08_files/first_chart.png" title="Image of the dashboard with interactive data in the first window" alt="Image of the dashboard with interactive data in the first window" width="100%" />
]

---

## Build an interactive dashboard

Add the following **ggplot2** and **plotly** code to the code chunk, which we used earlier today.

```r
g1 = ggplot(data = penguins, 
            aes(x = bill_depth_mm, 
                y = bill_length_mm,
                color = species)) +
  geom_point()
ggplotly(g1)
```

Knit to see the changes in the dashboard.
]

.pull-right[
<img src="figs/week08_files/second_chart.png" title="Image of the dashboard with interactive plot in the second window" alt="Image of the dashboard with interactive plot in the second window" width="100%" />
]

???

You may need to maximize the dashboard to see the plot well.

---

## Build an interactive dashboard

Then add the following **leaflet** code to the code chunk, which we also used earlier today.

```r
orstationc = read.csv("https://pjbartlein.github.io/GeogDataAnalysis/data/csv/orstationc.csv")
leaflet(data = orstationc) %>% 
    addTiles() %>%
    addCircleMarkers(label = ~tjul)
```

Knit to see the changes to the dashboard.
]

.pull-right[
<img src="figs/week08_files/third_chart.png" title="Image of the dashboard with interactive plot in the third window" alt="Image of the dashboard with interactive plot in the third window" width="100%" />
]

---

## Sharing your dashboard

.pull-left[
Since the dashboard is a simple HTML document, anyone will be able to view it and interact with the plots/objects in a browser.

<br/>
While you can send it out to people individually via email, you could also host it as a page on your website.

<br/>
Alternatively you can send people to a version on GitHub after making a small change to the default link to get a rendered document. Instructions for this shown in the tweet on the right.
]

.pull-right[
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Host HTML on GitHub</p>&mdash; Grant McDermott (@grant_mcdermott) <a href="https://twitter.com/grant_mcdermott/status/1366597702339891202">Tweet March 01, 2021</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
]

---

## Next week

- We will discuss steps to create reproducible examples of R code  
- We will then use package **reprex** to create pasteable code and output  
- Make sure you have a current version of **reprex** and **datapasta** installed

.center[
<img src="figs/reprex.png" title="Logo for package reprex" alt="Logo for package reprex" width="15%" />
]

.footnote[
[Code for slides](https://github.com/aosmith16/spring-r-topics/tree/main/docs/slides)  
Slides created via the R packages:  
[**xaringan**](https://github.com/yihui/xaringan), 
[gadenbuie/xaringanthemer](https://github.com/gadenbuie/xaringanthemer), 
[gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra) 
.center[*This work is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/4.0/.*]
]