Quarto: Reports and presentations

Megumi Oshima & Nicholas Ducharme-Barth

January 2025

What is Quarto?


“An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more.”

— In their own words…


But really it is fancy LaTeX or expanded R Markdown that can do so much more!

What can it do?


Format: html

basic.qmd

---
title: "Basic document"
format: html
---

## Quarto

Make different documents by changing the format! 

## Code

Incorporate `code` into your work ...

```{r}
#| echo: true
x = 1 + 1
```
... and report the computations later $x =$ `r x`.

## Make plots

Even insert figures:

```{r}
#| label: fig-scatterplot
#| fig-cap: "City and highway mileage for 38 popular models of cars."
#| echo: true
library(ggplot2)

ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
  geom_point(alpha = 0.5, size = 2) +
  scale_color_viridis_c() +
  theme_minimal()
```

Format: pdf

basic.qmd

---
title: "Basic document"
format: pdf
---

## Quarto

Make different documents by changing the format! 

## Code

Incorporate `code` into your work ...

```{r}
#| echo: true
x = 1 + 1
```
... and report the computations later $x =$ `r x`.

## Make plots

Even insert figures:

```{r}
#| label: fig-scatterplot
#| fig-cap: "City and highway mileage for 38 popular models of cars."
#| echo: true
library(ggplot2)

ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
  geom_point(alpha = 0.5, size = 2) +
  scale_color_viridis_c() +
  theme_minimal()
```

Unable to display PDF file. Download instead.

Format: revealjs

basic.qmd

---
title: "Basic document"
format: revealjs
---

## Quarto

Make different documents by changing the format! 

## Code

Incorporate `code` into your work ...

```{r}
#| echo: true
x = 1 + 1
```
... and report the computations later $x =$ `r x`.

## Make plots

Even insert figures:

```{r}
#| label: fig-scatterplot
#| fig-cap: "City and highway mileage for 38 popular models of cars."
#| echo: true
library(ggplot2)

ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
  geom_point(alpha = 0.5, size = 2) +
  scale_color_viridis_c() +
  theme_minimal()
```

Quarto basics: Header


---
title: "Basic document"
format: revealjs
---

Use the header to set options for the document, including the format.

Quarto basics: Header

The header can also be used to define re-usable parameters, and these can be used in the body of the report.

header-param.qmd

---
title: "Report template"
author: Meg Oshima and Nicholas Ducharme-Barth
format:
  html:
    embed-resources: true
engine: knitr
params:
  parameter: "steepness"
  value: 0.7
---

# Report text

As an example we changed the `r params$parameter` in the model to `r params$value`.

revealjs features

---
format:
 revealjs:
  slide-number: true
  mermaid-format: svg
embed-resources: true
---

# Intro

We can specify the format as `revealjs` to make a presentation.

# Fragments {.smaller}

[Fragments](https://quarto.org/docs/presentations/revealjs/advanced.html#fragments){preview-link="true"} can be used to animate elements on a slide.
Fragment order can be defined using [`fragment-index`](https://quarto.org/docs/presentations/revealjs/advanced.html#fragment-order){preview-link="true"}.

::: {.fragment}
- Fade in
:::

::: {.fragment .fade-out}
- Fade out
:::

::: {.fragment .fade-in-then-out}
- Fade in, then out
:::

::: {.fragment .fade-up}
- Slide up while fading in
:::

# Code-highlighting {.smaller}

If displaying a code block, lines can be highlighted in a sequential fashion using [`code-line-numbers`](https://quarto.org/docs/presentations/revealjs/#line-highlighting){preview-link="true"}.

```{.r code-line-numbers="|1|3|5|4|4-6|"}
library(ggplot2)

ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
  geom_point(alpha = 0.5, size = 2) +
  scale_color_viridis_c() +
  theme_minimal()
```

# Mermaid charts

[Diagrams](https://quarto.org/docs/authoring/diagrams.html){preview-link="true"} can be embedded 
using [Mermaid](https://mermaid.js.org/){preview-link="true"} which has 
a great [live editor](https://mermaid.live/){preview-link="true"}!

```{mermaid}

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

```

html features

---
title: "Report template"
author: Meg Oshima and Nicholas Ducharme-Barth
format:
  html:
    embed-resources: true
---

# Code-folding

We can visualize the `mpg` dataset for common cars...

```{r}
#| code-fold: true
#| code-summary: "Show the code to plot the `mpg` dataset."
#| echo: true
#| eval: false

library(ggplot2)

ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
  geom_point(alpha = 0.5, size = 2) +
  scale_color_viridis_c() +
  theme_minimal()

```

# Panel-tabset

... and explore the relationship between highway fuel consumption and the number of cylinders.

::: {.panel-tabset}

## Plot

```{r}
#| echo: false
library(ggplot2)

ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
  geom_point(alpha = 0.5, size = 2) +
  scale_color_viridis_c() +
  theme_minimal()
```

## Data subset

```{r}
#| echo: false
head(mpg)
```

Report formatting

Technical formatting of pdf’s can be done by modifying the LaTeX template-partials and including them in the header.

format:
  pdf:
    toc: true
    number-sections: true
    colorlinks: true
    template-partials:
      - assets/doc-class.tex
      - assets/before-title.tex
      - assets/before-body.tex
% begin title page
\thispagestyle{empty}
\begin{flushright}
    % UPDATE: add document number
    \textbf{ISC/25/SHARKWG-1/XX}
\end{flushright}
\vspace{1in}

\begin{center}
    % UPDATE: title
    \textbf{Updated blue shark CPUE from US Hawai'i longline fisheries; 2002-2023}
    % UPDATE: footnote with meeting information
    \textbf{\footnote{Working document submitted to the ISC Shark Working Group Workshop, 27 January - 3 February 2025
    (JST), Yokohama Japan. Document not to be cited without author’s permission.}}
    
    \vspace{0.25in}
    % UPDATE: authors
    Nicholas D. Ducharme-Barth\begin{math}^2\end{math} % define superscript for affiliation

    \vspace{0.25in}
    % UPDATE: affiliations
    \begin{math}^2\end{math}NOAA Fisheries, Pacific Islands Fisheries Science Center, Honolulu, Hawaii USA

    \vspace{0.25in}
    % UPDATE: contact information
    Email: nicholas.ducharme-barth@noaa.gov
\end{center}

% include the species image in the 'static' sub-directory
\begin{figure}[!hb]
    \begin{center}
        % UPDATE: path to figure, figure name, and alternative text.
        \pdftooltip{\includegraphics[scale=0.8]{static/bsh.jpg}}{A blue shark, \textit{Prionace glauca}.}
    \end{center}
\end{figure}

% end of title page
\clearpage

Resources


How to render?


quarto render <filename>