Engaging Reproducible Presentations

Presentations with Quarto

With Quarto, you are not limited to just reports, you can make presentations (and websites too!)

As of now Quarto supports making presentations in the following formats,

1. Powerpoint presentations
2. Beamer presentations
3. RevealJS presentations

We are going to focus primarily on RevealJS presentations

Your first Quarto presentation

basic.qmd

---     
title: "My first presentation"
format: revealjs
---

# My first title slide

## My first heading

Here's some **"text"** that I _want_ to talk with everyone. 

There are three things that

1. Rainbows
2. Sunsets
3. Backstreet's back

The basic markdown tips you learned previously can be used.

Tip

Try changing the value for format to pptx or beamer and see how the value changes.

Images, Code and Positioning

Adding images

images.qmd

--- 
title: "" 
format: revealjs
--- 

## Showing images is the same as reports

![Eevee](../img/eevee.jpg){.r-stretch width=64px fig-alt="The pokemon Eevee, a cat like animal with long pointy ears, wearing a flower"}

## Absolute positioning images 

![](../img/eevee-small.png){.absolute top=200 left=0 width="350" height="300"}

![](../img/eevee-small.png){.absolute top=50 right=50 width="450" height="250"}

![](../img/eevee-small.png){.absolute bottom=0 right=50 width="300" height="300"}

## Zoom in to images 

![](../img/eevee.jpg){fig-alt="The pokemon Eevee, a cat like animal with long pointy ears, wearing a flower"}

Use the `Alt` key to zoom in to images or areas of the presentation

Code and code output

code-output.qmd

---
title: "Code output"
format: revealjs
---

## Code output {auto-animate="true"}

::: {.cell}

```{.r .cell-code}
library(tidyverse)

ggplot(diamonds, aes(x = carat, y = price)) +
  geom_point()
```

::: {.cell-output-display}
![](index_files/figure-revealjs/unnamed-chunk-1-1.png){width=960}
:::
:::

## Code animated {auto-animate="true"}


::: {.cell}

```{.r .cell-code}
ggplot(diamonds, aes(x = carat, y = price)) +
  geom_point() +
  theme_minimal() +
  labs(title = "We need diamonds with more carrots")
```

::: {.cell-output-display}
![](index_files/figure-revealjs/unnamed-chunk-2-1.png){width=960}
:::
:::

Take a breather

Note

Try making a presentation

• including a photo you take with your camera right now (or use an existing image in your computer)
• Add code to plot the audience engagement of this presentation up to now (use random values with sequential time steps, OR use actual values for how engaged you were)

Theming

Built in themes

Similar to the themes in reports there are several Bootstrap themes available.

format: 
  revealjs: 
    theme: simple

Tip

Try changing the theme of the current presentation you are working on to simple or any other built in theme that you fancy

Custom themes

You can customize the individual parts of the presentation with a custom theme.

/*-- scss:defaults --*/

$body-bg: #ffe3bb;
$body-color: green;
$link-color: #42affa;
$font-family-sans-serif: "Arial", sans-serif;
$presentation-font-size-root: 64px;
$presentation-heading-font: "Times New Roman", serif;
$presentation-heading-color: red;
$presentation-heading-text-shadow: #fc0 1px 0 10px;

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

Take a breather

Note

Try styling your previous presentation by

• Change the base font color and family
• Change the heading color and family
• Change the link color and test it by adding a link to your favorite YouTube video (bonus points if its a rick roll)

Design choices

• Accessibility (support for visually impaired users and physically challenged users)
  • Alt texts
  • Slide tones (to indicate slide position and passing)
• Visual choices
  • Colorblind friendly color choices (whocanuse, color-blindness)
  • Color contrast for readability (coolors, colourcontrast)
  • Theme colors for your own branding (coolors)
  • Readable fonts aligned with your branding (Google, Bunny (GDPR Compliant))

Additional tidbits

Tools for the presentation time

• Navigation menu (M key)
• Chalkboard (C key or N key, requires chalkboard: true)
• Speaker view (S key)
• Jump to slide (G key)
• Overview mode (O key)
• Slide tone (requires slide-tone: true)

Animations

The simplest type of animations are incremental lists.

::: {.incremental}
- Five 
- Six 
- Seven
- Eight
:::

• Five
• Six
• Seven
• Eight

There are more advanced ways to animate using fragments and auto-animate options as seen here.

Hosting the presentations

The results of the revealjs presentation is a static HTML file.

You can use any place that can static file hosting services online to share the presentation.

Examples include,

• Netlify
• Github pages
• Cloudflare pages
• Huggingface Spaces
• Amazon S3 buckets

Wrapping up

What did we learn today?

Group discussion time!

Let’s talk about what’s one thing that we remember from this session.