index.qmd

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

# {transition="slide" transition-speed="slow"}

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

:::{.center}
here is R once again being useful
:::

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

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


# A demo of `Quarto`, `gt`, and `gtExtras` {transition="slide" transition-speed="slow"}
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.  

## Before we talk about Quarto {transition="slide" transition-speed="slow"}
let's build a `gt` table and experience some Quarto features

```{r}
#| message: false
#| warning: false
#| echo: true

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

```{r}
#| echo: true
#| message: false
#| warning: false
#| output-location: column
#| code-line-numbers: "|3"

# table using gt package
dat %>% 
  dplyr::group_by(species) %>% # add a grouping variable and drop stub info
  gt()

```

## Headers and spanners

```{r}
#| echo: true
#| message: false
#| warning: false
#| output-location: column
#| code-line-numbers: "|5-8|9-12"

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

## Formatting numbers

```{r}
#| echo: true
#| message: false
#| warning: false
#| output-location: column
#| code-line-numbers: "|13-16"

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

## Sources, footnotes, and references

```{r}
#| 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"))
  )
```

## `gtExtras` for heatmap-like colors

```{r}
#| echo: true
#| message: false
#| warning: false
#| output-location: column
#| code-line-numbers: "|31-35"

# 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!
  
```

## Change column labels and row-group lables

```{r}
#| echo: true
#| message: false
#| warning: false
#| output-location: column
#| code-line-numbers: "|36-43|44-46"

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

## Final table
what else changed?

```{r}
#| echo: false
#| message: false
#| warning: false

# 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(
    heading.align = "left",
    row_group.font.weight = "800",
    table.background.color = "#f0f1eb"
  )
```

## Now here's a little about quarto {transition="slide" transition-speed="slow"}

The YAML for this presentation

```{verbatim, lang="yaml"}
---
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
---
```

<br>

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

## My title slide code {transition="slide" transition-speed="slow"}

:::: {.columns}

::: {.column width="60%"}
markdown that creates html divs and specifies css classes

```{verbatim, lang="markdown"}

:::{.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
:::

```
:::

::: {.column width="40%"}
In my css file I have these classes defined

```{verbatim, lang="css"}

.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;
}

```
:::
<br>
<br>
But how did I make this [two-column slide?](https://quarto.org/docs/presentations/index.html#multiple-columns)
<br>
And [different syntax highlighting](https://bookdown.org/yihui/rmarkdown-cookbook/verbatim-code-chunks.html#verbatim-code-chunks) on the left and right?
::::



## How slide 2 was made with animated text and definitions {transition="slide" transition-speed="slow"}
To make text appear on-click, not all at once, separate text with three dots, space between each dot

```{verbatim, lang="markdown"}

# 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)

```{verbatim, lang="markdown"}

word
: definition goes here  

```

## How code and ouput slides were made {transition="slide" transition-speed="slow"}

| 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

```{verbatim, lang="r"} 

#| 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 {background-image="www/paper.png" background-size="cover"}

- [quarto.org](https://quarto.org/)  
- [gt](https://gt.rstudio.com/index.html)  
- [gtExtras](https://jthomasmock.github.io/gtExtras/) 
- [palmerpenguins](https://allisonhorst.github.io/palmerpenguins/)


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

:::{.credit}
Photo by <a href="https://unsplash.com/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kelly Sikkema</a> on <a href="https://unsplash.com/s/photos/paper?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
:::

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