Decouple code and plots (or results) in xaringan slides

xaringan-decouple-code-plot.Rmd

---
title: "Decouple Code and Output in xaringan slides"
subtitle: "Demo Slides for <a href='https://garrickadenbuie.com/blog/2018/08/14/decouple-code-and-output-in-xaringan-slides/'>Related Blog Post</a>"
author: "Garrick Aden-Buie"
date: "`r Sys.Date()`"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      ratio: 16:9
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(fig.dim=c(4.8, 4.5), fig.retina=2, out.width="100%")
knitr::opts_hooks$set(fig.callout = function(options) {
  if (options$fig.callout) {
    options$echo <- FALSE
    options$out.height <- "99%"
    options$fig.width <- 16
    options$fig.height <- 8
  }
  options
})
library(ggplot2)
```

```{css, echo=FALSE}
/* custom.css */
.left-code {
  color: #777;
  width: 38%;
  height: 92%;
  float: left;
}
.right-plot {
  width: 60%;
  float: right;
  padding-left: 1%;
}
.plot-callout {
  height: 225px;
  width: 450px;
  bottom: 5%;
  right: 5%;
  position: absolute;
  padding: 0px;
  z-index: 100;
}
.plot-callout img {
  width: 100%;
  border: 4px solid #23373B;
}
```

<!-- Works with xaringan's default CSS -->

.pull-left[
```{r plot-label1, eval=FALSE}
# code chunk here
ggplot(iris) + 
  aes(Sepal.Length, 
      Sepal.Width, 
      color = Species) + 
  geom_point()
```
]

.pull-right[
```{r plot-label1-out, ref.label="plot-label1", echo=FALSE}
```
]

---

<!-- Uses custom CSS for wider plot area -->

.left-code[
```{r plot-label, eval=FALSE}
# code chunk here
ggplot(iris) + 
  aes(Sepal.Length, 
      Sepal.Width, 
      color = Species) + 
  geom_point()
```
]

.right-plot[
```{r plot-label-out, ref.label="plot-label", echo=FALSE}
```
]

---

<!-- Plot-in-picture -->

```{r large-plot, eval=FALSE}
ggplot(iris) + 
  aes(Sepal.Length, 
      Sepal.Width, 
      color = Species) + 
  geom_point(size = 4) +
  labs(x = 'Sepal Length', 
       y = 'Sepal Width') + 
  theme_minimal() +
  theme(
    text = element_text(size = 24, family = "PT Sans")
  )
```

.plot-callout[
```{r large-plot-callout, ref.label="large-plot", fig.callout=TRUE}
```
]

---

```{r large-plot-full-output, ref.label="large-plot", fig.callout=TRUE}
```

---

<!-- Uses knitr::fig_chunk -->

.left-code[
```{r plot-label-fc, fig.show="hide"}
# code chunk here
ggplot(iris) + 
  aes(Sepal.Length, 
      Sepal.Width, 
      color = Species) + 
  geom_point()
```

From `?knitr::fig_chunk`

> You can generate plots in a code chunk but not show them inside the code chunk by using the chunk option `fig.show = 'hide'`. Then you can use this function if you want to show them elsewhere.
]

.right-plot[
![](`r knitr::fig_chunk("plot-label-fc", "png")`)
]

.footnote[
<code>
\!\[\]\(&grave;r knitr::fig_chunk("plot-label", "png")&grave;\)
</code>
]