Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Decouple code and plots (or results) in xaringan slides
---
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>
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.