Part 2: HTML Outputs

It all starts with a qmd file

flowchart LR
  A[qmd] --> B(Jupyter)
  A --> C(knitr)
  B --> D[md]
  C --> D
  D --> E(pandoc)
  E --> F[pdf]
  E --> G[html]
  E --> H[docx]
  
  classDef yellowBox fill:#FFFFC0
  class B,C,E yellowBox

Anatomy of a Quarto Document

---
title: "The Palmer Penguins"
format: html
---

## About the Penguins

The palmerpenguins data contains size measurements for three penguin species 
observed on three islands in the 
[Palmer Archipelago](https://en.wikipedia.org/wiki/Palmer_Archipelago), 
Antarctica.

![](images/palmer-archipelago.jpg)

There are three species of penguins in the dataset:

```{r}
library(dplyr)
penguins |> 
  group_by(island, species) |> 
  summarize(count = n())
```

## Body Mass Comparison

Adelie and Chinstrap penguins have approximately the same body mass. 
Gentoo penguins however are noticeably bigger.

```{r}
library(ggplot2)
ggplot(penguins, aes(x = species, y = body_mass)) +
  geom_boxplot()
```

Data Analysis Notebook

https://ucanr-igis.github.io/tech_notes/cropdist-dwr-local-stats.html

Callout Blocks

Quarto has several ‘callout blocks’ that you can use to add text boxes.

::: {.callout-important}
## Don't forget to add a user-agent to your `httr2` header

The __User-Agent__ header is an HTTP header intended to identify the user agent responsible 
for making a given HTTP request. 
:::

↓ ↓ ↓

Don’t forget to add a user-agent to your httr2 header

The User-Agent header is an HTTP header intended to identify the user agent responsible for making a given HTTP request.

TIPS:
other callout types: note, warning, tip, caution
for a collapsable callout, add collapse = TRUE

Hyperlinks

Hyperlinks are easy to add to text.

For more info, please visit our [training page](https://igis.ucanr.edu/Training/).

↓ ↓ ↓

For more info, please visit our training page.

Tip

If you want a hyperlink to open in a new tab, add the target attribute:

For more info, please visit our [training page](https://igis.ucanr.edu/Training/){target='_blank'}.

Footnotes

Growers in the Valley may have to manage one additional generation of Navel orangeworm each 
season under climate change [^1].

[^1]: based on a degree day model with project climate data, see Pathak et al (2021)

↓ ↓ ↓

Growers in the Valley may have to manage one additional generation of Navel orangeworm each season under climate change ¹.

Footnote Tips

footnotes will be auto-numbered
on a HTML document, footnote numbers get hyperlinked to the note

Markdown Tables

|County       | Year           | Outreach                           |New Reg|
|-------------|:--------------:|:-----------------------------------|------:|
|Trinity      | 2024           | Master Gardener meetings, FaceBook | 68    |
|Humboldt     | 2023-24        | county fair, libraries, Pow Wow    | 30    |
|Del Norte    | 2024           | river fest, radio ads              | 42    |
|Siskiou      | 2025           | field day, 4H group, libraries     | 17    |

↓ ↓ ↓

County	Year	Outreach	New Reg
Trinity	2024	Master Gardener meetings, FaceBook	68
Humboldt	2023-24	county fair, libraries, Pow Wow	30
Del Norte	2024	river fest, radio ads	42
Siskiou	2025	field day, 4H group, libraries	17

Add a blank line

Sometimes, you just want an actual…

blank

line!!

Your best friend: \

Spread

\

this

\ 

out!

Interactive Plots

library(plotly)
plot_ly(data = penguins, x = ~bill_len, y = ~bill_dep, color = ~species) |> 
  layout(title = "Penguins: Bill depth vs. length", 
         xaxis = list(title = "length"),
         yaxis = list(title = "depth"))

↓ ↓ ↓

Author Info

---
title: "Deficit Irrigation in Pistachio"
author:
  - name: Andy Lyons
    orcid: 0000-0002-7505-6709
    affiliations:
      - name: IGIS, UC Division of Agriculture and Natural Resources
        url: https://igis.ucanr.edu/
    corresponding: true
    email: andlyons@ucanr.edu
---

↓ ↓ ↓

Paged Tables

---
format:
  html:
    df-print: paged
---

↓ ↓ ↓

Table-of-Contents, Code-Links, Code-Tools, Single File

---
format:
  html:
    ## To have a TOC, add the following
    toc: true
    toc-depth: 2
    toc-expand: 3
    
    ## Add hyperlinks in code chunks to online help pages
    code-link: true

    ## Embed the qmd file
    code-tools: true

    ## Create a single HTML file
    embed-resources: true
---

All YAML options:
https://quarto.org/docs/reference/formats/html.html

e-Book

Quarto e-Book Features:

professionally designed themes
light & dark mode
table of contents pane
previous / next chapter buttons

citation shortcodes
cross-references
GitHub links
3rd party plugins

search widget
download as pdf & epub
author info in sidebar

Example:
https://ucanr-igis.github.io/agroclimate-cookbook/

Anatomy of an e-Book

The structure of an e-Book is setup in a file called _quarto.yml.

project:
  type: book
  output-dir: "docs"

editor: source

book:
  title: "AgroClimate Cookbook"
  subtitle: "Code recipes for working with weather-driven agricultural metrics"
  editor:
   - Andy Lyons
  contributor:
   - Chloe Faehndrich
  date: today
  cover-image: "cover.png"
  chapters:
    - index.qmd
    - 01_data-wrangling.qmd
    - 02_weather-data.qmd
    - 03_simple-agroclim-metrics.qmd
    - 04_degday.qmd
    - 05_chill.qmd
    - 06_agroclimate-rasters.qmd
    - 07_modeled-climate-data.qmd
    - 08_climate-analogues.qmd
    - 99_other.qmd
    - references.qmd
  repo-url: https://github.com/ucanr-igis/agroclimate-cookbook/
  repo-actions: 
    - issue
    - edit

bibliography: references.bib

comments:
  hypothesis:
    theme: clean
    openSidebar: false

format:
  html:
    theme: cosmo
    df-print: paged
    toc-depth: 4
    toc-expand: 4
    link-external-icon: true
    link-external-newwindow: true
    code-link: true

  # We will add support for epub and pdf when it is a little more developed
  # pdf:
  #   documentclass: scrreprt

Quarto Reports

Have a lot of data? Create data-driven reports programmatically!

Workflow for a Single-Page Report

Loop through rows in a table
For each row, use functions from htmltools to generate the HTML output
Quarto renders the whole thing to HMTL
Use headings & TOC for basic navigation

Example:
https://ucanr-igis.github.io/sketchbook/movie-catalog.html

Parameterized Reports

To create a separate HTML file for each record, Google ‘parameterized Quarto reports’.

Presentations

Quarto can generate presentations in 3 formats:

Presenting revealjs Slides

`f`	full screen mode (`esc` to escape)
`s`	open Speaker View
`alt + click`	zoom in
`o`	overview mode
`e`	toggle back/forth to pdf export mode
`m`	toggle menu
`?`	see more tips

More Presentation Tips

See: https://quarto.org/docs/presentations/revealjs/presenting.html

Other HTML Outputs from Quarto

Websites:
https://nasa-openscapes.github.io/

Scrollytelling:
https://closeread.dev/gallery/

Dashboards:
https://quarto.org/docs/gallery/#dashboards

Getting Help: Guides, Community, Documentation

Tips ’n Tricks

https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day

Getting Help: GenAI

Tips:

ask a clear, straight forward question
provide context about the setting and your goal
make sure you’re in compliance with your organization’s GenAI policies

“I’m making a revealjs slide deck with Quarto, which I will present on a projector in a classroom. How do I make the font bigger on all of my slides, so students in the back of the room can see everything clearly.”

Quarto Showcase

It all starts with a qmd file

Anatomy of a Quarto Document

Data Analysis Notebook

Callout Blocks

Hyperlinks

Footnotes

Markdown Tables

Add a blank line

Interactive Plots

Author Info

Paged Tables

Table-of-Contents, Code-Links, Code-Tools, Single File

e-Book

Anatomy of an e-Book

Quarto Reports

Presentations

Presenting revealjs Slides

Other HTML Outputs from Quarto

Getting Help: Guides, Community, Documentation

Tips ’n Tricks

Getting Help: GenAI

THE END!