Presentation and Interactivity

Ottavia M. Epifania, Ph.D.
ottavia.epifania@unitn.it

YAML

The format must be changed in revealjs

title: "Presentation and Interactivity"
author:
  name: "Ottavia M. Epifania, Ph.D."
  email: ottavia.epifania@unitn.it
affiliation: "ARCA summer school"
format: 
  revealjs: 
    self-contained: true
    theme: [simple, custom.scss]
    logo: "img/peacock.png"
    footer: "Presentation"
    scrollable: true
    transition: none
    transition-speed: slow
    background-transition: fade
    slide-number:  c/t
    show-slide-number: all
[...]
Option Value Description
self-contained true Embeds all dependencies (CSS, JS, images) into a single HTML file
theme [simple, custom.scss] Base theme plus custom SCSS styling
logo img/peacock.png Logo displayed in the presentation header/interface
footer "Presentation" Footer text shown on each slide
scrollable true Allows scrolling inside slides when content overflows
transition none Disables slide transition animations
transition-speed slow Controls transition speed (default, fast, slow)
background-transition fade Controls background transition effect between slides
slide-number c/t, c, true, false, h/v Controls slide numbering format: current/total (c/t), current only (c), hierarchical (h/v), enabled (true), or disabled (false)
show-slide-number all, speaker, print, false Controls where slide numbers appear: all slides, speaker view only, print/PDF only, or disabled

Sections and slides

Create a Section (Header 1 #):

# Introduction

Create a Slide (Header 2 ##):

## This is a slide 

Here I write something concerning my topic

  • What does incremental means?

  • It means each element of a list is shown incrementally instead of showing all text from the beginning

  • Here’s a new line! Shown incrementally

YAML:

title: "03-Presentations"
author: "Ottavia M. Epifania"
format:
  revealjs:
    incremental: true

Warning

All contents in all slides are displayed incrementally!

Control incremental contents

When:

format:
  revealjs:
    incremental: true

This prevents incremental lists:

::: {.nonincremental}

- I'm a list

- But I'm not incremental 

- Even though I'm supposed to be 

:::

When (default):

format:
  revealjs:
    incremental: false

This allows for incremental lists:

::: {.incremental}

- I'm a list

- and I'm incremental! 

- Even though I ain't supposed to be 

:::

Simple pause

You can force incremental contents

By pausing the contents

This is how you do it:

You can force incremental contents 

. . . 

By pausing the contents

. . . 

This is how you do it:

Define slide-specific behavior

To delete the footer

## My slide with no footer {footer="false"}

To make the content scrollable

## My specific scrollable slide {.scrollable}

To make the content smaller

## The text in this slide is smaller {.smaller}

To combine them together

## Together {.smaller footer="false"}

Themes

Available themes

A lot of predefined themes!

---
title: "My presentation"
author: "Ted Bundy"
format:
  revealjs: 
    theme: dark
---

beige

blood

dark

default

dracula

league

moon

beige

blood

dark

default

dracula

league

moon

night

serif

simple

sky

solarized

Figures

Absolute positions

![](img/punkreas.jpg){.absolute top=200 left=0 width="350" height="300"}

![](img/persiana.jpg){.absolute top=5 right=25 width="450" height="250"}

![](img/posse.jpg){.absolute bottom=0 right=100 width="500" height="400"}

Stack content

Stack content: Code

:::{.r-stack}
![](img/punkreas.jpg){.fragment width="350" height="300"}

![](img/persiana.jpg){.fragment width="450" height="250"}

![](img/posse.jpg){.fragment width="500" height="400"}

:::

Pro Stacking

Code

:::{.r-stack}
::: {.fragment}
![](img/punkreas.jpg){width="350" height="300"}
:::

::: {.fragment .fade-in-then-out}
![](img/persiana.jpg){width="450" height="250"}
:::


::: {.fragment .fade-out}
![](img/peacock.png){width="350" height="300"}
:::
:::

:::

Other options

This text will turn red

Pro stacking: Code II

::: {.fragment .highlight-red}
This text will turn red
:::


::: {.fragment .fade-up}
![](img/posse.jpg){width="500" height="400"}
:::

Notes

Speaker notes

Let’s say you are presenting something that is really complicated and you need some boost of confidence

View the speaker notes

When you are in presentation mode, just press S:

Let's say you are presenting something that is really complicated and you need some boost of confidence

::: {.notes}
You can use the speaker notes to help you "survive" the presentation!
:::

Code

Code highlight

```{r}
#| fig-align: center
#| code-line-numbers: "|3|6-8|6,7|"

mtcars %>%                               
  ggplot( aes(mpg, hp, size = gear)) +   
  geom_point() +                             
  geom_smooth(method = "lm")             
```

# Create a scatterplot with a smoothing function
ggplot(mtcars,
       aes(mpg, hp, size = gear)) +
  geom_point() 

# Create a scatterplot with a smoothing function
ggplot(mtcars,
       aes(mpg, hp, size = gear)) +
  geom_point() + 
  geom_smooth()

Code animation

## {auto-animate="true"}

```{r}
#| echo: true
# Create a scatterplot with a smoothing function
ggplot(mtcars,
       aes(mpg, hp, size = gear)) +
  geom_point() 
```

## {auto-animate="true"}

```{r}
#| echo: true
# Create a scatterplot with a smoothing function
ggplot(mtcars,
       aes(mpg, hp, size = gear)) +
  geom_point() + 
  geom_smooth()
```

Output location: Delayed fragment

```{r}
#| fig-align: center
#| output-location: fragment
#| code-line-numbers: "|3|"

mtcars %>%                               
  ggplot( aes(mpg, hp, size = gear)) +   
  geom_point() +                             
  geom_smooth(method = "lm")        
```

Output location: Dealyed along the code column-fragment

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

mtcars %>%                               
  ggplot( aes(mpg, hp, size = gear)) +   
  geom_point() +                             
  geom_smooth(method = "lm")        
```

Output location: Next slide slide

```{r}
#| fig-align: center
#| output-location: slide
#| code-line-numbers: "|3|"

mtcars %>%                               
  ggplot( aes(mpg, hp, size = gear)) +   
  geom_point() +                             
  geom_smooth(method = "lm")        
```

Output location: Next slide slide

Output location: Along the code column

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

mtcars %>%                               
  ggplot( aes(mpg, hp, size = gear)) +   
  geom_point() +                             
  geom_smooth(method = "lm")        
```