Let’s make a presentation with Quarto

David Schoch

GESIS

2023-06-20

Quarto presentation formats

revealjs essentially the replacement for xaringan
beamer for LaTex slides
Powerpoint for when you have no choice…

What is revealjs?

reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

There is an R package for RMarkdown

install.packages("revealjs")

but it is rarely used since xaringan (based on knitr and remark.js, no Pandoc) is more popular

No need to learn new syntax

---
format: revealjs
---

## Slide 1
Add some content

## Slide 2
- and 
- maybe
- a 
- list

Render to pptx? set format: pptx
Render to beamer? set format: beamer

HTML divs and spans with Pandoc

::: {.class}
Content in a div with a class
:::

Some text with a specific [span]{.span-class}

Pandoc translates this to

<div class="class">
   Content in a div with a class
</div>
Some text with a specific <span class="span-class">span</span>

Incremental lists

:::{.incremental}
- item 1
- item 2
- item 3
:::

item 1
item 2
item 3

Incremental Slides

Use . . . syntax

This appears first 

. . .

This second

This appears first

This second

Fragments, Basics


::: {.fragment}
Fade in
:::

::: {.fragment .fade-out}
Fade out
:::

::: {.fragment .highlight-red}
Highlight red
:::

::: {.fragment .fade-in-then-out}
Fade in, then out
:::

::: {.fragment .fade-up}
Slide up while fading in
:::

Fragments, Basics

Fade in

Fade out

Highlight red

Fade in, then out

Slide up while fading in

Fragments, More

This is an important sentence!

This is an [important sentence!]{.fragment .highlight-red}

Fade in > Turn red > Semi fade out

::: {.fragment .fade-in}
::: {.fragment .highlight-red}
::: {.fragment .semi-fade-out}
Fade in > Turn red > Semi fade out
:::
:::
:::

Slide Transition

fade

Slide Transition

slide

Slide Transition

convex

Slide Transition

concave

Slide Transition

zoom

Slide Transition, global

---
title: "Presentation"
format:
  revealjs:
    transition: slide
    background-transition: fade
    transition-speed: fast
---

Column layout

:::: {.columns}

::: {.column width="40%"}
Left column
:::

::: {.column width="60%"}
Right column
:::

::::

Left column

Right column

Column layout

```{r}
#| eval: false
dplyr::glimpse(mtcars)
```

Rows: 32
Columns: 11
$ mpg  <dbl> 21.0, 21.0, 22.8, 21.4, 18.7, 18.1, 14.3, 24.4, 22.8, 19.2, 17.8,…
$ cyl  <dbl> 6, 6, 4, 6, 8, 6, 8, 4, 4, 6, 6, 8, 8, 8, 8, 8, 8, 4, 4, 4, 4, 8,…
$ disp <dbl> 160.0, 160.0, 108.0, 258.0, 360.0, 225.0, 360.0, 146.7, 140.8, 16…
$ hp   <dbl> 110, 110, 93, 110, 175, 105, 245, 62, 95, 123, 123, 180, 180, 180…
$ drat <dbl> 3.90, 3.90, 3.85, 3.08, 3.15, 2.76, 3.21, 3.69, 3.92, 3.92, 3.92,…
$ wt   <dbl> 2.620, 2.875, 2.320, 3.215, 3.440, 3.460, 3.570, 3.190, 3.150, 3.…
$ qsec <dbl> 16.46, 17.02, 18.61, 19.44, 17.02, 20.22, 15.84, 20.00, 22.90, 18…
$ vs   <dbl> 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0,…
$ am   <dbl> 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0,…
$ gear <dbl> 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3,…
$ carb <dbl> 4, 4, 1, 1, 2, 1, 4, 2, 2, 4, 4, 3, 3, 3, 4, 4, 4, 1, 2, 1, 1, 2,…

Output location, `column-fragment`

```{r}
#| output-location: column-fragment
#| code-line-numbers: "|2"

library(ggplot2)

mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Output location, `column`

```{r}
#| output-location: column
#| code-line-numbers: "|2"

library(ggplot2)

mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Output location, `fragment`

```{r}
#| output-location: fragment
#| code-line-numbers: "|2"

library(ggplot2)

mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Output location, `slide`

```{r}
#| output-location: slide
#| code-line-numbers: "|2"

library(ggplot2)

mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Output location, `slide`

Code line-highlighting

Use #| code-line-numbers: "3" syntax - will highlight line 3 and fade others

```{r}
#| output-location: column
#| code-line-numbers: "3"

library(ggplot2)

mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Code line-highlighting

with a “fragment style”

```{r}
#| output-location: column
#| code-line-numbers: "|3"

library(ggplot2)

mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Code line-highlighting

highlight different line ranges progressively

```{r}
#| output-location: column
#| code-line-numbers: "|3|5|8|10"

library(ggplot2)

mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Stack images

::: {.r-stack}
![](../img/kitten1.jpeg){.fragment width="450"}

![](../img/kitten2.jpeg){.fragment width="400"}

![](../img/kitten3.jpeg){.fragment width="300"}
:::

Themes, Colors and other bling

Background color and image

Background color:

## Background color and image  {background-color="red"}

Background image:

## Background color and image  {background-image="<link-to-image>"}

Themes

see https://quarto.org/docs/presentations/revealjs/themes.html

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---

---
title: "Presentation"
format:
  revealjs: 
    theme: beige
---

---
title: "Presentation"
format:
  revealjs: 
    theme: simple
---

Themes via custom SASS

---
title: "Presentation"
format:
  revealjs: 
    theme: [default,custom.scss]
---

custom.scss:

/*-- scss:defaults --*/

$body-bg: #191919;
$body-color: #fff;
$link-color: #42affa;

/*-- scss:rules --*/

.reveal .slide blockquote {
  border-left: 3px solid $text-muted;
  padding-left: 0.5em;
}

Themes via Extensions

Install Extension (in the folder of your presentation):

quarto use template gesiscss/quarto-revealjs-fakegesis

use in yaml header:

---
title: "Let's make a presentation with Quarto"
author: "David Schoch"
lesson: 5
institute: GESIS
date: "2023-06-20"
date-format: "YYYY-MM-DD"
footer: "[Automated Reports & Co with Quarto and Markdown](https://gesiscss.github.io/quarto-workshop/)"
format: fakegesis-revealjs
---

Very creative themes can be found here

Examples

Give me more

Let’s make a presentation with Quarto

Quarto presentation formats

What is revealjs?

No need to learn new syntax

HTML divs and spans with Pandoc

Incremental lists

Incremental Slides

Fragments, Basics

Fragments, Basics

Fragments, More

Slide Transition

Slide Transition

Slide Transition

Slide Transition

Slide Transition

Slide Transition, global

Column layout

Column layout

Output location, column-fragment

Output location, column

Output location, fragment

Output location, slide

Output location, slide

Code line-highlighting

Code line-highlighting

Code line-highlighting

Stack images

Stack images

Themes, Colors and other bling

Background color and image

Themes

Themes via custom SASS

Themes via Extensions

Examples

Output location, `column-fragment`

Output location, `column`

Output location, `fragment`

Output location, `slide`

Output location, `slide`