Quarto & LaTeX

.title[
# Quarto & LaTeX
]
.subtitle[
## Lecture 5
]
.author[
### <br>Louis SIRUGUE
]
.date[
### CPES 2 - Fall 2023
]

---

### Quick reminder

<center><h4> The 3 core components of the ggplot() function </h4></center>

<table class="table table-hover table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<caption></caption>
 <thead>
  <tr>
   <th style="text-align:left;"> Component </th>
   <th style="text-align:center;"> Contribution </th>
   <th style="text-align:center;"> Implementation </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Data </td>
   <td style="text-align:center;"> Underlying values </td>
   <td style="text-align:center;"> ggplot(data, | data %&gt;% ggplot(., </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Mapping </td>
   <td style="text-align:center;"> Axis assignment </td>
   <td style="text-align:center;"> aes(x = V1, y = V2, ...)) </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Geometry </td>
   <td style="text-align:center;"> Type of plot </td>
   <td style="text-align:center;"> + geom_point() + geom_line() + ... </td>
  </tr>
</tbody>
</table>

* Any **other element** should be added with a **`+` sign**

```r
ggplot(data, aes(x = V1, y = V2)) + 
  geom_point() + geom_line() +
  anything_else()
```

---

### Quick reminder

.pull-left[
<p style = "margin-bottom:1.75cm;">
<center><h4> Main customization tools </h4></center>
<table class="table table-hover table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<caption></caption>
 <thead>
  <tr>
   <th style="text-align:left;"> Item to customize </th>
   <th style="text-align:left;"> Main functions </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Axes </td>
   <td style="text-align:left;"> scale_[x/y]_[continuous/discrete] </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Baseline theme </td>
   <td style="text-align:left;"> theme_[void/minimal/.../dark]() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Annotations </td>
   <td style="text-align:left;"> geom_[[h/v]line/text](), annotate() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Theme </td>
   <td style="text-align:left;"> theme(axis.[line/ticks].[x/y] = ..., </td>
  </tr>
</tbody>
</table>
]

.pull-right[
<center><h4> Main types of geometry </h4></center>
<table class="table table-hover table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<caption></caption>
 <thead>
  <tr>
   <th style="text-align:left;"> Geometry </th>
   <th style="text-align:center;"> Function </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Bar plot </td>
   <td style="text-align:center;"> geom_bar() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Histogram </td>
   <td style="text-align:center;"> geom_histogram() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Area </td>
   <td style="text-align:center;"> geom_area() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Line </td>
   <td style="text-align:center;"> geom_line() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Density </td>
   <td style="text-align:center;"> geom_density() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Boxplot </td>
   <td style="text-align:center;"> geom_boxplot() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Violin </td>
   <td style="text-align:center;"> geom_violin() </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Scatter plot </td>
   <td style="text-align:center;"> geom_point() </td>
  </tr>
</tbody>
</table>
]

---

### Quick reminder

<center><h4> Main types of aesthetics </h4></center>

<table class="table table-hover table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<caption></caption>
 <thead>
  <tr>
   <th style="text-align:left;"> Argument </th>
   <th style="text-align:left;"> Meaning </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> alpha </td>
   <td style="text-align:left;"> opacity from 0 to 1 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> color </td>
   <td style="text-align:left;"> color of the geometry </td>
  </tr>
  <tr>
   <td style="text-align:left;"> fill </td>
   <td style="text-align:left;"> fill color of the geometry </td>
  </tr>
  <tr>
   <td style="text-align:left;"> size </td>
   <td style="text-align:left;"> size of the geometry </td>
  </tr>
  <tr>
   <td style="text-align:left;"> shape </td>
   <td style="text-align:left;"> shape for geometries like points </td>
  </tr>
  <tr>
   <td style="text-align:left;"> linetype </td>
   <td style="text-align:left;"> solid, dashed, dotted, etc. </td>
  </tr>
</tbody>
</table>
]

<ul>
  <li>If specified <b>in the geometry</b></li>
  <ul>
    <li>It will apply uniformly to <b>all the geometry</b></li>
  </ul>
</ul>
 
<p style = "margin-bottom:1cm;"></p>

<ul>
  <li>If assigned to a variable <b>in aes</b></li>
  <ul>
    <li>It will <b>vary with the variable</b> according to a scale documented in legend</li>
  </ul>
</ul>
]

<br>

```r
ggplot(data, aes(x = V1, y = V2, size = V3)) + 
  geom_point(color = "steelblue", alpha = .6)
```

---

### Warm up practice

<ul>
  <li>Today we're going to use the <a href = "https://www.insee.fr/fr/statistiques/2540004?sommaire=4767262"><b><i>"Fichier des prénoms"</i></b></a></li>
  <ul>
    <li>This is where the INSEE reports the <b>birth count</b> associated with <b>each first name in France</b></li>
    <li>It is <b>virtually exhaustive from 1946</b>, when the INSEE was founded</li>
  </ul>
</ul>

```r
names <- read.csv("C:/User/Documents/fichier_prenoms.csv", sep = ";", encoding = "UTF-8")
str(names)
```

```
## 'data.frame':	686538 obs. of  4 variables:
##  $ sexe    : int  1 1 1 1 1 1 1 1 1 1 ...
##  $ preusuel: chr  "_PRENOMS_RARES" "_PRENOMS_RARES" "_PRENOMS_RARES" "_PRENOMS_RARES" ...
##  $ annais  : chr  "1900" "1901" "1902" "1903" ...
##  $ nombre  : int  1249 1342 1330 1286 1430 1472 1451 1514 1509 1526 ...
```

* **`sexe`:** `1` for Male and `2` for Female
 * **`preusuel`:** first name *(`_PRENOMS_RARES` gathers rare first names for anonymity considerations)*
 * **`annais`:** birth year *(`XXXX` groups unknown birth years)*
 * **`nombre`:** number of newborns for the corresponding sex/name/year

---

### Warm up practice

#### 1) Recode the `sexe` variable with `Male` and `Female` instead of `1` and `2`

#### 2) Filter out observations for which `annais` is `XXXX` and convert `annais` to numeric

#### 3) Summarise your data into the total number of births per year

#### 4) Plot the evolution of the number of births over time using a line geometry

<center><h3><i>You've got 10 minutes!</i></h3></center>

---

### Solution

#### Load the necessary packages

```r
library(dplyr)
library(ggplot2)
```

#### 1) Recode the `sexe` variable with `Male` and `Female` instead of `1` and `2`

```r
names %>%
* mutate(sexe = ifelse(sexe == 1, "Male", "Female"))
```

#### 2) Filter out observations for which `annais` is `XXXX` and convert `annais` to numeric

```r
names %>%
  mutate(sexe = ifelse(sexe == 1, "Male", "Female")) %>%
* filter(annais != "XXXX") %>%
* mutate(annais = as.numeric(annais))
```

---

### Solution

#### 3) Summarise your data into the total number of births per year

```r
names %>%
  mutate(sexe = ifelse(sexe == 1, "Male", "Female")) %>%
  filter(annais != "XXXX") %>%
  mutate(annais = as.numeric(annais)) %>%
* group_by(annais) %>%
* summarise(n = sum(nombre))
```

```
## # A tibble: 8 × 2
##   annais      n
##    <dbl>  <int>
## 1   1900 415040
## 2   1901 453456
## 3   1902 465791
## 4   1903 468810
## 5   1904 478962
## 6   1905 489697
## 7   1906 501745
## 8   1907 501025
```

---

### Solution

#### 4) Plot the evolution of the number of births over time using a line geometry

```r
names %>%
  mutate(sexe = ifelse(sexe == 1, "Male", "Female")) %>%
  filter(annais != "XXXX") %>%
  mutate(annais = as.numeric(annais)) %>%
  group_by(annais) %>%
  summarise(n = sum(nombre)) %>%
* ggplot(aes(x = annais, y = n)) + geom_line()
```

---

<h3>Today we learn how to make reports with Quarto!</h3>

<ul style = "margin-left:1.5cm;list-style: none">
  <li><b>1. Basic principles</b></li>
  <ul style = "list-style: none">
    <li>1.1. What is Quarto?</li>
    <li>1.2. YAML header</li>
    <li>1.3. Code chunks</li>
    <li>1.4. Text formatting</li>
    <li>1.5. Run and render your code</li>
  </ul>
</ul>

<ul style = "margin-left:1.5cm;list-style: none">
  <li><b>2. Useful features</b></li>
  <ul style = "list-style: none">
    <li>2.1. Inline code</li>
    <li>2.2. Tables</li>
    <li>2.3. Preset themes</li>
    <li>2.4. Report parameters</li>
  </ul>
</ul>

]

<ul style = "margin-left:-1cm;list-style: none">
  <li><b>3. LaTeX for equations</b></li>
  <ul style = "list-style: none">
    <li>3.1. What is LaTeX?</li>
    <li>3.2. LaTeX syntax</li>
    <li>3.3. Large equations</li>
  </ul>
</ul>
 
<p style = "margin-bottom:1cm;"></p>

<ul style = "margin-left:-1cm;list-style: none"><li><b>4. Wrap up!</b></li></ul>
]

---

<h3>Today we learn how to make reports with Quarto!</h3>

---

### 1. Basic principles

#### 1.1. What is Quarto?

<ul>
  <li><b>Quarto</b> is an open-source publishing system in which you can both <b>write/run code</b> (R/Python/Julia/Observable) and <b>edit text</b></li>
</ul>

<ul>
  <li>Here are some examples of Quarto documents</li>
  <ul>
  <li><a href="https://louissirugue.github.io/metrics_on_R/homework/guidelines.html">Homework</a></li>
  <li><a href="https://www.louissirugue.com">Website</a></li>
  <li><a href="https://quarto.org/docs/presentations/revealjs/demo/#/title-slide">Slides</a></li>
  </ul>
</ul>

<ul>
  <li>It is structured around <b>3 types of content</b>:</li>
  <ul>
  <li><b>Code chunks</b> to run and render the output</li>
  <li><b>Editable text</b> to display</li>
  <li><b>YAML metadata</b> for the Quarto build process</li>
  </ul>
</ul>

<center><h4><i>&#10140; Let's go through them by creating our first Quarto document!</i></h4></center>

---

### 1. Basic principles

#### 1.1. What is Quarto?

<center>&#10140; Click on <b>File > New File > Quarto document</b></center>

<ol>
  <li>Fill out the information and select <b>HTML</b></li>
  <li style = "margin-top:7cm;">Click on <b>OK</b></li>
</ol>
]

---

### 1. Basic principles

#### 1.1. What is Quarto?

* It creates a **template** containing the **3 types of content**:
 
--

<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YAML header &#10140;</b>

<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Code chunks &#10140;</b>
]

---

### 1. Basic principles

#### 1.2. YAML header

* The **YAML header** contains general information related to the **file configuration**:

<ul>
<ul>
<li>Title/subtitle (in quotes)</li>
<li>Author/date (in quotes)</li>
<li>Output type (html/pdf)</li>
<li>Editor configuration (use source, not visual)</li>
<li>...</li>
</ul>
</ul>

* It should be specified at the **very beginning** of the document and surrounded by **three dashes** like this:

````markdown
---
title: "My first Quarto document"
subtitle: "A step-by-step introduction"
author: "Louis Sirugue"
date: "10/02/2023"
format: html
editor: source
---
````
---

### 1. Basic principles

#### 1.3. Code chunks

* **Code chunks are blocks of R code** that can be run when working on and rendering the .qmd file
 
--

* You can insert a code chunk using `Ctrl + Alt + i` or by typing the **backticks chunk delimiters** as follows
 
````markdown
```{r}
1+1
```
````

<ul>
  <li>When <b>rendering</b> the document, R will <b>execute</b> the code</li>
  <ul>
    <li>Both the <b>code</b> and the <b>output</b> will appear in the document like so:</li>
  </ul>
</ul>

```r
1+1
```

```
## [1] 2
```

---

### 1. Basic principles

#### 1.3. Code chunks

* The **content** to be **displayed** from the code chunk can be specified in **chunk options**
  * For instance, to display only the output and not the code chunk, you can set `echo` to `FALSE`

````markdown
```{r, echo = F}
1+1
```
````

* And the output will only be

```
## [1] 2
```

* Instead of

```r
1+1
```

```
## [1] 2
```

---

### 1. Basic principles

#### 1.3. Code chunks

<center><h4> Chunk options to know </h4></center>

<table class="table table-hover table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<caption></caption>
 <thead>
  <tr>
   <th style="text-align:left;text-align: center;"> Option </th>
   <th style="text-align:center;text-align: center;"> Default </th>
   <th style="text-align:left;text-align: center;"> Effect </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> eval </td>
   <td style="text-align:center;"> TRUE </td>
   <td style="text-align:left;"> Whether to evaluate the code and include its results </td>
  </tr>
  <tr>
   <td style="text-align:left;"> echo </td>
   <td style="text-align:center;"> TRUE </td>
   <td style="text-align:left;"> Whether to display code along with its results </td>
  </tr>
  <tr>
   <td style="text-align:left;"> warning </td>
   <td style="text-align:center;"> TRUE </td>
   <td style="text-align:left;"> Whether to display warnings </td>
  </tr>
  <tr>
   <td style="text-align:left;"> error </td>
   <td style="text-align:center;"> TRUE </td>
   <td style="text-align:left;"> Whether to display errors </td>
  </tr>
  <tr>
   <td style="text-align:left;"> message </td>
   <td style="text-align:center;"> TRUE </td>
   <td style="text-align:left;"> Whether to display messages </td>
  </tr>
  <tr>
   <td style="text-align:left;"> results </td>
   <td style="text-align:center;"> 'markup' </td>
   <td style="text-align:left;"> 'hide' to hide the output </td>
  </tr>
  <tr>
   <td style="text-align:left;"> fig.width </td>
   <td style="text-align:center;"> 7 </td>
   <td style="text-align:left;"> Width in inches for plots created in chunk </td>
  </tr>
  <tr>
   <td style="text-align:left;"> fig.height </td>
   <td style="text-align:center;"> 7 </td>
   <td style="text-align:left;"> Height in inches for plots created in chunk </td>
  </tr>
</tbody>
</table>

---

### 1. Basic principles

#### 1.3. Code chunks

* For an option to apply to the <b>whole document</b>, set it up in the YAML header:
 
````markdown
---
title: "My first Quarto document"
format: html
execute:
  echo: false
  warning: false
---
````

* For an option to apply to a <b>specific chunk</b>, two possibilities:
 
.pull-left[
````markdown
```{r, echo = F, warning = F}
1+1
```
````
]
.pull-right[
````markdown
```{r}
#| echo: false
#| warning: false
1+1
```
````
]

---

### 1. Basic principles

#### 1.4. Text formatting

<ul>
  <li>Quarto is not only about rendering code but also about <b>writing</b> actual <b>text</b></li>
  <ul>
    <li>You can write <b>paragraphs</b> as you would normally do on a typical report</li>
    <li>And Quarto provides convenient ways to <b>format</b> your text</li>
  </ul>
</ul>

<ul>
  <li>Basic formatting includes:</li>
  <ul>
    <li>Italics</li>
    <li>Bold</li>
    <li>Hyperlinks</li>
    <li>Headers</li>
    <li>Block quotes</li>
    <li>Un/ordered lists</li>
    <li>...</li>
  </ul>
</ul>

<ul>
  <li>Unlike most text editing software, in <i>source</i> Quarto <b>text formatting</b> isn't about clicking on dedicated buttons</li>
  <ul>
    <li>It <b>relies on symbols</b> that should be written along with the text</li>
  </ul>
</ul>

---

### 1. Basic principles

#### 1.4. Text formatting

`Plain text  ⠀`  
`End a line with two spaces for line break`

`*italics*`

`**bold**`

`# Header 1`

`## Header 2`

...

`###### Header 6`

`[link](https://www.rstudio.com)`

]

Plain text  
End a line with two spaces for line break

*italics*

**bold**

# Header 1

## Header 2

...

###### Header 6

[link](https://www.rstudio.com)

]

---

### 1. Basic principles

#### 1.4. Text formatting

`> block quote`

Horizontal rule:

`***`

`* unordered list`  
`* item 2`  
&nbsp;&nbsp;&nbsp;&nbsp;`+ sub-item 1`  
&nbsp;&nbsp;&nbsp;&nbsp;`+ sub-item 2`

`1. ordered list`  
`2. item 2`  
&nbsp;&nbsp;&nbsp;&nbsp;`+ sub-item 1`  
&nbsp;&nbsp;&nbsp;&nbsp;`+ sub-item 2`

]

> block quote

Horizontal rule:

***

* unordered list
* item 2
 + sub-item 1
 + sub-item 2
 
1. ordered list
2. item 2
 + sub-item 1
 + sub-item 2
 
]

---

### 1. Basic principles

#### 1.5. Run and render your code

<ul>
  <li>To <b>execute</b> the content of a <b>code</b> chunk in Quarto</li>
  <ul>
    <li>Click on the <b>green play button</b> at the top right of the chunk <img src = "current_chunk.png" width = "20"/></li>
  </ul>
</ul>
 
--

<ul>
    <li>You can also:</li>
    <ul>
      <li><b>Run all chunks above</b> the current chunk <img src = "all_chunks_above.png" width = "20"/></li>
      <li><b>Run all chunks</b> from the Run drop down menu at the top right (or Ctrl+Alt+R)</li>
    </ul>
  </ul>
  
  <center><img src = "run_all.png" width = "185"/></center>
  
]

<ul>
    <li>To choose where the <b>output</b> must be <b>displayed</b>, click on the <i>"Options"</i> button</li>
    <ul>
      <li><b>Chunk output inline</b> (below the chunk)</li>
      <li><b>Chunk output in console</b></li>
    </ul>                             
  </ul>
  
  <center><img src = "inline.png" width = "150"/></center>
  
]
  
---

### 1. Basic principles

#### 1.5. Run and render your code

* To **render** a Quarto file, click on the **render button** <img src = "render.png" width = "50"/> (`ctrl + shift + k`)
 
--

---

<h3>Overview</h3>

<ul style = "margin-left:1.5cm;list-style: none">
  <li><b>1. Basic principles &#10004;</b></li>
  <ul style = "list-style: none">
    <li>1.1. What is Quarto?</li>
    <li>1.2. YAML header</li>
    <li>1.3. Code chunks</li>
    <li>1.4. Text formatting</li>
    <li>1.5. Run and render your code</li>
  </ul>
</ul>

]

<ul style = "margin-left:-1cm;list-style: none"><li><b>4. Wrap up!</b></li></ul>
]

---

<h3>Overview</h3>

]

---

### 2. Useful features

#### 2.1. Inline code

* A big advantage of Quarto is that you can <b>automate</b> your <b>reports</b>

<center><h4>Why is it useful?</h4></center>

<ul>
  <li>You might figure out quite late in the process that you need to <b>make a change</b> at the beginning of the analysis</li>
  <ul>
    <li>A change that potentially <b>impacts everything</b> that comes after in the report</li>
  </ul>
</ul>

<ul>
  <li>Imagine that you forgot to filter out an irrelevant group of observations at the beginning</li>
  <ul>
    <li>If you simply filter your data at the beginning in a code chunk</li>
    <li>All your tables and figures will <b>update automatically</b></li>
  </ul>
</ul>

<ul>
  <li>But what if you wrote some of your results <b>within paragraphs?</b></li>
  <ul>
    <li>In a usual text formatting software you would have to update everything manually</li>
    <li>But here you can also make it <b>update automatically!</b></li>
  </ul>
</ul>

---

### 2. Useful features

#### 2.1. Inline code
 
 * Consider the following report :

---

### 2. Useful features

#### 2.1. Inline code

* Imagine that there is a problem with the data and that you must use an updated version

---

### 2. Useful features

#### 2.1. Inline code

<ul>
  <li>All the results were updated automatically but not the text</li>
</ul>

<ul>
  <ul>
    <li>That's where <b>inline code</b> comes in!</li>
  </ul>
</ul>

<p style = "margin-bottom:.75cm;">
 
&#10140; **Inline code** allows to include the output of some **R code within text areas** of your report

* R code outside code chunks should be included between backticks:
  * Surrounding code with **backticks** in a text area will **change** the **format** to that of the code chunk
  * **Adding** the **`r`** letter right after the first backtick will **show** the **output** of the code instead of the code

```r
`paste("a", "b", sep = "-")`
```

```r
`r paste("a", "b", sep = "-")`
```

]

`paste("a", "b", sep = "-")`

a-b
 
]

---

### 2. Useful features

#### 2.1. Inline code

* With inline code, **paragraphs** also do **update automatically**:

---

### 2. Useful features

#### 2.2. Tables

* Displaying a table as a raw output can be unpleasant to read
 
--

```r
head(mtcars)
```

```
##                    mpg cyl disp  hp drat    wt  qsec vs am gear carb
## Mazda RX4         21.0   6  160 110 3.90 2.620 16.46  0  1    4    4
## Mazda RX4 Wag     21.0   6  160 110 3.90 2.875 17.02  0  1    4    4
## Datsun 710        22.8   4  108  93 3.85 2.320 18.61  1  1    4    1
## Hornet 4 Drive    21.4   6  258 110 3.08 3.215 19.44  1  0    3    1
## Hornet Sportabout 18.7   8  360 175 3.15 3.440 17.02  0  0    3    2
## Valiant           18.1   6  225 105 2.76 3.460 20.22  1  0    3    1
```

* The `kable()` function from the `knitr` package allows to display tables in a nice way

```r
library("knitr")
```

---

### 2. Useful features

#### 2.2. Tables

* You just need to put the table you want to display inside the `kable()` function

```r
kable(head(mtcars), caption = "First rows of the dataset")
```

<table class="table table-hover table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<caption>First rows of the dataset</caption>
 <thead>
  <tr>
   <th style="text-align:left;">   </th>
   <th style="text-align:right;"> mpg </th>
   <th style="text-align:right;"> cyl </th>
   <th style="text-align:right;"> disp </th>
   <th style="text-align:right;"> hp </th>
   <th style="text-align:right;"> drat </th>
   <th style="text-align:right;"> wt </th>
   <th style="text-align:right;"> qsec </th>
   <th style="text-align:right;"> vs </th>
   <th style="text-align:right;"> am </th>
   <th style="text-align:right;"> gear </th>
   <th style="text-align:right;"> carb </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Mazda RX4 </td>
   <td style="text-align:right;"> 21.0 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 160 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.90 </td>
   <td style="text-align:right;"> 2.62 </td>
   <td style="text-align:right;"> 16.46 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Mazda RX4 Wag </td>
   <td style="text-align:right;"> 21.0 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 160 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.90 </td>
   <td style="text-align:right;"> 2.88 </td>
   <td style="text-align:right;"> 17.02 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Datsun 710 </td>
   <td style="text-align:right;"> 22.8 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 108 </td>
   <td style="text-align:right;"> 93 </td>
   <td style="text-align:right;"> 3.85 </td>
   <td style="text-align:right;"> 2.32 </td>
   <td style="text-align:right;"> 18.61 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Hornet 4 Drive </td>
   <td style="text-align:right;"> 21.4 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 258 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.08 </td>
   <td style="text-align:right;"> 3.21 </td>
   <td style="text-align:right;"> 19.44 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Hornet Sportabout </td>
   <td style="text-align:right;"> 18.7 </td>
   <td style="text-align:right;"> 8 </td>
   <td style="text-align:right;"> 360 </td>
   <td style="text-align:right;"> 175 </td>
   <td style="text-align:right;"> 3.15 </td>
   <td style="text-align:right;"> 3.44 </td>
   <td style="text-align:right;"> 17.02 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 2 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Valiant </td>
   <td style="text-align:right;"> 18.1 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 225 </td>
   <td style="text-align:right;"> 105 </td>
   <td style="text-align:right;"> 2.76 </td>
   <td style="text-align:right;"> 3.46 </td>
   <td style="text-align:right;"> 20.22 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
</tbody>
</table>

---

### 2. Useful features

#### 2.2. Tables

* For **big tables**, one solution is the `datatable()` function from the `DT` package
 
<p style = "margin-bottom:1cm;">

--
  
 * As with `kable()`, you just need to put the table you want to display inside the `datatable()` function

```r
library("DT")
datatable(mtcars)
```

<ul>
  <li>The output will be an <b>interactive table</b> which allows to:</li>
  <ul>
    <li>Navigate in the table by displaying a limited number of rows at a time</li>
    <li>Choose the number of rows to display</li>
    <li>Search for a given element in the table</li>
  </ul>
</ul>

* You can select the default number of rows to display as follows

```r
datatable(mtcars, options = list(pageLength = 5))
```

---

### 2. Useful features

#### 2.2. Tables

<div class="datatables html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-23be8dea5453d9870020" style="width:100%;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-23be8dea5453d9870020">{"x":{"filter":"none","vertical":false,"data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"],[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.09999999999999,120.1,318,304,350,400,79,120.3,95.09999999999999,351,145,301,121],[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>mpg<\/th>\n      <th>cyl<\/th>\n      <th>disp<\/th>\n      <th>hp<\/th>\n      <th>drat<\/th>\n      <th>wt<\/th>\n      <th>qsec<\/th>\n      <th>vs<\/th>\n      <th>am<\/th>\n      <th>gear<\/th>\n      <th>carb<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":5,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4,5,6,7,8,9,10,11]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[5,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>

<center><i>&#10140; Try to search for <b>"Toyota"</b> for instance</i></center>

---

### 2. Useful features

#### 2.3. Preset themes

<ul>
  <li>The <b>default theme</b> of Quarto might seem <b>a bit dull</b></li>
  <ul>
    <li>The look of your reports can easily be <b>enhanced</b> using a variety of <b>preset</b> themes</li>
    <li>The preset theme to use should be specified in the <b>YAML header</b></li>
    <li>Add a theme argument to the html_document format specified as output</li>
  </ul>
</ul>

<p style = "margin-bottom:1cm;">
 
````markdown
---
title: "My first Quarto document"
subtitle: "A step-by-step introduction"
author: "Louis Sirugue"
date: "10/02/2023"
format: html
editor: source
theme: "cosmo"
---
````

<ul>
  <li>When using themes from downloaded packages, the way you set the theme can be slightly different</li>
  <ul>
    <li>Check the online documentation</li>
  </ul>
</ul>

---

### 2. Useful features

#### 2.3. Preset themes

.pull-left[
<center><h4 style = "margin-bottom:0cm;">yeti</h4><br><br>
<img src = "yeti.png" width = "600"/></center>
]

.pull-right[
<center><h4 style = "margin-bottom:0cm;">sandstone</h4><br><br>
<img src = "sandstone.png" width = "600"/></center>
]

---

### 2. Useful features

#### 2.3. Preset themes

.pull-left[
<center><h4 style = "margin-bottom:0cm;">darkly</h4><br><br>
<img src = "darkly.png" width = "600"/></center>
]

.pull-right[
<center><h4 style = "margin-bottom:0cm;">slate</h4><br><br>
<img src = "slate.png" width = "600"/></center>
]

---

### 2. Useful features

#### 2.3. Preset themes

.pull-left[
<center><h4 style = "margin-bottom:0cm;">minty</h4><br><br>
<img src = "minty.png" width = "600"/></center>
]

.pull-right[
<center><h4 style = "margin-bottom:0cm;">lux</h4><br><br>
<img src = "lux.png" width = "600"/></center>
]

---

### Practice

<p style = "margin-bottom:2cm;"></p>
<center><b><i>Reproduce the following html using Quarto</i></b></center>

<p style = "margin-bottom:.25cm;"></p>
<center><button onclick="copyText()">Copy raw output</button></center>
<script>
  function copyText() {
    navigator.clipboard.writeText
      ("Report on the first name LOUIS \nYour name \nOctober 2, 2023 \n\n1. Setup \n\nThe packages needed in a qmd must always be loaded in a code chunk at the beginning of the file. \n\nlibrary(dplyr) \nlibrary(ggplot2) \n\nHowever, the command install.packages() must not be written in a Quarto document. \nIt should be run only once in the console. \n\n2. Data cleaning \n\nnames <- read.csv('fichier_prenoms.csv', encoding = 'UTF-8', sep = ';') %>% \nmutate(Gender = ifelse(sexe == 1, 'Male', 'Female')) %>% \nfilter(annais != 'XXXX') %>% \nmutate(Year = as.numeric(annais)) \n\n3. Evolution of the first name LOUIS over time \n\n3715 children were born under the name LOUIS in 2021. This statistic is written in inline code such that it updates automatically.");
  }
</script>

<p style = "margin-bottom:2cm;"></p>
<center><h3><i>You've got 15 minutes!</i></h3></center>

]

.pull-right[
<p style = "margin-bottom:-4cm;"></p>
<center><img src = "louis.png" height = "677" width = "auto"/></center>
]

---

### Solution

````markdown
---
title: "Report on the first name LOUIS"
author: "Your name"
date: "10-02-2023"
format: html
editor: source
theme: "cosmo"
---

### 1. Setup 
  
The packages needed in a qmd must *always* be loaded in a code chunk at the beginning of the file.

```{r, message = F, warning = F}
library(dplyr)
library(ggplot2)
```

However, the command `install.packages()` must **not** be written in a Quarto document.  
It should be run only once in the console.
````

---

### Solution

````markdown
### 2) Data cleaning

```{r}
names <- read.csv('fichier_prenoms.csv', encoding = 'UTF-8', sep = ';') %>% 
  mutate(Gender = ifelse(sexe == 1, 'Male', 'Female')) %>% 
  filter(annais != 'XXXX') %>% 
  mutate(Year = as.numeric(annais)) 
```

### 3) Evolution of the first name LOUIS over time

```{r, echo = F, message = F, fig.height = 3, fig.width = 8}
names %>% filter(preusuel == "LOUIS") %>%
  group_by(Year, Gender) %>%
  summarise(Total = sum(nombre)) %>% ungroup() %>%
  ggplot(aes(x = Year, y = Total, color = Gender)) + geom_line()
```

```{r, echo = F}
n_louis <- names %>% filter(Year == 2021 & preusuel == "LOUIS") %>% summarise(n = sum(nombre))
```

`r n_louis$n` children were born under the name LOUIS in 2021. This statistic is written in  
inline code such that it updates automatically.
````
---

### 2. Useful features

#### 2.4. Report parameters

<ul>
  <li>It may sometimes be useful to produce <b>separate html reports for differents groups</b> in your data</li>
  <ul>
    <li>Country/state-specific reports</li>
    <li>Here, a different report for each first name</li>
  </ul>
</ul>

<ul>
  <li><b>YAML parameters</b> are very useful for that</li>
  <ul>
    <li>They are accessible <b>like any object</b> in your environment</li>
    <li>They must be specified as follows</li>
  </ul>
</ul>

```r
*title: "Report on the first name `r params$name`"
author: "Your name"
date: "10-02-2023"
format: html
editor: source
theme: "cosmo"
*params:
*  name: "LOUIS"
```

---

### 2. Useful features

#### 2.4. Report parameters

* You simply have to call that object in your code chunks or inline code when needed
 
--

````markdown
*### 3) Evolution of the first name `r params$name` over time

```{r, echo = F, message = F, fig.height = 3}
* names %>% filter(preusuel == params$name) %>%
  group_by(Year, Gender) %>%
  summarise(Total = sum(nombre)) %>% ungroup() %>%
  ggplot(aes(x = Year, y = Total, color = Gender)) + geom_line()
```

```{r, echo = F}
* n_louis <- names %>% filter(Year == 2021 & preusuel == params$name) %>% summarise(n = sum(nombre))
```

*`r n_louis$n` children were born under the name `r params$name` in 2021. This statistic is  
written in inline code such that it updates automatically.
````
--

<center><i><b>&#10140; Let's render our .qmd with different values of that parameter!</b></i></center>

---
class: hide-logo
.pull-left[
<p style = "margin-bottom:-.9cm;"></p>
<center><img src = "louis.png" height = "677" width = "auto"/></center>
]
--
.pull-right[
<p style = "margin-bottom:-.9cm;"></p>
<center><img src = "didier.png" height = "677" width = "auto"/></center>
]

---
class: hide-logo
.pull-left[
<p style = "margin-bottom:-.9cm;"></p>
<center><img src = "pauline.png" height = "677" width = "auto"/></center>
]
--
.pull-right[
<p style = "margin-bottom:-.9cm;"></p>
<center><img src = "camille.png" height = "677" width = "auto"/></center>
]

---

### 2. Useful features

#### 2.4. Report parameters

<ul>
  <li>But by <b>default</b> the <b>name of the .html</b> output will be the name of your .qmd</li>
  <ul>
    <li>So if you <b>render report.qmd</b> for the first name Louis it will save the report under <b>report.html</b></li>
    <li>And if you <b>render it a second time</b> for the first name Didier it will <b>override</b> the first .html</li>
  </ul>
</ul>

<ul>
  <li>The <b>solution</b> is to <b>render</b> your .qmd <b>externally</b></li>
  <ul>
    <li>You can do that with the <b>render()</b> function of the rmarkdown package</li>
    <li>Save your .qmd and <b>open a new .R script</b> to try it out</li>
  </ul>
</ul>

```r
library(rmarkdown)

render(
  input = "C:/User/Documents/prenom.qmd",                   # Specify the input .qmd
  output_file = "C:/User/Documents/LOUIS.html",             # Specify the output file
  params = list(name = "LOUIS")                             # Specify the YAML parameter(s)
)                                          
```

---

### 2. Useful features

#### 2.4. Report parameters

<ul>
  <li>To <b>avoid copy-pasting</b> this command for each name we want a report on, we must <b>use a loop</b></li>
</ul>

```r
for ( in ) {

}
```

---

### 2. Useful features

#### 2.4. Report parameters

```r
for (i in ) {

}
```

---

### 2. Useful features

#### 2.4. Report parameters

<ul>
  <li>To <b>avoid copy-pasting</b> this command for each name we want a report on, we must <b>use a loop</b></li>
  <ol>
    <li>First we should name the object that will successively take the value of each first name</li>
    <li>Then indicate which values this object must successively take</li>
    <li></li>
    <li></li>
  </ol>
</ul>

```r
for (i in c("LOUIS", "DIDER", "PAULINE", "CAMILLE")) {

}
```

---

### 2. Useful features

#### 2.4. Report parameters

```r
for (i in c("LOUIS", "DIDER", "PAULINE", "CAMILLE")) {

render(
    input = "C:/User/Documents/prenom.qmd",  
    output_file = "C:/User/Documents/LOUIS.html",
    params = list(name = "LOUIS")
  )

}
```

---

### 2. Useful features

#### 2.4. Report parameters

```r
for (i in c("LOUIS", "DIDER", "PAULINE", "CAMILLE")) {

render(
    input = "C:/User/Documents/prenom.qmd",  
    output_file = paste0("C:/User/Documents/", i, ".html"),
    params = list(name = i)
  )

}
```

---

<h3>Overview</h3>

<ul style = "margin-left:1.5cm;list-style: none">
  <li><b>2. Useful features &#10004;</b></li>
  <ul style = "list-style: none">
    <li>2.1. Inline code</li>
    <li>2.2. Tables</li>
    <li>2.3. Preset themes</li>
    <li>2.4. Report parameters</li>
  </ul>
</ul>

]

<ul style = "margin-left:-1cm;list-style: none"><li><b>4. Wrap up!</b></li></ul>
]
---

<h3>Overview</h3>

]

### 3. LaTeX for equations

#### 3.1. What is LaTeX?

* `$\LaTeX$` is a document preparation system

<ul>
  <li>But LaTeX is not a <i>"what you see is what you get"</i> system</li>
  <ul>
    <li>In Microsoft Word or Google doc, you work directly on the "output document"</li>
    <li><b>LaTeX</b> works more like Quarto: <b>Edit</b> your text <b>in a script using commands and symbols</b></li> 
  </ul>
</ul>

<p style = "margin-left:11.25cm; margin-top:-.55cm;"><b>Compile</b> the script to <b>get the output</b></p>

<ul>
  <li>LaTeX is the <b>preferred</b> typesetting system for most <b>academic</b> fields mainly because:</li>
  <ul>
    <li>Many things can be <b>automated</b> in LaTeX</li>
    <li>It has a good way to typeset <b>mathematical formulas</b></li>
  </ul>
</ul>

* We're not gonna learn how to make `$\LaTeX$` documents ([do it in 30mn](https://www.overleaf.com/learn/latex/Learn_LaTeX_in_30_minutes)), but just how to make equations
 
`$$\overline{x}=\frac{1}{N}\sum_{i=1}^N x_i$$`

---

### 3. LaTeX for equations

#### 3.2. LaTeX syntax

* To include a **LaTeX equation** in Quarto, you simply have to surround it with the **`$` sign**:
 
--
 
 <p style = "margin-bottom:-.5cm;">
 
.pull-left[
<center> <h4> Syntax </h4> </center>

`1 + 1`

`$1 + 1$`

]

1 + 1

`$1 + 1$`

]

* LaTeX is a convenient way to display **mathematical symbols** and to **structure equations**
  * The **syntax** is mainly based on **backslashes \ and braces {}**

<center><h4 style = "margin-bottom:.25cm;"> Example: </h4></center> 
<p style = "margin-bottom:.25cm;">
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; What you type in the text area: `$x \neq \frac{\alpha \times \beta}{2}$`  
</p>
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; What is rendered as an output: `$x \neq \frac{\alpha \times \beta}{2}$`

---

### 3. LaTeX for equations

#### 3.2. LaTeX syntax

&nbsp;&nbsp;&nbsp;&nbsp;&#10140; **Common greek letters**

<p style = "margin-bottom:-.25cm;">
 
.pull-left[
<center> <h4> Syntax </h4> </center>

`$\alpha$`  
`$\beta$`  
`$\gamma$` `$\Gamma$`  
`$\delta$` `$\Delta$`  
`$\epsilon$` `$\varepsilon$`  
`$\lambda` `\Lambda$`  
`$\phi$` `$\Phi$`  
`$\pi$` `$\Pi$`  
`$\psi$` `$\Psi$`  
`$\theta$` `$\Theta$`  
`$\sigma$` `$\Sigma$`  
...

]

`$\alpha$`  
`$\beta$`  
`$\gamma$` `$\Gamma$`  
`$\delta$` `$\Delta$`  
`$\epsilon$` `$\varepsilon$`  
`$\lambda$` `$\Lambda$`  
`$\phi$` `$\Phi$`  
`$\pi$` `$\Pi$`  
`$\psi$` `$\Psi$`  
`$\theta$` `$\Theta$`  
`$\sigma$` `$\Sigma$`  
...

]

---

### 3. LaTeX for equations

#### 3.2. LaTeX syntax
 
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; **Common symbols** 
 
.pull-left[
<center> <h4> Syntax </h4> </center>

`$+ - \pm$`  
`$\times \div$`  
`$= \neq \equiv \approx$`  
`$> < \geq \leq \lessgt$`  
`$\rightarrow \leftarrow \Leftrightarrow$`  
`$\in \notin$`  
`$\forall \exists \nexists$`  
`$\infty$`  
`$\sum \prod \int$`  
...

]

`$+$` `$-$` `$\pm$`  
`$\times$` `$\div$`  
`$=$` `$\neq$` `$\equiv$` `$\approx$`  
`$>$` `$<$` `$\geq$` `$\leq$` `$\lessgtr$`  
`$\rightarrow$` `$\leftarrow$` `$\Leftrightarrow$`  
`$\in$` `$\notin$`  
`$\forall$` `$\exists$` `$\nexists$`  
`$\infty$`  
`$\sum$` `$\prod$` `$\int$`  
...

]

---

### 3. LaTeX for equations

#### 3.2. LaTeX syntax
 
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; **Exponents and accentuation**
 
.pull-left[
<center> <h4> Syntax </h4> </center>

`$x^a$`  
`$x_b$`  
`$x^a_b$`  
`$x^{a, i}_{b, j}$`  
<p style = "margin-bottom:.25cm;">  
`$\hat{\beta} \widehat{\beta_{i,j}}$`  
`$\tilde{\beta} \widetilde{\beta_{i,j}}$`  
`$\overline{x} \underline{x}$`  
`$\overrightarrow{x} \underleftarrow{x}$`  
...

]

`$x^a$`  
`$x_b$`  
`$x^a_b$`  
`$x^{a, i}_{b, j}$`  
`$\hat{\beta}$` `$\widehat{\beta_{i,j}}$`  
`$\tilde{\beta}$` `$\widetilde{\beta_{i,j}}$`  
`$\overline{x}$` `$\underline{x}$`  
`$\overrightarrow{x}$` `$\underleftarrow{x}$`  
...

]

---

### 3. LaTeX for equations

#### 3.2. LaTeX syntax
 
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; **Math constructs and variable sized symbols**
 
.pull-left[
<center> <h4> Syntax </h4> </center>

`$\frac{a \times b}{c}$`  
`$\sqrt{x} \sqrt[n]{x}$`  
`$\sum_{i = 1}^N$`  
`$\prod_{i = 1}^N$`  
`$\int_a^b$`  
<p style = "margin-bottom:.5cm;">  
`$\overline{x}=\frac{1}{N}\sum_{i=1}^N x_i$`  
...

]

`$\frac{a \times b}{c}$`  
`$\sqrt{x}$` `$\sqrt[n]{x}$`  
`$\sum_{i = 1}^N$`  
`$\prod_{i = 1}^N$`  
`$\int_a^b$`

`$\overline{x}=\frac{1}{N}\sum_{i=1}^N x_i$`  
...

]

---

### 3. LaTeX for equations

#### 3.3. Large equations

<ul>
  <li>Surrounding a LaTeX input with <b>one $</b> on each side is suitable for <b>inline equation</b></li>
</ul>

<ul>
  <li>You can also surround a LaTeX input with <b>two $</b> on each side</li>
  <ul>
    <li>It puts the equation at the <b>center of a new line</b></li>
    <li>And gives <b>more vertical space</b> to the equation</li>
  </ul>
</ul> 
 
--

<ul>
  <li>Surrounding a LaTeX input with two $ is usually good for:</li>
  <ul>
    <li>Large equations</li>
    <li>Equations that should be emphasized</li>
  </ul>
</ul>

<h4 style = "margin-bottom:-.5cm;">The mean formula with one `$` on each side</h4>  
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; For inline equations  
 
`$\overline{x}=\frac{1}{N}\sum_{i=1}^N x_i$`

]

<h4 style = "margin-bottom:-.5cm;">The mean formula with two `$` on each side</h4>  
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; For large/emphasized equations  
 
`$$\overline{x}=\frac{1}{N}\sum_{i=1}^N x_i$$`

]

---

### 3. LaTeX for equations

#### 3.3. Large equations

<ul>
  <li>Sometimes you do not want two <b>consecutive lines</b> of equations to be centered</li>
  <ul>
    <li>You may want to <b>align</b> them based on a <b>common part</b> within the equations</li>
  </ul>
</ul>

* This should be done in an **`aligned` environment** (`$\begin{aligned}...\end{aligned}$`)

<ul>
  <ul>
    <li>Place the <b>"&"</b> symbol where the equations should be aligned</li>
    <li>And break a line using <b>"\\"</b></li>
  </ul>
</ul>

```r
$$
\begin{aligned}
x & = (a + b) \times c \\
  & = (a \times c) + (b \times c)
\end{aligned}
$$
```

`$$\begin{aligned}
x & = (a + b) \times c \\
  & = (a \times c) + (b \times c)
\end{aligned}$$`

---

### 3. LaTeX for equations

#### 3.3. Large equations
 
 * The same principle applies within **`cases` environment**

```r
$$\text{Med}(x) = \begin{cases} 
  x[\frac{N+1}{2}]                          & \text{if } N \text{ is odd}\\
  \frac{x[\frac{N}{2}]+x[\frac{N}{2}+1]}{2} & \text{if } N \text{ is even}
\end{cases}$$
```

`$$\text{Med}(x) = \begin{cases} 
  x[\frac{N+1}{2}]                          & \text{if } N \text{ is odd}\\
  \frac{x[\frac{N}{2}]+x[\frac{N}{2}+1]}{2} & \text{if } N \text{ is even}
\end{cases}$$`

* Note that the **`text` function** allows to write text without it being interpreted as mathematical letters:

```r
$$Mean(x)=\frac{1}{N}\sum_{i=1}^N x_i$$
```
`$$Mean(x)=\frac{1}{N}\sum_{i=1}^N x_i$$`
]

```r
$$\text{Mean}(x)=\frac{1}{N}\sum_{i=1}^N x_i$$
```
`$$\text{Mean}(x)=\frac{1}{N}\sum_{i=1}^N x_i$$`
]

---

### Practice

#### 1) Inside your .qmd, reproduce the following mathematical expression

`$$Y_i = \alpha + \beta X_i + \varepsilon_i$$`

#### 2) Then reproduce the following sentence

`$\hat{Y_i}$` denote the fitted values of the model.

<p style = "margin-bottom:3cm;"></p>
<center><h3><i>You've got 3 minutes!</i></h3></center>

---

### Solution

#### 1) Inside your .qmd, reproduce the following mathematical expression

`$$Y_i = \alpha + \beta X_i + \varepsilon_i$$`

```r
$$Y_i = \alpha + \beta X_i + \varepsilon_i$$
```

#### 2) Then reproduce the following sentence

`$\hat{Y_i}$` denote the fitted values of the model.

```r
$\hat{Y_i}$ denote the fitted values of the model.
```

---

<h3>Overview</h3>

]

<ul style = "margin-left:-1cm;list-style: none">
  <li><b>3. LaTeX for equations &#10004;</b></li>
  <ul style = "list-style: none">
    <li>3.1. What is LaTeX?</li>
    <li>3.2. LaTeX syntax</li>
    <li>3.3. Large equations</li>
  </ul>
</ul>
 
<p style = "margin-bottom:1cm;"></p>

<ul style = "margin-left:-1cm;list-style: none"><li><b>4. Wrap up!</b></li></ul>
]

---

### 4. Wrap up!

#### 1. Three types of contents

<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YAML header &#10140;</b>

<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Code chunks &#10140;</b>

<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text &#10140;</b>
]

---

### 4. Wrap up!

#### 2. Useful features

&#10140; **Inline code** allows to include the output of some **R code within text areas** of your report

```r
`paste("a", "b", sep = "-")`
```

```r
`r paste("a", "b", sep = "-")`
```

]

`paste("a", "b", sep = "-")`

a-b
 
]

&#10140; **`kable()`** for clean **html tables** and **`datatable()`** to navigate in **large tables**

```r
kable(results_table)
datatable(results_table)
```

---

### 4. Wrap up!

#### 3. LaTeX for equations

* `$\LaTeX$` is a convenient way to display **mathematical** symbols and to structure **equations**
  * The **syntax** is mainly based on **backslashes \ and braces {}**

&nbsp;&nbsp;&nbsp;&nbsp;&#10140; What you **type** in the text area: `$x \neq \frac{\alpha \times \beta}{2}$`  
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; What is **rendered** as an output: `$x \neq \frac{\alpha \times \beta}{2}$`

<center>To <b>include</b> a <b>LaTeX equation</b> in Quarto, you simply have to surround it with the <b>$ sign</b></center>

<h4 style = "margin-bottom:0cm;">The mean formula with one `$` on each side</h4>  
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; For inline equations  
 
`$\overline{x}=\frac{1}{N}\sum_{i=1}^N x_i$`

]

<h4 style = "margin-bottom:0cm;">The mean formula with two `$` on each side</h4>  
&nbsp;&nbsp;&nbsp;&nbsp;&#10140; For large/emphasized equations  
 
`$$\overline{x}=\frac{1}{N}\sum_{i=1}^N x_i$$`

]