Quarto in 2 Hours


Tom Mock, RStudio PBC

 jthomasmock.github.io/quarto-2hr-webinar

2022-08-09

Hello Quarto

We assume

You know R

You know a little bit of Markdown

You want to learn about Quarto, the next-generation of RMarkdown

We’ll teach you

Quarto syntax and formats

More Markdown

Even more R along the way!

Find me at:

@thomas_mock

@jthomasmock

themockup.blog

Workshop Prep

pkg_list <- c(
  "tidyverse", "gt", "gtExtras", "reactable", "ggiraph", "here", "quarto",
  "rmarkdown", "gtsummary", "palmerpenguins", "fs", "skimr"
  )
install.packages(pkg_list)

Great, let’s get started!

Our Turn

Local

  • Install/Open RStudio v2022.07.1
  • Clone the workshop: https://github.com/jthomasmock/quarto-workshop.git locally

RStudio Cloud

Hello Quarto

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

You can weave together narrative text and code to produce elegantly formatted output as documents, web pages, blog posts, books and more.

How does RMarkdown work?

  • knitr started in 2011, RMarkdown in 2014
A diagram of how a RMD is turned into output formats via knitr and pandoc

Quarto, more than just knitr

We learned from 10 years of literate programming with knitr + rmarkdown

Quarto, more than just knitr

Quarto, more than just knitr

Quarto, more internals

  • Quarto uses an engine like knitr to execute code and generate a temporary output .md

The .md file is processed via Pandoc and Quarto’s Lua filters + Bootstrap CSS for HTML or LaTeX for PDF and converted to a final output format

Lua filters written by R/Python/Julia developers should be interchangeable between formats - typically not language specific!

Widgets

  • Quarto can support both htmlwidgets in R and Jupyter widgets for Python/Julia

Quarto includes native support for Observable JS, a set of enhancements to vanilla JavaScript created by Mike Bostock (also the author of D3). Observable JS is distinguished by its reactive runtime, which is especially well suited for interactive data exploration and analysis.

Quarto, also with Observable Javascript!


Converting temperature from ℃ to ℉

Celsius = and Fahrenheit = ℉.

```{ojs}
viewof temp = Inputs.range([0, 100], {step: 1, value: 34, label: htl.html`Temp &#x2103;`})
```

Converting temperature from &#x2103; to &#x2109; <br>  
Celsius = ${d3.format(".0f")(temp)}&#x2103; and Fahrenheit = ${d3.format(".1f")(temp * 9/5 + 32)}&#x2109;.

Observable.js

Quarto is a big universe!

A diagram of the R, Python, Julia, Observable icons passed into Quarto to generate HTML, PDF, Word, and more!

So what is Quarto?

Quarto is a command line interface (CLI) that renders plain text formats (.qmd, .rmd, .md) OR mixed formats (.ipynb/Jupyter notebook) into static PDF/Word/HTML reports, books, websites, presentations and more

thomasmock$ quarto --help

  Usage:   quarto
  Version: 1.0.36

  Description:
    Quarto CLI

  Options:
    -h, --help     - Show this help.                            
    -V, --version  - Show the version number for this program.  

  Commands:
    render          [input] [args...]   - Render input file(s) to various document types.            
    preview         [file] [args...]    - Render and preview a document or website project.          
    serve           [input]             - Serve a Shiny interactive document.                        
    create-project  [dir]               - Create a project for rendering multiple documents          
    convert         <input>             - Convert documents to alternate representations.            
    pandoc          [args...]           - Run the version of Pandoc embedded within Quarto.          
    run             [script] [args...]  - Run a TypeScript, R, Python, or Lua script.                
    install         <type> [target]     - Installs an extension or global dependency.                
    publish         [provider] [path]   - Publish a document or project. Available providers include:
    check           [target]            - Verify correct functioning of Quarto installation.         
    help            [command]           - Show this help or the help of a sub-command.    

Comfort of your own workspace

A screenshot of a Quarto document rendered inside RStudio

A screenshot of a Quarto document rendered inside JupyterLab

A screenshot of a Quarto document rendered inside VSCode

RStudio Visual Editor

Our turn

  • Open materials/workshop/03-authoring/visual-editor.qmd
  • Explore the UI elements and visual editor mode
  • Turn Visual Editor mode on/off and explore the sections
  • Render the document and compare the viewer to Visual Mode!

VS Code

Screenshot of VSCode with a Quarto document

VS Code YAML

Screenshot of a .ipynb with Quarto YAML edited in VSCode

VS Code, YAML Intelligence

Screenshot of a .ipynb with Quarto YAML edited in VSCode

Jupyter/Jupyter Lab

Screenshot of a .ipynb with Quarto YAML edited in Jupyter

Jupyter

quarto preview notebook.ipynb --to html

Screenshot of a .ipynb with Quarto YAML edited in Jupyter

Jupyter YAML

Treat YAML as a “raw cell” in Jupyter - Jupyter doesn’t care about YAML, but it’s needed/used by Quarto

Screenshot of a .ipynb with Quarto YAML edited inJupyter

Quarto, for collaboration

contents:
  - datalake-extracts-dplyr-aws.rmd
  - data-cleaning-siuba.ipynb
  - python-r-handoff.ipynb  
  - computer-vision-r-torch.qmd

Quarto Publish

 terminal
quarto publish --help

  Usage:   quarto publish [provider] [path]
  Version: 1.0.36                          
                                           
  Description:
    Publish a document or project. Available providers include:
                                                               
     - Quarto Pub (quarto-pub)                                 
     - GitHub Pages (gh-pages)                                 
     - RStudio Connect (connect)                               
     - Netlify (netlify)                                       

Screenshot of the quartopub.com website

What about for Data Science at Work?

  • Use Quarto in RStudio Workbench (v2022.07.1) and RStudio Connect (v2022.07.0)!

One install, “Batteries included”

  • Quarto is bundled and comes pre-installed with RStudio v2022.07.1 and beyond!

RStudio 2022.07.1+554 'Spotted Wakerobin', July 25th, 2022 New: Update Quarto to 1.0.36

Feature R Markdown Quarto
Cross References
Websites & Blogs
Books
Interactivity Shiny Documents Quarto Interactive Documents
Paged HTML pagedown Summer 2022
Journal Articles rticles Summer 2022
Dashboards flexdashboard Fall 2022

What to do with my existing .Rmd or .ipynb?

For some of you - nothing changes! Keep using RMarkdown and Jupyter.


However, most existing .rmd or .ipynb can be rendered as-is via Quarto

 terminal
quarto render my-favorite.rmd --to html


Since Jupyter notebooks can either be treated as a linear document to be re-executed or an already evaluated document there are additional options like: --execute

 terminal
quarto render my-favorite.ipynb --to html --execute

Why Quarto, instead of RMarkdown

  • Batteries included, shared syntax
  • Choose your own editor and your preferred data science language
  • Better accessibility and richer features out of the box
  • More enhancements overtime - RMarkdown still maintained, but majority of new features built into Quarto

Collaboration with other colleagues in other languages - shared format, choose your editor and your native language

Rendering

A screenshot of the render button in RStudio
  1. System shell via quarto render
 terminal
quarto render document.qmd # defaults to html
quarto render document.qmd --to pdf
quarto render document.qmd --to docx
  1. R console via quarto R package
library(quarto)
quarto_render("document.qmd") # defaults to html
quarto_render("document.qmd", output_format = "pdf")

Change your mental model

Source

A blank Word document

Output

A blank Word document

Change your mental model

---
title: "ggplot2 demo"
author: "Norah Jones"
date: "5/22/2021"
format: 
  html:
    fig-width: 8
    fig-height: 4
    code-fold: true
---

## Air Quality

@fig-airquality further explores the impact of temperature 
  on ozone level.

```{r}
#| label: fig-airquality
#| fig-cap: Temperature and ozone level.
#| warning: false

library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 

  geom_point() + 
  geom_smooth(method = "loess"
)
```

A .qmd is a plain text file

  • Metadata (YAML)
format: html
engine: knitr
format: html
engine: jupyter
  • Code
```{r}
library(dplyr)
mtcars |> 
  group_by(cyl) |> 
  summarize(mean = mean(mpg))
```
```{python}
from siuba import *
(mtcars
  >> group_by(_.cyl)
  >> summarize(avg_mpg = _.mpg.mean()))
```
  • Text
# Heading 1
This is a sentence with some **bold text**, *italic text* and an 
![image](image.png){fig-alt="Alt text for this image"}.

Metadata: YAML

The YAML metadata or header is:

processed in many stages of the rendering process and can influence the final document in many different ways. It is placed at the very beginning of the document and is read by each of Pandoc, Quarto and knitr. Along the way, the information that it contains can affect the code, content, and the rendering process.

YAML

---
title: "My Document"
format: 
  html:
    toc: true
    code-fold: true
---

Markdown

Quarto is based on Pandoc and uses its variation of markdown as its underlying document syntax. Pandoc markdown is an extended and slightly revised version of John Gruber’s Markdown syntax.

Markdown is a plain text format that is designed to be easy to write, and, even more importantly, easy to read

Text Formatting

Markdown Syntax Output
*italics* and **bold**
italics and bold
superscript^2^ / subscript~2~
superscript2 / subscript2
~~strikethrough~~
strikethrough
`verbatim code`
verbatim code

Headings

Markdown Syntax Output
# Header 1

Header 1

## Header 2

Header 2

### Header 3

Header 3

#### Header 4

Header 4

##### Header 5
Header 5
###### Header 6
Header 6

Code

```{r}
#| output-location: column
#| label: fig-airquality
#| fig-cap: Temperature and ozone level.
#| warning: false

library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess"
)
```

Figure 1: Temperature and ozone level.

Code, more than just R

```{python}
#| eval: false
#| label: fig-polar
#| fig-cap: "A line plot on a polar axis"

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

What about the CLI?

Quarto is a command line interface (CLI) that renders plain text formats (.qmd, .rmd, .md) OR mixed formats (.ipynb/Jupyter notebook) into static PDF/Word/HTML reports, books, websites, presentations and more

thomasmock$ quarto --help

  Usage:   quarto
  Version: 1.0.36

  Description:
    Quarto CLI

  Options:
    -h, --help     - Show this help.                            
    -V, --version  - Show the version number for this program.  

  Commands:
    render          [input] [args...]   - Render input file(s) to various document types.            
    preview         [file] [args...]    - Render and preview a document or website project.          
    serve           [input]             - Serve a Shiny interactive document.                        
    create-project  [dir]               - Create a project for rendering multiple documents          
    convert         <input>             - Convert documents to alternate representations.            
    pandoc          [args...]           - Run the version of Pandoc embedded within Quarto.          
    run             [script] [args...]  - Run a TypeScript, R, Python, or Lua script.                
    install         <type> [target]     - Installs an extension or global dependency.                
    publish         [provider] [path]   - Publish a document or project. Available providers include:
    check           [target]            - Verify correct functioning of Quarto installation.         
    help            [command]           - Show this help or the help of a sub-command.    

Our Turn

  • In RStudio, open materials/workshop/01-intro/history.qmd
  • Render with the RStudio Render -> button
  • Look at it and compare to Wikipedia source


  • Move to the integrated terminal and execute:

  • Render via terminal with quarto render history.qmd --to pdf

  • Compare to the HTML version