Components

Alerts & Cross-refs

To emphasize specific words or text, you can:

• Use the default .alert class, e.g. important note.
• Use the .fg class for custom colour, e.g. important note.
• Use the .bg class for custom background, e.g. important note.

Components

Animate elements with .fragment

Fragments are a way to animate elements onto the slide.

Components

Nested fragments

Fragments can also be nested.

Fade in > Highlight red > Highlight blue > Semi fade out

Components

Cross-references & Citations

To cross-reference, you have several options, for example:

• Beamer-like .button class provided by this theme, e.g. Appendix
• Quarto’s native cross-ref syntax, e.g., “See Section 4.3.”

Citations follow the standard Quarto format and be sourced from BibLaTex, BibTeX, or CLS files. For example:

• Topic 1: Spatial Frictions (Fajgelbaum et al. 2018; Hsieh and Moretti 2019; Moretti 2011)

• Topic 2: Blah (Suárez Serrato and Zidar 2016)

Components

Blocks

Quarto provides dedicated environments for theorems, lemmas, and so forth.

But in presentation format, it’s arguably more effective just to use a Callout Block.

Components

Multicolumn I: Text only

Multicolumn support is very flexible and we can continue with a single full span column in the same slide.

Components

Multicolumn II: Text and figures

Note that sub- and multi-panel figures are also natively supported by Quarto. See here.

Components

Multicolumn III: Code and output

#| echo: false
#| label: fig-pairs
#| fig-cap: "Pairwise scatterplot" 
#| fig-asp: 1
#| output-location: column

palette("Classic Tableau")

par(
  family = "HersheySans",
  las = 1, pch = 19, cex = 1.5
)

pairs(
  iris[,1:4],
  col=iris$Species
)

Tables

Regression example

Quarto offers excellent table support, with further customization via user libraries. Let’s illustrate with a regression example:

#| echo: true

library(fixest)

mods = feols(
  rating ~ complaints + privileges + learning + csw0(raises + critical) + advance,
  data = attitude
)

dict = c("rating"     = "Overall Rating",
         "complaints" = "Handling of Complaints",
         "privileges" = "No Special Priviledges",
         "learning"   = "Opportunity to Learn",
         "raises"     = "Performance-Based Raises",
         "critical"   = "Too Critical",
         "advance"    = "Advancement")

Regression table

modelsummary

If you use modelsummary with this Quarto theme, we advise setting the gt backend for a cleaner aesthetic. More details here.

#| echo: true
#| output-location: slide

library(modelsummary)
options(modelsummary_factory_default = "gt")

modelsummary(
  setNames(mods, c("(1)", "(2)")),
  coef_map = dict, stars = TRUE,
  gof_omit = "Adj|IC|F|Log|RMSE"
  ) |>
  gt::tab_spanner(
    label = "Dependent variable: Overall Rating",
    columns = 2:3
  )

Regression table

etable

fixest’s powerful native tabling functions were designed for LaTeX output. But we can use the markdown = TRUE option to make them work with this theme too. (Details here.) Quick notes:

• Install the tinytex & pdftools packages first.
• Set the R chunk option output: asis.

```{r}
#| output: asis

setFixest_etable(markdown = TRUE, drop = "Constant")
setFixest_dict(dict)

etable(mods, highlight = .("se" = "complaints"))
```

Regression table

etable (cont.)

#| output: asis

setFixest_etable(markdown = TRUE, drop = "Constant")
setFixest_dict(dict)

etable(mods, highlight = .("se" = "complaints"), arraystretch = 1.5)

Figure

Figure

Full-size Figures

You can use the {.background-image} container environment to completely fill the slide background with an image.

Ideally, your figure will be the same aspect ratio as the screen that you’re presenting on.

• This can be a bit tricky because of the dynamic nature of reveal.js / HTML. But it’s probably something close to 16:9.
• Aspect ratio can also matter for a regular full-frame images (previous slide).

Interactive plots

#| out-width: 75%

library(threejs)

# Approximate locations as factors
data(flights)
dest = factor(sprintf("%.2f:%.2f", flights[,3], flights[,4]))

# A table of destination frequencies
freq = sort(table(dest), decreasing=TRUE)

# The most frequent destinations in these data
frequent_destinations = names(freq)[1:10]

# Subset the flight data by destination frequency
idx = dest %in% frequent_destinations
frequent_flights = flights[idx, ]

# Lat/long and counts of frequent flights
ll = unique(frequent_flights[, 3:4])

# Plot frequent destinations as bars, and the flights to and from
# them as arcs. Adjust arc width and color by frequency.
globejs(lat=ll[, 1], long=ll[, 2], arcs=frequent_flights,
        # bodycolor="#aaaaff", arcsHeight=0.3, arcsLwd=2,
        bodycolor="#fff", arcsHeight=0.3, arcsLwd=2,
        arcsColor="#ffff00", arcsOpacity=0.15,
        atmosphere=TRUE, color="#fff", pointsize=0.5)

Note: Simple flight data example using threejs. There are many interactive plotting options beyond this. (More details.)

Summary

A minimal and elegant presentation theme

The Quarto reveal.js clean theme aims to be a minimal and elegant presention theme.

We have highlighted some theme-specific components. But all of the regular reveal.js functionality is supported (chalkboard, etc.)

Install the theme:

quarto install extension grantmcdermott/quarto-revealjs-clean

Use these demo slides as a template:

quarto use template grantmcdermott/quarto-revealjs-clean-demo

Appendix

#| label: tbl-attsum
#| tbl-cap: Summary of the base R `attitude` dataset

modelsummary::datasummary_skim(attitude)

Back to main