Reveal.js Example

This is a slide header

Below is a list and an image in columns

Canadian politician
founder of the province of Manitoba
a political leader of the Métis people

Incremental Lists and fragments

Click again and a list will appear one at a time

Louis Riel led two resistance movements against the Government of Canada
He defended Métis rights and identity
- This was especially important as the Northwest Territories came progressively under the Canadian sphere of influence.

Incremental Lists and fragments

Using “fragments”, you can change when items appear on the slide.

The Métis National Committee declared a provisional government on December 8, 1869, with Riel becoming its president on the 27th.

More fragments

Riel fled across the Canada-U.S. border

Riel defended Manitoba

Riel returned and ran for parliament

Riel was not granted amnesty

Riel was voted in, but feared assassination or arrest

The footer on the previous slide directs you to the qmd file to see the code, but …

You can also see some of it right here:


## Incremental Lists and fragments {background-color="#fcecc0"}

Using "fragments", you can change when items appear on the slide.

:::: {.columns}
::: {.column width="60%"}
:::{.fragment .fade-in}
![](images/prov_gov.jpg)
:::
:::

::: {.column width="40%"}
::: {.fragment}
The Métis National Committee declared a provisional government on December 8, 1869, with Riel becoming its president on the 27th.
:::
:::
::::

Notice how this “Code” tab has too much text for the space on this slide? Look for scrollable: true in the YAML header in the qmd file. Change it, then see what happens!

Code chunks

Incorporate your code, plots, and analyses directly into your Quarto outputs

Code
Table

head(mtcars, 10)

Our data comes from the mtcars dataset, accessed directly in RStudio

                   mpg cyl  disp  hp drat    wt  qsec vs am gear carb
Mazda RX4         21.0   6 160.0 110 3.90 2.620 16.46  0  1    4    4
Mazda RX4 Wag     21.0   6 160.0 110 3.90 2.875 17.02  0  1    4    4
Datsun 710        22.8   4 108.0  93 3.85 2.320 18.61  1  1    4    1
Hornet 4 Drive    21.4   6 258.0 110 3.08 3.215 19.44  1  0    3    1
Hornet Sportabout 18.7   8 360.0 175 3.15 3.440 17.02  0  0    3    2
Valiant           18.1   6 225.0 105 2.76 3.460 20.22  1  0    3    1
Duster 360        14.3   8 360.0 245 3.21 3.570 15.84  0  0    3    4
Merc 240D         24.4   4 146.7  62 3.69 3.190 20.00  1  0    4    2
Merc 230          22.8   4 140.8  95 3.92 3.150 22.90  1  0    4    2
Merc 280          19.2   6 167.6 123 3.92 3.440 18.30  1  0    4    4

Code chunks

Code
Plot 1
Plot 2

Now let’s try to plot something:

library(tidyverse)
library(MetBrewer)

ggplot(mtcars, aes(hp, mpg, color = as.character(cyl))) +
  geom_point() +
  theme_minimal() +
  scale_color_manual(values = met.brewer('Egypt')) +
  labs(
    x = "Horsepower",
    y = "Miles / Gallon",
    color = "Cylinder count"
  )

1: Load the Tidyverse package
2: Load the MetBrewer package
3: Use the ggplot function to plot three variables from the mtcars dataset
4: Use geom_point() function to create a scatter plot
5: Apply a minimal theme to the scatter plot
6: Apply the MetBrewer palette Egypt to the data
7: Add labels to the axes and legend

Code animations

Original Code:

#| cache: true

library(tidyverse)
library(MetBrewer)

ggplot(mtcars, aes(hp, mpg, color = as.character(cyl))) +
  geom_point(size=3) +
  theme_minimal() +
  scale_color_manual(values = met.brewer('Egypt')) +
  labs(
    x = "Horsepower",
    y = "Miles / Gallon",
    color = "Cylinder count"
  )

Code animations

New Code:

#| cache: true

library(tidyverse)
library(MetBrewer)

plot2 <- ggplot(mtcars, aes(hp, mpg, color = as.character(cyl))) +
  geom_point(size=5) +
  geom_smooth(method = "lm", se = FALSE, linetype = "dashed", color = "black") +
  theme_minimal() +
  scale_color_manual(values = met.brewer('VanGogh2')) +
  labs(
    title = "Relationship Between Horsepower and MPG by Cylinder Count",
    x = "Horsepower",
    y = "Miles per Gallon (MPG)",
    color = "Cylinder count"
  ) +
  theme(
    legend.position = c(0.8, 0.8),
    axis.title = element_text(size = 16),
    legend.title = element_text(size = 14),
    legend.box.background = element_rect(fill = '#fae9ca', color = 'gray'))

plot2

Code highlighting

New Code:

#| cache: true

library(tidyverse)
library(MetBrewer)

plot2 <- ggplot(mtcars, aes(hp, mpg, color = as.character(cyl))) +
  geom_point(size=5) +
  geom_smooth(method = "lm", se = FALSE, linetype = "dashed", color = "black") +
  theme_minimal() +
  scale_color_manual(values = met.brewer('VanGogh2')) +
  labs(
    title = "Relationship Between Horsepower and MPG by Cylinder Count",
    x = "Horsepower",
    y = "Miles per Gallon (MPG)",
    color = "Cylinder count"
  ) +
  theme(
    legend.position = c(0.8, 0.8),
    axis.title = element_text(size = 16),
    legend.title = element_text(size = 14),
    legend.box.background = element_rect(fill = '#fae9ca', color = 'gray'))

plot2

Absolute Positioning

::: {.fragment fragment-index=1 .absolute top=150 left=600 width="400" height="auto"}
::: {.fragment .semi-fade-out fragment-index=5}   
your plot in an R chunk 
:::
:::

Create a “fenced div” that contains your fragment settings and your absolute position settings.
Create another fenced div for this plot’s second fragment setting (semi-fade-out on click 5)
Insert your plot (or image or text or tabset or anything!)

Divs and spans are HTML-speak. Quarto looks best when the user plays around with these. A future tutorial will cover divs and spans in Quarto

Divs and Spans

Interactivity (plotly)

Let’s look at our plot in a new way:

Interactivity (Shiny)

Shiny offers endless customization options for interactive plots, tables, and dashboards:

Interactivity (Leaflet)

Leaflet for when you need a simple map:

Interactivity (Time-series Data)

Dygraphs for visualizing time-series plots

Preview Links

Sometimes, we want to direct our audience to a link or other web source:

And a whole lot more!