Quarto DIME Theme

A minimalist theme for Quarto/Reveal.js presentations for DIME

Bernhard Bieri

Development Impact Evaluation (DIME)

Tuesday, the 26th of September, 2023

Authors

Author 1

Affiliation

Author 2

Affiliation

Author 3

Affiliation

Introducing the DIME’s Quarto theme

This presentation template accelerates the creation of Reveal.js presentations by taking care of the formatting of your presentations so that users can focus on the content.

What is Quarto?

Quarto enables you to weave together text written in Markdown and executable code into a finished publication-ready document. Quarto is a language agnostic making it ideal for research teams working with different languages such as Python and R.

To learn more about Quarto presentations specifically see https://quarto.org/docs/presentations/.

Why Quarto? What about Rmd presentations?

  • Yihui Xie has a neat blog post explaining the difference between the two ways of rendering presentations.
  • Quarto also has a nice FAQ thread on their website about the differences between .Rmd and Quarto documents.
  • Key Insight 1: While there is no obvious need for existing .Rmd users to switch yet, Quarto’s new features will most likely not be backported to .Rmd.
  • Key Insight 2: The present template can easily be used by folks running their analysis in Python thanks to the language agnostic nature of Quarto!

The Basics!

Bullets

When you click the Render button a document will be generated that includes:

  • Content authored with markdown
  • Output from executable code

This is part of the Quarto documentation.

R Code

When you click the Render button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

1 + 1
[1] 2

This is part of the Quarto documentation.

You can also add text marked as code!

Integrated Python within an R Quarto Presentation with {reticulate}

You can even render content written in Python directly thanks to the {reticulate} R-package and a Python installation.

Code 
# Do not forget to create an environment with numpy and pyplot installed and
# import it with reticulate at the start of the .qmd file.

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(
  subplot_kw = {'projection': 'polar'}
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

Figure 1: A line plot on a polar axis

Equations

Adding Latex style equations is straightforward. Here is Euler’s identity:

\[ \begin{equation} e^{i\pi} + 1 = 0 \end{equation} \]

And here is Shepherd’s lemma:

\[ \begin{equation} \frac{P_1 - P_2}{Q_1 - Q_2} > \frac{P_1 - P_3}{Q_1 - Q_3} \end{equation} \]

Images

Adding images is easy, simply type ![Photo Description](path\to\image), et voilà!

Source: Link

Background image

Source: Link

Advanced Layouts!

To make a “section” slide like this, use:

# Title of slide {background-color="#07202E"}

Tabset example

Content here for tabset 1 :)

More content here, for tabset 2 :)

Incremental content

Hi!

Use . . . to separate content as an incremental slide!

You can add R code to plot data…

library(dplyr)
library(ggplot2)
g <- starwars |>
  ggplot() +
  geom_point(aes(x = height, y = mass)) +
  theme_dime()

You can add R code to plot data…and focus on (a) specific line(s):

library(dplyr)
library(ggplot2)

starwars <- starwars |>
  dplyr::mutate(name = ifelse(name %in% c("Jabba Desilijic Tiure", "Tarfful"),
                              name, ""))

g <- starwars |>
  ggplot() +
  geom_point(aes(x = height, y = mass, col = sex)) +
  ggrepel::geom_text_repel(aes(x = height,
                               y = mass,
                               label = name),
                           max.overlaps = 100) +
  labs(title = "Star Wars Example",
       caption = "Star Wars Example Dataset",
       col = "Sex") +
  theme_dime()

See the Quarto Documentation for more details.

Before showing the results :)

g

A DIME color palette

The theme also contains a DIME/World Bank color palette and a color generator to make graphs more uniform and easier to generate. dime_palette() yields a named vector with the HEX codes of the corresponding colors for an easy integration in {ggplot2} graphs.

# The default discrete DIME color palette
dime_palette(name = "DIME", 5, type = "discrete")

# A continuous palette based on the DIME palette
dime_palette(name = "DIME", 21, type = "continuous")

A few more penguin examples

Let’s create a few more plots using the great {palmerpenguins} dataset and illustrate Simpson’s Paradox. These examples are inspired by this great talk.

Creating interactive graphs with Observable JS

Another way of creating interactive visualizations within your presentations is to use Observable JS, a Java Script framework developed by the creators of D3.js. See the Quarto documentation for more details.

Penguin regression tables

\[ \text{Bill Depth}_{i} = \alpha + \beta \times \text{Bill Length}_{i} + \epsilon_i \]

(1)
(Intercept) 20.885 ***
(0.844)   
bill_length_mm -0.085 ***
(0.019)   
N 342        
R2 0.055    
logLik -707.776    
AIC 1421.552    
*** p < 0.001; ** p < 0.01; * p < 0.05.

\[ \text{Bill Depth}_{i, k} = \alpha_k + \beta_k \times \text{Bill Length}_{k, i} + \epsilon_i \\ \text{where}\ k = \text{"Gentoo"} \]

(1)
(Intercept) 5.251 ***
(1.055)   
bill_length_mm 0.205 ***
(0.022)   
N 123        
R2 0.414    
logLik -138.834    
AIC 283.667    
*** p < 0.001; ** p < 0.01; * p < 0.05.

What about other tables?

knitr::kable()

tab <- starwars |>
  tidyr::drop_na(species) |>
  group_by(species) |>
  summarise(
    n = n(),
    mean_heigth = round(mean(height, na.rm = TRUE)),
    mean_mass = round(mean(mass, na.rm = TRUE))
  ) |>
  slice_max(order_by = n, n = 4)

knitr::kable(tab)
species n mean_heigth mean_mass
Human 35 177 83
Droid 6 131 70
Gungan 3 209 74
Kaminoan 2 221 88
Mirialan 2 168 53
Twi’lek 2 179 55
Wookiee 2 231 124
Zabrak 2 173 80

DT::datatable()

With the smaller class in the slide! Ex: ## slide name {.smaller}

gt::gt()

species n mean_heigth mean_mass
Human 35 177 83
Droid 6 131 70
Gungan 3 209 74
Kaminoan 2 221 88
Mirialan 2 168 53
Twi'lek 2 179 55
Wookiee 2 231 124
Zabrak 2 173 80

reactable::reactable()

Map using ggplot2::ggplot() and {osmdata}

Interactive maps using {leaflet}

# Example taken from the leaflet package website
library(leaflet)

m <- leaflet(width = "100%") |>
  addTiles() |>  # Add default OpenStreetMap map tiles
  addMarkers(lng = 174.768,
             lat = -36.852,
             popup = "The birthplace of R")
m  # Print the map

Slide with speaker notes

Adding speaker notes is easily done by creating a slide containing a div with class .notes, e.g.:

## Slide with speaker notes

Slide content

::: {.notes}
Speaker notes go here.
:::

When in presentation mode, you can access the speaker notes by pressing s on your keyboard.

Creating an automatic bibliography:

Research is almost always built upon existing knowledge. Acknowledging the latter is therefore key. Quarto allows this bz specifying bibliography: bibfile.bib in the YAML header.

One can then add citations with the @ key (Arrow 1973). To generate the bibliography simply insert a slide with:

## References

::: {#refs}
:::

See the Quarto documentation entry on citations for more details.

References

Arrow, Kenneth J. 1973. “Review of Some Ordinalist-Utilitarian Notes on Rawls’s Theory of Justice.” The Journal of Philosophy 70 (9): 245–63. https://doi.org/10.2307/2025006.

Present and Share your Presentation with the World!

Presenting your rendered presentation

Rendering your presentation by pressing CTRL/CMD + K or the render button at the top of the .qmd file will create either a self-contained HTML presentation or an HTML file plus a folder with all supporting files needed by your presentation depending on whether embed-resources: is set to true or not in the YAML header.

To present your slides locally, simply open the html file in your favorite browser. Don’t forget to check out the key-bindings by typing ? once your presentation is open in your browser.

Sharing your HTML presentation online

Sharing your HTML presentation takes one line of code! Open up a terminal and type the following line to deploy your presentation to Netlify. This requires a free Netlify account to work.

quarto publish netlify yourpresentation.qmd

See the Quarto documentation for additional ways of publishing your presentation.

Exporting into PDF

You can use the function pagedown::chrome_print() to print the HTML version into a PDF!

# install.packages("pagedown")
pagedown::chrome_print("path-to-file.html")

Acknowlegements

This presentation and the template it showcases are inspired from the following creators. Check out their great themes.

Useful Resources

Want to go further? Here are some great resources to get you started:

DIME theme for Quarto Presentations. Code available on GitHub.