03-Presentations

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

Creating slides show

A new slide

Getting started

YAML:

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

Create a Section (Header 1 #):

# Introduction

Create a Slide (Header 2 ##):

## This is a slide 

Here I write something concerning my topic

Incremental contents

  • 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:

Basics

YAML

These options will be applied to all slides

---
title: "03-Presentations"
author:
  name: "Ottavia M. Epifania, Ph.D."
  email: ottavia.epifania@unitn.it
affiliation: "ARCA summer school"
format: 
  revealjs: 
    self-contained: true
    scrollable: true           
    logo: "www/freepalestine.jpg"
    footer: "Presentations"
    incremental: true
    slide-number:  c/t
    show-slide-number: all
---

Specific slides 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

Customize themes: Easy mode

Use the pre-defined themes with personalized .scss file:

---
title: "My presentation"
author: "Ted Bundy"
format:
  revealjs: 
    theme: [dark, custom.scss]
---
/*-- scss:defaults --*/

// fonts
$font-family-sans-serif: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;
$presentation-font-size-root:   34px;

// headings
$presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;
$presentation-h1-font-size: 1.8em;
$presentation-h2-font-size: 1.4em;
$presentation-h3-font-size: 1.2em;


// code 
$code-block-font-size: 0.70em;

$callout-style-font-size: .5em;
$callout-style-font-weight: 400;

$slide-logo-size: 200px;

/*-- scss:rules --*/

.reveal a {
  line-height: 1.3em;
}

Customize themes: Pro mode

Define a new theme. Here all the elements that can be modified

Save the theme in a file mytheme.scss and theme: mytheme.scss

/*-- scss:defaults --*/

// fonts
$font-family-sans-serif: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;

// colors
$body-bg: #fff !default;
$body-color: #000 !default;
$link-color: #51483d !default;
$selection-bg: #26351c !default;
$presentation-font-size-root:   32px;

// headings
$presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;
$presentation-heading-color: #9B0014 !default;
$presentation-h1-font-size: 1.8em;
$presentation-h2-font-size: 1.4em;
$presentation-h3-font-size: 1.2em;


$callout-style-font-size: .5em;
$callout-style-font-weight: 400;

$slide-logo-size: 200px;

/*-- scss:rules --*/

.reveal a {
  line-height: 1.3em;
}

Your turn

  • Create a new quarto presentation
    • Default incremental
    • Choose a theme
  • Make two slides with a list:
    • One where it is incremental
    • One where it is not incremental and the slide is scrollable

Slide layout

Columns

:::: {.columns}

::: {.column width="40%"}
I want some text in the left column
:::

::: {.column width="60%"}
And a pciture in the right one 


:::

::::

I want some text in the left column

And a picture in the right one

knitr::include_graphics("www/peacock.png")

tabset: code

::: {.panel-tabset}

## Aim

Here I present the aim of the study 

## Methods

Here I present the methods used to pursue the aim

## Results

And here I present the results

:::

tabset: output

Here I present the aim of the study

Here I present the methods used to pursue the aim

And here I present the results

Absolute positions

Code

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

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

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

Stack content

Stack content: Code

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

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

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

:::

Pro Stacking

Pro stacking: Code I

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

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


::: {.fragment .fade-out}
![](www/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}
![](www/posse.jpg){width="500" height="400"}
:::

Your turn

  • Create a slide with absolute positioning of two pictures

  • Create a slide with stacked content (you can decide what and how)

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!
:::

Footnotes

My blood brother is an immigrant, a beautiful immigrant 1

Footnotes: Code

My blood brother is an immigrant, a beautiful immigrant ^[This song is [Danny Nedelko](https://youtu.be/QkF_G-RF66M?si=F11TuQYUtWVz0L9G) by IDLES]


::: aside
Fear leads to panic, panic leads to pain

Pain leads to anger, anger leads to hate

Yeah, yeah, yeah, yeah, ah, ah, ah, ah

Yeah, yeah, yeah, yeah, ah, ah, ah, ah

[Danny Nedelko](https://youtu.be/QkF_G-RF66M?si=F11TuQYUtWVz0L9G)
:::

Code

In general

The syntax and the code seen so far for the code chunk remain the same:

```{r}
#| eval: false
#| echo: true
head(rock)
```

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")        
```

Your turn

  • Code highlight of the 2 and 3 lines:
mtcars %>%                               
  ggplot( aes(mpg, hp)) +   
  geom_point()
  • Code animation from the previous code:
mtcars %>%                               
  ggplot( aes(mpg, hp, color = gear)) +   
  geom_point() + 
  geom_smooth(method = "lm")
  • Output location in next slide:
mtcars %>%                               
  ggplot( aes(mpg, hp, color = gear)) +   
  geom_point() + 
  geom_smooth(method = "lm")

Interactivity

Basics

Interactive plots with plotly

library(plotly) # you have to first install it :) 

graph = mtcars %>%
  ggplot( aes(mpg, hp, color = gear)) +
  geom_point() +
  geom_smooth()
ggplotly(graph)
1
Basic ggplot saved into object graph
2
Activate with plotly

Time to shine

Shiny app logic I

ui (User Interface)

The container, whatever sees the user

Used for setting the desired configurations of options that will be elaborated in the server

Used for displaying the results of the computations that took place in the server

server

It gets the work done, according to the configuration set in the UI

Replaces the results into the allocated spaces

A flow

  • Define something in the ui and not using in the server: nothing happens, it just doesn’t exist

  • Calling something in the server that has not been defined in the ui: errors everywhere

Basics

install.packages("shiny") # install
library(shiny) # use it
ui = fluidPage(
   [...]
  )
server = function(input, output){
  [...]
}
shinyApp(ui, server)
1
Define the ui
2
Define the server
3
Shine

To each its own: Input in UI

sliderInput()     # Slider input widget
numericInput()    # Numeric input control
selectInput()     # Select list input control
checkboxInput()   # Checkbox input control
checkboxGroupInput()
dateInput()       # Date input
fileInput()       # File upload control
radioButtons()    # Radio buttons
textInput()       # Text input control
passwordInput()   # Password input control
actionButton()    # Action button
dateInput()       # Date input
dateRangeInput()  # Input a data range

Complete list (with code)

To each its own: Output in UI

plotOutput()          # Plot output element
textOutput()          # Text output element
verbatimTextOutput()  # Verbatim text output element
tableOutput()         # Table output element
dataTableOutput()     # Data table output element
htmlOutput()          # HTML output element
uiOutput()            # user interface element
downloadButton()      # Download button
Progress()            # Reporting progress (object oriented)
withProgress()        # Reporting progress (functional)
outputOptions()       # Set options for an output object

To each its own: Output containers in server

renderPlot()        # Plot output
renderText()        # Text output
renderPrint()       # Printable output
renderTable()       # Table output
renderDataTable()   # Data table output
renderImage()       # Image file output
renderUI()          # UI output
downloadHandler()   # File downloads

ui = fluidPage(

)

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1)
)

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1), 
  
  verbatimTextOutput(
  outputId = "myOutput"
)
  
)

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1), 
  
  verbatimTextOutput(
  outputId = "myOutput"
)
  
)

server = function(input, output) {
  output$myOutput = renderText({
    paste(paste("This is my choice"), input$mySelection)
  })
}

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1), 
  
  verbatimTextOutput(
  outputId = "myOutput"
)
  
)

server = function(input, output) {
  output$myOutput = renderText({
    paste(paste("This is my choice"), input$mySelection)
  })
}

shinyApp(ui, server)  













Shine in quarto




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








UI


```{r}
#| panel: sidebar
#| eval: false
selectInput(inputId = "dataset", # name of the input (for the server)
                  label = "Choose a dataset:", # name of the input (for the users)
                  choices = c("rock", "pressure", "cars")) # options (for  both 
                                                          # users & server)
```


```{r}
#| panel: fill
#| eval: false
#| out-width: 30%
#| fig-align: center
plotOutput("graph" )
verbatimTextOutput("summary")

```






Server


```{r}
#| eval: false
#| context: server

output$graph <- renderPlot({
    if(input$dataset == "rock"){ # call the input and its options with their label
      data <- rock
    } else if (input$dataset == "pressure" ){
      data <- pressure
    } else if (input$dataset == "cars") {
      data <- cars
    }
    plot(data[, c(1:2)])
  })

output$summary <- renderPrint({
    if(input$dataset == "rock"){
      data <- rock
    } else if (input$dataset == "pressure" ){
      data <- pressure
    } else if (input$dataset == "cars") {
      data <- cars
    }
    summary(data[, c(1:2)])
  })

```