Quarto as reveal.js Slides

here is R once again being useful

icons for Quarto, gt, and gtExtras

Jeremy Allen
Customer Success, RStudio
twitter: @jeremy_data

A demo of Quarto, gt, and gtExtras

using palmerpenguins data



Quarto®
Quarto is an open-source scientific and technical publishing system built on Pandoc.
gt
With the gt package, anyone can make wonderful-looking tables using the R programming language, and a cohesive set of table parts, such as the table header, stub, column labels and spanner column labels, table body, and the table footer.
gtExtras
The goal of gtExtras is to provide some additional helper functions to assist in creating beautiful tables with gt.

Before we talk about Quarto

let’s build a gt table and experience some Quarto features

library(tidyverse)
library(palmerpenguins)
library(gt)
library(gtExtras)

# make a table of our data
# but let's summarize by year, so first make a year column
dat <- penguins %>%
  dplyr::arrange(year) %>% 
  mutate(year = as.factor(year)) %>% 
  group_by(species, island, year) %>% # order here will influence table output
  summarise(across(bill_length_mm:body_mass_g, ~ mean(., na.rm = TRUE))) %>%
  select(species, island, year, everything()) %>% 
  dplyr::arrange(species, island, year) %>% 
  ungroup() # experiment with and without

Build the table with gt, include some gtExtras functions for colors

gt’s default is to produce an html table
Let’s first group our data by penguin species

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt()
island year bill_length_mm bill_depth_mm flipper_length_mm body_mass_g
Adelie
Biscoe 2007 38.32000 18.44000 181.7000 3620.000
Biscoe 2008 38.70000 18.12778 189.5556 3627.778
Biscoe 2009 39.69375 18.60000 192.3750 3857.812
Dream 2007 39.10000 18.69000 186.5000 3671.250
Dream 2008 38.19375 18.33750 192.0000 3756.250
Dream 2009 38.15000 17.74500 191.1500 3651.250
Torgersen 2007 38.80000 19.02105 189.2632 3763.158
Torgersen 2008 38.76875 18.11875 191.7500 3856.250
Torgersen 2009 39.31250 18.03750 192.9375 3489.062
Chinstrap
Dream 2007 48.72308 18.48462 192.4231 3694.231
Dream 2008 48.70000 18.45000 197.7222 3800.000
Dream 2009 49.05417 18.32917 198.0833 3725.000
Gentoo
Biscoe 2007 47.01471 14.68824 215.1176 5070.588
Biscoe 2008 46.93696 14.92391 217.5652 5019.565
Biscoe 2009 48.50000 15.27674 218.4186 5140.698

Headers and spanners

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt() %>% 
  tab_header(
    title = md("**Penguin Anatomical Changes**"), #wrapped in md() for markdown
    subtitle = "By species, island, and year from 2007-2009"
  ) %>%
  tab_spanner( # tab spanner!
    label = "mean anatomical measures",
    columns = c(bill_length_mm:body_mass_g)
  )
Penguin Anatomical Changes
By species, island, and year from 2007-2009
island year mean anatomical measures
bill_length_mm bill_depth_mm flipper_length_mm body_mass_g
Adelie
Biscoe 2007 38.32000 18.44000 181.7000 3620.000
Biscoe 2008 38.70000 18.12778 189.5556 3627.778
Biscoe 2009 39.69375 18.60000 192.3750 3857.812
Dream 2007 39.10000 18.69000 186.5000 3671.250
Dream 2008 38.19375 18.33750 192.0000 3756.250
Dream 2009 38.15000 17.74500 191.1500 3651.250
Torgersen 2007 38.80000 19.02105 189.2632 3763.158
Torgersen 2008 38.76875 18.11875 191.7500 3856.250
Torgersen 2009 39.31250 18.03750 192.9375 3489.062
Chinstrap
Dream 2007 48.72308 18.48462 192.4231 3694.231
Dream 2008 48.70000 18.45000 197.7222 3800.000
Dream 2009 49.05417 18.32917 198.0833 3725.000
Gentoo
Biscoe 2007 47.01471 14.68824 215.1176 5070.588
Biscoe 2008 46.93696 14.92391 217.5652 5019.565
Biscoe 2009 48.50000 15.27674 218.4186 5140.698

Formatting numbers

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt() %>% 
  tab_header(
    title = md("**Penguin Anatomical Changes**"), #wrapped in md() for markdown
    subtitle = "By species, island, and year from 2007-2009"
  ) %>%
  tab_spanner( # tab spanner!
    label = "mean anatomical measures",
    columns = c(bill_length_mm:body_mass_g)
  ) %>% 
  fmt_number(
    columns = bill_length_mm:body_mass_g,
    decimals = 1
  )
Penguin Anatomical Changes
By species, island, and year from 2007-2009
island year mean anatomical measures
bill_length_mm bill_depth_mm flipper_length_mm body_mass_g
Adelie
Biscoe 2007 38.3 18.4 181.7 3,620.0
Biscoe 2008 38.7 18.1 189.6 3,627.8
Biscoe 2009 39.7 18.6 192.4 3,857.8
Dream 2007 39.1 18.7 186.5 3,671.2
Dream 2008 38.2 18.3 192.0 3,756.2
Dream 2009 38.1 17.7 191.2 3,651.2
Torgersen 2007 38.8 19.0 189.3 3,763.2
Torgersen 2008 38.8 18.1 191.8 3,856.2
Torgersen 2009 39.3 18.0 192.9 3,489.1
Chinstrap
Dream 2007 48.7 18.5 192.4 3,694.2
Dream 2008 48.7 18.4 197.7 3,800.0
Dream 2009 49.1 18.3 198.1 3,725.0
Gentoo
Biscoe 2007 47.0 14.7 215.1 5,070.6
Biscoe 2008 46.9 14.9 217.6 5,019.6
Biscoe 2009 48.5 15.3 218.4 5,140.7

Sources, footnotes, and references

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt() %>% 
  tab_header(
    title = md("**Penguin Anatomical Changes**"), #wrapped in md() for markdown
    subtitle = "By species, island, and year from 2007-2009"
  ) %>%
  tab_spanner( # tab spanner!
    label = "mean anatomical measures",
    columns = c(bill_length_mm:body_mass_g)
  ) %>% 
  fmt_number(
    columns = bill_length_mm:body_mass_g,
    decimals = 1
  ) %>% 
  tab_source_note(
    source_note = "Source: Very cold nights."
  ) %>%
  tab_source_note(
    # hitting return to start new lines so the string will stay inside the PDF
    # but it will be a continuous string when it renders as the footnote
    source_note = md("Reference: Horst AM, Hill AP, Gorman KB (2020). 
    palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package
    version 0.1.0. https://allisonhorst.github.io/palmerpenguins/")
  ) %>% 
  tab_footnote(
    footnote = "Only found on a single island.",
    locations = cells_row_groups(groups = c("Chinstrap", "Gentoo"))
  )
Penguin Anatomical Changes
By species, island, and year from 2007-2009
island year mean anatomical measures
bill_length_mm bill_depth_mm flipper_length_mm body_mass_g
Adelie
Biscoe 2007 38.3 18.4 181.7 3,620.0
Biscoe 2008 38.7 18.1 189.6 3,627.8
Biscoe 2009 39.7 18.6 192.4 3,857.8
Dream 2007 39.1 18.7 186.5 3,671.2
Dream 2008 38.2 18.3 192.0 3,756.2
Dream 2009 38.1 17.7 191.2 3,651.2
Torgersen 2007 38.8 19.0 189.3 3,763.2
Torgersen 2008 38.8 18.1 191.8 3,856.2
Torgersen 2009 39.3 18.0 192.9 3,489.1
Chinstrap1
Dream 2007 48.7 18.5 192.4 3,694.2
Dream 2008 48.7 18.4 197.7 3,800.0
Dream 2009 49.1 18.3 198.1 3,725.0
Gentoo1
Biscoe 2007 47.0 14.7 215.1 5,070.6
Biscoe 2008 46.9 14.9 217.6 5,019.6
Biscoe 2009 48.5 15.3 218.4 5,140.7
Source: Very cold nights.
Reference: Horst AM, Hill AP, Gorman KB (2020). palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package version 0.1.0. https://allisonhorst.github.io/palmerpenguins/
1 Only found on a single island.

gtExtras for heatmap-like colors

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt() %>% 
  tab_header(
    title = md("**Penguin Anatomical Changes**"), #wrapped in md() for markdown
    subtitle = "By species, island, and year from 2007-2009"
  ) %>%
  tab_spanner( # tab spanner!
    label = "mean anatomical measures",
    columns = c(bill_length_mm:body_mass_g)
  ) %>% 
  fmt_number(
    columns = bill_length_mm:body_mass_g,
    decimals = 1
  ) %>% 
  tab_source_note(
    source_note = "Source: Very cold nights."
  ) %>%
  tab_source_note(
    # hitting return to start new lines so the string will stay inside the PDF
    # but it will be a continuous string when it renders as the footnote
    source_note = md("Reference: Horst AM, Hill AP, Gorman KB (2020). 
    palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package
    version 0.1.0. https://allisonhorst.github.io/palmerpenguins/")
  ) %>% 
  tab_footnote(
    footnote = "Only found on a single island.",
    locations = cells_row_groups(groups = c("Chinstrap", "Gentoo"))
  ) %>%
  # trim gives smaller range of colors
  # so the green and purples are not as dark
  gt_hulk_col_numeric(bill_length_mm, trim = TRUE) %>%  # gtExtras!
  gt_hulk_col_numeric(bill_depth_mm, trim = TRUE) %>%  # gtExtras!
  gt_hulk_col_numeric(flipper_length_mm, trim = TRUE)  # gtExtras!
Penguin Anatomical Changes
By species, island, and year from 2007-2009
island year mean anatomical measures
bill_length_mm bill_depth_mm flipper_length_mm body_mass_g
Adelie
Biscoe 2007 38.3 18.4 181.7 3,620.0
Biscoe 2008 38.7 18.1 189.6 3,627.8
Biscoe 2009 39.7 18.6 192.4 3,857.8
Dream 2007 39.1 18.7 186.5 3,671.2
Dream 2008 38.2 18.3 192.0 3,756.2
Dream 2009 38.1 17.7 191.2 3,651.2
Torgersen 2007 38.8 19.0 189.3 3,763.2
Torgersen 2008 38.8 18.1 191.8 3,856.2
Torgersen 2009 39.3 18.0 192.9 3,489.1
Chinstrap1
Dream 2007 48.7 18.5 192.4 3,694.2
Dream 2008 48.7 18.4 197.7 3,800.0
Dream 2009 49.1 18.3 198.1 3,725.0
Gentoo1
Biscoe 2007 47.0 14.7 215.1 5,070.6
Biscoe 2008 46.9 14.9 217.6 5,019.6
Biscoe 2009 48.5 15.3 218.4 5,140.7
Source: Very cold nights.
Reference: Horst AM, Hill AP, Gorman KB (2020). palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package version 0.1.0. https://allisonhorst.github.io/palmerpenguins/
1 Only found on a single island.

Change column labels and row-group lables

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt() %>% 
  tab_header(
    title = md("**Penguin Anatomical Changes**"), #wrapped in md() for markdown
    subtitle = "By species, island, and year from 2007-2009"
  ) %>%
  tab_spanner( # tab spanner!
    label = "mean anatomical measures",
    columns = c(bill_length_mm:body_mass_g)
  ) %>% 
  fmt_number(
    columns = bill_length_mm:body_mass_g,
    decimals = 1
  ) %>% 
  tab_source_note(
    source_note = "Source: Very cold nights."
  ) %>%
  tab_source_note(
    # hitting return to start new lines so the string will stay inside the PDF
    # but it will be a continuous string when it renders as the footnote
    source_note = md("Reference: Horst AM, Hill AP, Gorman KB (2020). 
    palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package
    version 0.1.0. https://allisonhorst.github.io/palmerpenguins/")
  ) %>% 
  tab_footnote(
    footnote = "Only found on a single island.",
    locations = cells_row_groups(groups = c("Chinstrap", "Gentoo"))
  ) %>%
  # trim gives smaller range of colors
  # so the green and purples are not as dark
  gt_hulk_col_numeric(bill_length_mm, trim = TRUE) %>%  # gtExtras!
  gt_hulk_col_numeric(bill_depth_mm, trim = TRUE) %>%  # gtExtras!
  gt_hulk_col_numeric(flipper_length_mm, trim = TRUE) %>%  # gtExtras!
  cols_label( # new column labels!
    bill_length_mm = html("Bill Length<br>mm"),
    bill_depth_mm = html("Bill Depth<br>mm"),
    flipper_length_mm = html("Flipper Length<br>mm"),
    body_mass_g = html("Body Mass<br>g"),
    island = "Island",
    year = "Year"
  ) %>% 
  tab_options(
    row_group.font.weight = "800"
  )
Penguin Anatomical Changes
By species, island, and year from 2007-2009
Island Year mean anatomical measures
Bill Length
mm		 Bill Depth
mm		 Flipper Length
mm		 Body Mass
g
Adelie
Biscoe 2007 38.3 18.4 181.7 3,620.0
Biscoe 2008 38.7 18.1 189.6 3,627.8
Biscoe 2009 39.7 18.6 192.4 3,857.8
Dream 2007 39.1 18.7 186.5 3,671.2
Dream 2008 38.2 18.3 192.0 3,756.2
Dream 2009 38.1 17.7 191.2 3,651.2
Torgersen 2007 38.8 19.0 189.3 3,763.2
Torgersen 2008 38.8 18.1 191.8 3,856.2
Torgersen 2009 39.3 18.0 192.9 3,489.1
Chinstrap1
Dream 2007 48.7 18.5 192.4 3,694.2
Dream 2008 48.7 18.4 197.7 3,800.0
Dream 2009 49.1 18.3 198.1 3,725.0
Gentoo1
Biscoe 2007 47.0 14.7 215.1 5,070.6
Biscoe 2008 46.9 14.9 217.6 5,019.6
Biscoe 2009 48.5 15.3 218.4 5,140.7
Source: Very cold nights.
Reference: Horst AM, Hill AP, Gorman KB (2020). palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package version 0.1.0. https://allisonhorst.github.io/palmerpenguins/
1 Only found on a single island.

Final table

what else changed?

Penguin Anatomical Changes
By species, island, and year from 2007-2009
Island Year mean anatomical measures
Bill Length
mm		 Bill Depth
mm		 Flipper Length
mm		 Body Mass
g
Adelie
Biscoe 2007 38.3 18.4 181.7 3,620.0
Biscoe 2008 38.7 18.1 189.6 3,627.8
Biscoe 2009 39.7 18.6 192.4 3,857.8
Dream 2007 39.1 18.7 186.5 3,671.2
Dream 2008 38.2 18.3 192.0 3,756.2
Dream 2009 38.1 17.7 191.2 3,651.2
Torgersen 2007 38.8 19.0 189.3 3,763.2
Torgersen 2008 38.8 18.1 191.8 3,856.2
Torgersen 2009 39.3 18.0 192.9 3,489.1
Chinstrap1
Dream 2007 48.7 18.5 192.4 3,694.2
Dream 2008 48.7 18.4 197.7 3,800.0
Dream 2009 49.1 18.3 198.1 3,725.0
Gentoo1
Biscoe 2007 47.0 14.7 215.1 5,070.6
Biscoe 2008 46.9 14.9 217.6 5,019.6
Biscoe 2009 48.5 15.3 218.4 5,140.7
Source: Very cold nights.
Reference: Horst AM, Hill AP, Gorman KB (2020). palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package version 0.1.0. https://allisonhorst.github.io/palmerpenguins/
1 Only found on a single island.

Now here’s a little about quarto

The YAML for this presentation

---
date: "`r as.Date(Sys.time())`"
format:
  revealjs:
    chalkboard: true
    scrollable: true
    theme: [serif, theme/styles.scss]
    slide-number: c/t
    logo: "https://www.rstudio.com/wp-content/uploads/2018/10/RStudio-Logo-Flat.png"
    footer: "[https://github.com/jeremy-allen/quarto-demo](https://github.com/jeremy-allen/quarto-demo)"
    code-copy: true
    center-title-slide: false
    include-in-header: heading-meta.html
    code-link: true
    code-overflow: wrap
    highlight-style: a11y
    height: 1080
    width: 1920
    link-external-newwindow: true
execute: 
  eval: true
  echo: true
editor_options: 
  chunk_output_type: console
---


I excluded title and author because I wanted to make my own title slide

My title slide code

markdown that creates html divs and specifies css classes


:::{.title-center}
Quarto as reveal.js slides
:::

:::{.half-image}
![](www/icons.png){fig-alt="icons for Quarto, gt, and gtExtras"}
:::

:::{.author}
Jeremy Allen<br>
Customer Success, RStudio<br>
twitter: @jeremy_data
:::

In my css file I have these classes defined


.title-center {
  font-size: 2.75em;
  text-align: center;
  margin: auto;
}

.half-image {
  width: 50%;
  margin: auto;
}

.author {
  font-size: 1.25em;
  font-weight: 400;
  text-align: left;
  position: absolute;
  left: 30px;
  bottom: 30px;
}



But how did I make this two-column slide?
And different syntax highlighting on the left and right?

How slide 2 was made with animated text and definitions

To make text appear on-click, not all at once, separate text with three dots, space between each dot


# A demo of `Quarto`, `gt`, and `gtExtras`
using `palmerpenguins` data  
  
<br>
<br>

. . .

Quarto®
: Quarto is an open-source scientific and technical publishing system built on Pandoc.  

. . .

gt
: With the gt package, anyone can make wonderful-looking tables using the R programming language, and a cohesive set of table parts, such as the table header, stub, column labels and spanner column labels, table body, and the table footer.

. . .

gtExtras
: The goal of gtExtras is to provide some additional helper functions to assist in creating beautiful tables with gt.

The markdown convention below, shows the word in bold and offsets the definition below (not unique to slides)


word
: definition goes here

How code and ouput slides were made

Inside an r code chunk, the usual knitr chunk options are used first
output-location: column is used to split code and output into columns
code-line-numbers: "|17-19|20-26|27-30" steps through code highlights on click


#| echo: true
#| message: false
#| warning: false
#| output-location: column
#| code-line-numbers: "|17-19|20-26|27-30"

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt() %>% 
  tab_header(
    title = md("**Penguin Anatomical Changes**"), #wrapped in md() for markdown
    subtitle = "By species, island, and year from 2007-2009"
  ) %>%
  tab_spanner( # tab spanner!
    label = "mean anatomical measures",
    columns = c(bill_length_mm:body_mass_g)
  ) %>% 
  fmt_number(
    columns = bill_length_mm:body_mass_g,
    decimals = 1
  ) %>% 
  tab_source_note(
    source_note = "Source: Very cold nights."
  ) %>%
  tab_source_note(
    # hitting return to start new lines so the string will stay inside the PDF
    # but it will be a continuous string when it renders as the footnote
    source_note = md("Reference: Horst AM, Hill AP, Gorman KB (2020). 
    palmerpenguins: Palmer Archipelago (Antarctica) penguin data. R package
    version 0.1.0. https://allisonhorst.github.io/palmerpenguins/")
  ) %>% 
  tab_footnote(
    footnote = "Only found on a single island.",
    locations = cells_row_groups(groups = c("Chinstrap", "Gentoo"))
  )

Your turn! To get started


code at https://github.com/jeremy-allen/quarto-demo

Photo by Kelly Sikkema on Unsplash

Jeremy Allen
Customer Success, RStudio
twitter: @jeremy_data

https://github.com/jeremy-allen/quarto-demo