This repository has been archived by the owner on Apr 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
quarto.html
1123 lines (1092 loc) · 116 KB
/
quarto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta charset="utf-8">
<meta name="generator" content="quarto-1.2.335">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>quarto</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<script src="quarto_files/libs/clipboard/clipboard.min.js"></script>
<script src="quarto_files/libs/quarto-html/quarto.js"></script>
<script src="quarto_files/libs/quarto-html/popper.min.js"></script>
<script src="quarto_files/libs/quarto-html/tippy.umd.min.js"></script>
<script src="quarto_files/libs/quarto-html/anchor.min.js"></script>
<link href="quarto_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="quarto_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="quarto_files/libs/bootstrap/bootstrap.min.js"></script>
<link href="quarto_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="quarto_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
</head>
<body class="fullcontent">
<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
<main class="content" id="quarto-document-content">
<div class="cell">
<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>i <span class="ot"><-</span> <span class="dv">1</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>chapter_number <span class="ot"><-</span> <span class="dv">10</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="fu">source</span>(<span class="st">"_common.R"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-stderr">
<pre><code>── Attaching core tidyverse packages ──── tidyverse 2.0.0 ──
✔ dplyr 1.1.1 ✔ readr 2.1.4
✔ forcats 1.0.0 ✔ stringr 1.5.0
✔ ggplot2 3.4.2 ✔ tibble 3.2.1
✔ lubridate 1.9.2 ✔ tidyr 1.3.0
✔ purrr 1.0.1
── Conflicts ────────────────────── tidyverse_conflicts() ──
✖ dplyr::filter() masks stats::filter()
✖ dplyr::lag() masks stats::lag()
ℹ Use the conflicted package (<http://conflicted.r-lib.org/>) to force all conflicts to become errors
Attaching package: 'janitor'
The following objects are masked from 'package:stats':
chisq.test, fisher.test
Attaching package: 'xfun'
The following objects are masked from 'package:fs':
dir_create, dir_exists, file_exists
The following objects are masked from 'package:base':
attr, isFALSE</code></pre>
</div>
</div>
<section id="quarto-the-next-generation-tool-for-reproducible-reporting" class="level1">
<h1>Quarto, the Next-Generation Tool for Reproducible Reporting</h1>
<p>In mid-2022, the team at Posit (the company that makes the RStudio editor, the <code>tidyverse</code>, and many other tools to support R programmers) made an announcement: they had developed a new tool called Quarto, which they described as the next-generation version of R Markdown. The Posit team explained a few of the reasons why they felt the need to develop a new tool for reproducible reporting:</p>
<ol type="1">
<li><strong>More consistent syntax</strong>: As you’ve seen in this book, the syntax used to create different outputs with R Markdown varies. For example, the <code>distill</code> package has layout options that don’t work in <code>xaringan</code>. And <code>xaringan</code> uses three dashes to indicate new slides, while three dashes in other output formats would create a horizontal line. With Quarto, the idea is to make the syntax used to create different outputs more consistent.</li>
<li><strong>Support for multiple languages</strong>: While R Markdown does work with languages such as Python, having the word R in the name was off-putting for non-R users. Creating a tool like Quarto was Posit’s "attempt to bring R Markdown to everyone." Quarto makes it straightforward for users to include code from multiple languages in a single document.</li>
<li><strong>Support for multiple code editors</strong>: R Markdown is designed to work in the RStudio IDE. With the move to support additional languages, it was important to support the code editors that users of those languages prefer. Quarto works in RStudio as well as editors such as VS Code and JupyterLab.</li>
</ol>
<p>While the benefits of Quarto are clearest for non-R users, there are also many reasons why R users may want to use Quarto. I’ll focus in this chapter on the benefits for R users who use RStudio. I’ll begin by explaining how to set up and use Quarto before going over some of the most important differences between Quarto and R Markdown. I’ll then demonstrate how to make each of the products we made in previous chapters with R Markdown using Quarto. Parameterized reporting, presentations, and websites are all things that Quarto can do, and this chapter will show you how.</p>
<section id="getting-started-with-quarto" class="level2 unnumbered">
<h2 class="unnumbered anchored" data-anchor-id="getting-started-with-quarto">Getting Started with Quarto</h2>
<p>To get started with Quarto, we first need to make sure it is installed. The good news is that newer versions of RStudio (2022.07.1 and later) come with Quarto installed. To check your RStudio version, click RStudio in the top menu bar, then click About RStudio. If you have an older version of RStudio, update it now (repeat the steps outline in Chapter @ref(#howto-chapter) on downloading RStudio) and Quarto will be installed for you.</p>
<p>Once you have Quarto installed, you’re ready to work with it. You can create a Quarto document by clicking File > New File > Quarto Document. You’ll see a menu, shown in Figure @ref(fig:new-quarto-doc), that looks like what you saw when creating an R Markdown document.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/new-quarto-doc.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The RStudio menu for creating a new Quarto document</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>I’ll give my document a title and choose HTML as my output format. The engine option allows users to select a different way to render documents. I’ll keep the default of <code>Knitr</code>, which is the same tool that R Markdown uses to render documents. I’ll keep the Use visual markdown editor unchecked (this option allows you to use an interface that looks more like Microsoft Word, but I’ve found it finicky). The Quarto document that is created has default content, just like R Markdown documents.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "My Report"</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span><span class="co"> html</span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="fu">## Quarto</span></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a>Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <span class="ot"><https://quarto.org></span>.</span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a><span class="fu">## Running Code</span></span>
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-12"><a href="#cb3-12" aria-hidden="true" tabindex="-1"></a>When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:</span>
<span id="cb3-13"><a href="#cb3-13" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-14"><a href="#cb3-14" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb3-15"><a href="#cb3-15" aria-hidden="true" tabindex="-1"></a><span class="dv">1</span> <span class="sc">+</span> <span class="dv">1</span></span>
<span id="cb3-16"><a href="#cb3-16" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb3-17"><a href="#cb3-17" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-18"><a href="#cb3-18" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-19"><a href="#cb3-19" aria-hidden="true" tabindex="-1"></a>You can add options to executable code like this </span>
<span id="cb3-20"><a href="#cb3-20" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-21"><a href="#cb3-21" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb3-22"><a href="#cb3-22" aria-hidden="true" tabindex="-1"></a><span class="co">#| echo: false</span></span>
<span id="cb3-23"><a href="#cb3-23" aria-hidden="true" tabindex="-1"></a><span class="dv">2</span> <span class="sc">*</span> <span class="dv">2</span></span>
<span id="cb3-24"><a href="#cb3-24" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb3-25"><a href="#cb3-25" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-26"><a href="#cb3-26" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-27"><a href="#cb3-27" aria-hidden="true" tabindex="-1"></a>The <span class="in">`echo: false`</span> option disables the printing of code (only output is displayed).</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>There are some differences between R Markdown and Quarto and many things in common. Let’s explore them.</p>
</section>
<section id="comparing-r-markdown-and-quarto" class="level2 unnumbered">
<h2 class="unnumbered anchored" data-anchor-id="comparing-r-markdown-and-quarto">Comparing R Markdown and Quarto</h2>
<p>Looking through our newly created Quarto document, you can see how similar Quarto and R Markdown are overall. Both have the same basic structure: YAML metadata, followed by a combination of markdown text and code chunks. Despite the similarities, there are some differences. In R Markdown, we would have created an HTML document with this YAML.</p>
<pre><code>---
title: "My Report"
output: html_document
---</code></pre>
<p>With Quarto, <code>output</code> is replaced with <code>format</code> and we write <code>html</code> instead of <code>html_document</code>.</p>
<pre><code>---
title: "My Report"
format: html
---</code></pre>
<p>A second difference between R Markdown and Quarto is that the <code>setup</code> code chunk seen in the former does not exist in the latter. Recall from Chapter @ref(rmarkdown-chapter) that the <code>setup</code> code chunk sets default options on things like whether we show code, charts and tables, and other elements in the rendered versions of our documents. With Quarto, these options are set in the YAML. For example, if we want to hide code as well as all warnings and messages from our rendered document, we add them under <code>execute</code> in our YAML as follows (Quarto also allows you to write <code>true</code> and <code>false</code> in lower case):</p>
<pre><code>---
title: "My Report"
format: html
execute:
echo: false
warning: false
message: false
---</code></pre>
<p>In R Markdown, if we want to override options at the individual code chunk level, we do it by adding them within the curly brackets that start a code chunk. The code chunk below would show both the code <code>2 * 2</code> as well as the output (4).</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="in">```{r echo = TRUE}</span></span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a><span class="dv">2</span> <span class="sc">*</span> <span class="dv">2</span></span>
<span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>With Quarto, we use a slightly different syntax to set individual chunk-level options. You can see below how the chunk option is not set within the curly brackets, but instead in the code chunk itself. We use the text <code>#|</code> (known as the <strong>hash pipe</strong>) at the start of a line to indicate that we are setting options.</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a><span class="co">#| echo: false</span></span>
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a><span class="dv">2</span> <span class="sc">*</span> <span class="dv">2</span></span>
<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>A final difference you’re likely to see if you switch from R Markdown to Quarto is that option names that consist of two words are separated by a dash rather than a period. R Markdown, for example, uses the code chunk option <code>fig.height</code> to determine the height of plots.</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="in">```{r fig.height = 10}</span></span>
<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(palmerpenguins)</span>
<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb9-4"><a href="#cb9-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb9-5"><a href="#cb9-5" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(penguins, <span class="fu">aes</span>(<span class="at">x =</span> bill_length_mm,</span>
<span id="cb9-6"><a href="#cb9-6" aria-hidden="true" tabindex="-1"></a> <span class="at">y =</span> bill_depth_mm)) <span class="sc">+</span></span>
<span id="cb9-7"><a href="#cb9-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>()</span>
<span id="cb9-8"><a href="#cb9-8" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>In contrast, Quarto uses <code>fig-height</code> as follows.</p>
<div class="sourceCode" id="cb10"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a><span class="co">#| fig-height: 10</span></span>
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(palmerpenguins)</span>
<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb10-6"><a href="#cb10-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb10-7"><a href="#cb10-7" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(penguins, <span class="fu">aes</span>(<span class="at">x =</span> bill_length_mm,</span>
<span id="cb10-8"><a href="#cb10-8" aria-hidden="true" tabindex="-1"></a> <span class="at">y =</span> bill_depth_mm)) <span class="sc">+</span></span>
<span id="cb10-9"><a href="#cb10-9" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>()</span>
<span id="cb10-10"><a href="#cb10-10" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Helpfully for those of us coming from R Markdown, <code>fig.height</code> and similar options with periods in them will continue to work if you forget to make the switch. A list of all code chunk options can be found on the Quarto website: https://quarto.org/docs/reference/cells/cells-knitr.html.</p>
<p>Rendering your Quarto document to HTML (or any other format) follows the same process as R Markdown. While you use the Knit button to render an R Markdown document, with Quarto the button is called Render. Figure @ref(fig:render-button) shows the Render button.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/render-button.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The Render button</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>Clicking the Render button will turn the Quarto document into an HTML file, Word document, or any other output format you select.</p>
<p>As you’ve seen, the differences between R Markdown and Quarto are mostly around syntax. All of the general concepts you learned about generating reports with the single-tool workflow described in Chapter @ref(rmarkdown-chapter) apply to Quarto as well.</p>
</section>
<section id="making-different-types-of-outputs-with-quarto" class="level2 unnumbered">
<h2 class="unnumbered anchored" data-anchor-id="making-different-types-of-outputs-with-quarto">Making Different Types of Outputs with Quarto</h2>
<p>Now that you’ve learned how Quarto works to create a simple document, let’s make a few different things with it. We’ll go through the outputs that you’ve learned to make in Chapters @ref(parameterized-reporting-chapter), @ref(presentations-chapter), and @ref(websites-chapter).</p>
<section id="parameterized-reporting-with-quarto" class="level3 unnumbered">
<h3 class="unnumbered anchored" data-anchor-id="parameterized-reporting-with-quarto">Parameterized Reporting with Quarto</h3>
<p>Let’s start with parameterized reporting. The process of making parameterized reports with Quarto is nearly identical to how it’s done with R Markdown. Below, I’ve taken the R Markdown document used to make the Urban Institute COVID Report in Chapter @ref(parameterized-reporting-chapter) and adapted it for Quarto. I did so by copying the <code>.Rmd</code> file and changing its extension to <code>.qmd</code>. From there, I made the following changes:</p>
<ol type="1">
<li>Switched <code>output: html_document</code> to <code>format: html</code> in the YAML.</li>
<li>Removed the <code>setup</code> code chunk and put the options that were there in the YAML.</li>
<li>Switched the <code>fig.height</code> option in the last code chunk to <code>fig-height</code> and used the hash pipe.</li>
</ol>
<div class="sourceCode" id="cb11"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "Urban Institute COVID Report"</span></span>
<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span><span class="co"> html</span></span>
<span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a><span class="an">params:</span></span>
<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a><span class="co"> state: "Alabama"</span></span>
<span id="cb11-6"><a href="#cb11-6" aria-hidden="true" tabindex="-1"></a><span class="an">execute:</span></span>
<span id="cb11-7"><a href="#cb11-7" aria-hidden="true" tabindex="-1"></a><span class="co"> echo: false</span></span>
<span id="cb11-8"><a href="#cb11-8" aria-hidden="true" tabindex="-1"></a><span class="co"> warning: false</span></span>
<span id="cb11-9"><a href="#cb11-9" aria-hidden="true" tabindex="-1"></a><span class="co"> message: false</span></span>
<span id="cb11-10"><a href="#cb11-10" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb11-11"><a href="#cb11-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-12"><a href="#cb11-12" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb11-13"><a href="#cb11-13" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb11-14"><a href="#cb11-14" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(urbnthemes)</span>
<span id="cb11-15"><a href="#cb11-15" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(here)</span>
<span id="cb11-16"><a href="#cb11-16" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(scales)</span>
<span id="cb11-17"><a href="#cb11-17" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb11-18"><a href="#cb11-18" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-19"><a href="#cb11-19" aria-hidden="true" tabindex="-1"></a><span class="fu"># `r params$state`</span></span>
<span id="cb11-20"><a href="#cb11-20" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-21"><a href="#cb11-21" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb11-22"><a href="#cb11-22" aria-hidden="true" tabindex="-1"></a>cases <span class="ot"><-</span> <span class="fu">tibble</span>(state.name) <span class="sc">%>%</span></span>
<span id="cb11-23"><a href="#cb11-23" aria-hidden="true" tabindex="-1"></a> <span class="fu">rbind</span>(<span class="at">state.name =</span> <span class="st">"District of Columbia"</span>) <span class="sc">%>%</span></span>
<span id="cb11-24"><a href="#cb11-24" aria-hidden="true" tabindex="-1"></a> <span class="fu">left_join</span>(<span class="fu">read_csv</span>(<span class="st">"https://data.rwithoutstatistics.com/united_states_covid19_cases_deaths_and_testing_by_state.csv"</span>, <span class="at">skip =</span> <span class="dv">2</span>),</span>
<span id="cb11-25"><a href="#cb11-25" aria-hidden="true" tabindex="-1"></a> <span class="at">by =</span> <span class="fu">c</span>(<span class="st">"state.name"</span> <span class="ot">=</span> <span class="st">"State/Territory"</span>)) <span class="sc">%>%</span></span>
<span id="cb11-26"><a href="#cb11-26" aria-hidden="true" tabindex="-1"></a> <span class="fu">select</span>(<span class="at">total_cases =</span> <span class="st">`</span><span class="at">Total Cases</span><span class="st">`</span>, state.name,</span>
<span id="cb11-27"><a href="#cb11-27" aria-hidden="true" tabindex="-1"></a> <span class="at">cases_per_100000 =</span> <span class="st">`</span><span class="at">Case Rate per 100000</span><span class="st">`</span>) <span class="sc">%>%</span></span>
<span id="cb11-28"><a href="#cb11-28" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(<span class="at">cases_per_100000 =</span> <span class="fu">parse_number</span>(cases_per_100000)) <span class="sc">%>%</span> </span>
<span id="cb11-29"><a href="#cb11-29" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(<span class="at">case_rank =</span> <span class="fu">rank</span>(<span class="sc">-</span>cases_per_100000, <span class="at">ties.method =</span> <span class="st">"min"</span>))</span>
<span id="cb11-30"><a href="#cb11-30" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb11-31"><a href="#cb11-31" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-32"><a href="#cb11-32" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb11-33"><a href="#cb11-33" aria-hidden="true" tabindex="-1"></a>state_text <span class="ot"><-</span> <span class="fu">if_else</span>(params<span class="sc">$</span>state <span class="sc">==</span> <span class="st">"District of Columbia"</span>, <span class="fu">str_glue</span>(<span class="st">"the District of Columbia"</span>), <span class="fu">str_glue</span>(<span class="st">"state of {params$state}"</span>))</span>
<span id="cb11-34"><a href="#cb11-34" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-35"><a href="#cb11-35" aria-hidden="true" tabindex="-1"></a>state_cases_per_100000 <span class="ot"><-</span> cases <span class="sc">%>%</span></span>
<span id="cb11-36"><a href="#cb11-36" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(state.name <span class="sc">==</span> params<span class="sc">$</span>state) <span class="sc">%>%</span> </span>
<span id="cb11-37"><a href="#cb11-37" aria-hidden="true" tabindex="-1"></a> <span class="fu">pull</span>(cases_per_100000) <span class="sc">%>%</span> </span>
<span id="cb11-38"><a href="#cb11-38" aria-hidden="true" tabindex="-1"></a> <span class="fu">comma</span>()</span>
<span id="cb11-39"><a href="#cb11-39" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-40"><a href="#cb11-40" aria-hidden="true" tabindex="-1"></a>state_cases_rank <span class="ot"><-</span> cases <span class="sc">%>%</span></span>
<span id="cb11-41"><a href="#cb11-41" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(state.name <span class="sc">==</span> params<span class="sc">$</span>state) <span class="sc">%>%</span> </span>
<span id="cb11-42"><a href="#cb11-42" aria-hidden="true" tabindex="-1"></a> <span class="fu">pull</span>(case_rank)</span>
<span id="cb11-43"><a href="#cb11-43" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb11-44"><a href="#cb11-44" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-45"><a href="#cb11-45" aria-hidden="true" tabindex="-1"></a>In <span class="in">`r state_text`</span>, there were <span class="in">`r state_cases_per_100000`</span> cases per 100,000 people in the last seven days. This puts <span class="in">`r params$state`</span> at number <span class="in">`r state_cases_rank`</span> of 50 states and the District of Columbia. </span>
<span id="cb11-46"><a href="#cb11-46" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-47"><a href="#cb11-47" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb11-48"><a href="#cb11-48" aria-hidden="true" tabindex="-1"></a><span class="co">#| fig-height: 8</span></span>
<span id="cb11-49"><a href="#cb11-49" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-50"><a href="#cb11-50" aria-hidden="true" tabindex="-1"></a><span class="fu">set_urbn_defaults</span>(<span class="at">style =</span> <span class="st">"print"</span>)</span>
<span id="cb11-51"><a href="#cb11-51" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-52"><a href="#cb11-52" aria-hidden="true" tabindex="-1"></a>cases <span class="sc">%>%</span> </span>
<span id="cb11-53"><a href="#cb11-53" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(<span class="at">highlight_state =</span> <span class="fu">if_else</span>(state.name <span class="sc">==</span> params<span class="sc">$</span>state, <span class="st">"Y"</span>, <span class="st">"N"</span>)) <span class="sc">%>%</span> </span>
<span id="cb11-54"><a href="#cb11-54" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(<span class="at">state.name =</span> <span class="fu">fct_reorder</span>(state.name, cases_per_100000)) <span class="sc">%>%</span> </span>
<span id="cb11-55"><a href="#cb11-55" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(<span class="fu">aes</span>(<span class="at">x =</span> cases_per_100000,</span>
<span id="cb11-56"><a href="#cb11-56" aria-hidden="true" tabindex="-1"></a> <span class="at">y =</span> state.name,</span>
<span id="cb11-57"><a href="#cb11-57" aria-hidden="true" tabindex="-1"></a> <span class="at">fill =</span> highlight_state)) <span class="sc">+</span></span>
<span id="cb11-58"><a href="#cb11-58" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_col</span>() <span class="sc">+</span></span>
<span id="cb11-59"><a href="#cb11-59" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_x_continuous</span>(<span class="at">labels =</span> <span class="fu">comma_format</span>()) <span class="sc">+</span></span>
<span id="cb11-60"><a href="#cb11-60" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme</span>(<span class="at">legend.position =</span> <span class="st">"none"</span>) <span class="sc">+</span></span>
<span id="cb11-61"><a href="#cb11-61" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">y =</span> <span class="cn">NULL</span>,</span>
<span id="cb11-62"><a href="#cb11-62" aria-hidden="true" tabindex="-1"></a> <span class="at">x =</span> <span class="st">"Cases per 100,000"</span>)</span>
<span id="cb11-63"><a href="#cb11-63" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Despite these small differences, the rendered report looks almost exactly the same as the one we produced in Chapter @ref(parameterized-reporting-chapter). Also nearly identical is the process of creating one report for each state. We can take the <code>render.R</code> script file we used to make parameterized reports in Chapter @ref(parameterized-reporting-chapter) and, with a few small tweaks, it works. In the updated <code>render.R</code> file below, I made the following tweaks:</p>
<ol type="1">
<li>Loaded the <code>quarto</code> package instead of the <code>rmarkdown</code> package.</li>
<li>Made the input file <code>urban-covid-budget-report.qmd</code> instead of <code>urban-covid-budget-report.Rmd</code>.</li>
<li>In the <code>reports</code> tibble I created, used <code>execute_params</code> instead of <code>params</code>.</li>
<li>On the last line, used the <code>quarto_render()</code> function instead of the <code>render()</code> function from the <code>markdown</code> package.</li>
</ol>
<div class="sourceCode" id="cb12"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Load packages</span></span>
<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(quarto)</span>
<span id="cb12-4"><a href="#cb12-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb12-5"><a href="#cb12-5" aria-hidden="true" tabindex="-1"></a><span class="co"># Create a vector of all states and the District of Columbia</span></span>
<span id="cb12-6"><a href="#cb12-6" aria-hidden="true" tabindex="-1"></a>state <span class="ot"><-</span> <span class="fu">tibble</span>(state.name) <span class="sc">%>%</span></span>
<span id="cb12-7"><a href="#cb12-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">rbind</span>(<span class="st">"District of Columbia"</span>) <span class="sc">%>%</span> </span>
<span id="cb12-8"><a href="#cb12-8" aria-hidden="true" tabindex="-1"></a> <span class="fu">pull</span>(state.name)</span>
<span id="cb12-9"><a href="#cb12-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb12-10"><a href="#cb12-10" aria-hidden="true" tabindex="-1"></a><span class="co"># Create a tibble with information on the:</span></span>
<span id="cb12-11"><a href="#cb12-11" aria-hidden="true" tabindex="-1"></a><span class="co"># input R Markdown document</span></span>
<span id="cb12-12"><a href="#cb12-12" aria-hidden="true" tabindex="-1"></a><span class="co"># output HTML file</span></span>
<span id="cb12-13"><a href="#cb12-13" aria-hidden="true" tabindex="-1"></a><span class="co"># parameters needed to knit the document</span></span>
<span id="cb12-14"><a href="#cb12-14" aria-hidden="true" tabindex="-1"></a>reports <span class="ot"><-</span> <span class="fu">tibble</span>(</span>
<span id="cb12-15"><a href="#cb12-15" aria-hidden="true" tabindex="-1"></a> <span class="at">input =</span> <span class="st">"urban-covid-budget-report.qmd"</span>,</span>
<span id="cb12-16"><a href="#cb12-16" aria-hidden="true" tabindex="-1"></a> <span class="at">output_file =</span> <span class="fu">str_glue</span>(<span class="st">"{state}.html"</span>),</span>
<span id="cb12-17"><a href="#cb12-17" aria-hidden="true" tabindex="-1"></a> <span class="at">execute_params =</span> <span class="fu">map</span>(state, <span class="sc">~</span><span class="fu">list</span>(<span class="at">state =</span> .))</span>
<span id="cb12-18"><a href="#cb12-18" aria-hidden="true" tabindex="-1"></a>)</span>
<span id="cb12-19"><a href="#cb12-19" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb12-20"><a href="#cb12-20" aria-hidden="true" tabindex="-1"></a><span class="co"># Generate all of our reports</span></span>
<span id="cb12-21"><a href="#cb12-21" aria-hidden="true" tabindex="-1"></a>reports <span class="sc">%>%</span></span>
<span id="cb12-22"><a href="#cb12-22" aria-hidden="true" tabindex="-1"></a> <span class="fu">pwalk</span>(quarto_render)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Just as in Chapter @ref(parameterized-reporting-chapter), running this code will produce one report for each state.</p>
</section>
<section id="presentations" class="level3 unnumbered">
<h3 class="unnumbered anchored" data-anchor-id="presentations">Presentations</h3>
<p>Quarto can also produce presentations like those we made in Chapter @ref(presentations-chapter). Again, the process is nearly identical to how we made slides with the <code>xaringan</code> package. To make a presentation with Quarto, click on File > New File > Quarto Presentation. You’ll want to choose Reveal JS to make your slides and leave the Engine and Editor options untouched, as seen in Figure @ref(fig:quarto-new-presentation).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-new-presentation.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The RStudio menu to make a new Quarto presentation</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>The slides we’ll make use the reveal.js javascript library under the hood. Making slides in this format is the Quarto approach that is most similar to making slides with <code>xaringan</code>. Below I’ve taken the code used to make a presentation with <code>xaringan</code> in Chapter @ref(presentations-chapter) and made a few updates to make it work with Quarto.</p>
<div class="sourceCode" id="cb13"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "Penguins Report"</span></span>
<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a><span class="an">author:</span><span class="co"> "David Keyes"</span></span>
<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span><span class="co"> revealjs</span></span>
<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a><span class="an">execute:</span><span class="co"> </span></span>
<span id="cb13-6"><a href="#cb13-6" aria-hidden="true" tabindex="-1"></a><span class="co"> echo: false</span></span>
<span id="cb13-7"><a href="#cb13-7" aria-hidden="true" tabindex="-1"></a><span class="co"> warning: false</span></span>
<span id="cb13-8"><a href="#cb13-8" aria-hidden="true" tabindex="-1"></a><span class="co"> message: false</span></span>
<span id="cb13-9"><a href="#cb13-9" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb13-10"><a href="#cb13-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-11"><a href="#cb13-11" aria-hidden="true" tabindex="-1"></a><span class="fu"># Introduction</span></span>
<span id="cb13-12"><a href="#cb13-12" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-13"><a href="#cb13-13" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb13-14"><a href="#cb13-14" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb13-15"><a href="#cb13-15" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb13-16"><a href="#cb13-16" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-17"><a href="#cb13-17" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb13-18"><a href="#cb13-18" aria-hidden="true" tabindex="-1"></a>penguins <span class="ot"><-</span> <span class="fu">read_csv</span>(<span class="st">"https://raw.githubusercontent.com/rfortherestofus/r-without-statistics/main/data/penguins-2008.csv"</span>)</span>
<span id="cb13-19"><a href="#cb13-19" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb13-20"><a href="#cb13-20" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-21"><a href="#cb13-21" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-22"><a href="#cb13-22" aria-hidden="true" tabindex="-1"></a>We are writing a report about the **Palmer Penguins**. These penguins are *really* amazing. There are three species:</span>
<span id="cb13-23"><a href="#cb13-23" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-24"><a href="#cb13-24" aria-hidden="true" tabindex="-1"></a><span class="ss">- </span>Adelie</span>
<span id="cb13-25"><a href="#cb13-25" aria-hidden="true" tabindex="-1"></a><span class="ss">- </span>Gentoo</span>
<span id="cb13-26"><a href="#cb13-26" aria-hidden="true" tabindex="-1"></a><span class="ss">- </span>Chinstrap</span>
<span id="cb13-27"><a href="#cb13-27" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-28"><a href="#cb13-28" aria-hidden="true" tabindex="-1"></a><span class="fu">## Bill Length</span></span>
<span id="cb13-29"><a href="#cb13-29" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-30"><a href="#cb13-30" aria-hidden="true" tabindex="-1"></a>We can make a histogram to see the distribution of bill lengths.</span>
<span id="cb13-31"><a href="#cb13-31" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-32"><a href="#cb13-32" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb13-33"><a href="#cb13-33" aria-hidden="true" tabindex="-1"></a>penguins <span class="sc">%>%</span> </span>
<span id="cb13-34"><a href="#cb13-34" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(<span class="fu">aes</span>(<span class="at">x =</span> bill_length_mm)) <span class="sc">+</span></span>
<span id="cb13-35"><a href="#cb13-35" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_histogram</span>() <span class="sc">+</span></span>
<span id="cb13-36"><a href="#cb13-36" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_minimal</span>()</span>
<span id="cb13-37"><a href="#cb13-37" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb13-38"><a href="#cb13-38" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-39"><a href="#cb13-39" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb13-40"><a href="#cb13-40" aria-hidden="true" tabindex="-1"></a>average_bill_length <span class="ot"><-</span> penguins <span class="sc">%>%</span> </span>
<span id="cb13-41"><a href="#cb13-41" aria-hidden="true" tabindex="-1"></a> <span class="fu">summarize</span>(<span class="at">avg_bill_length =</span> <span class="fu">mean</span>(bill_length_mm,</span>
<span id="cb13-42"><a href="#cb13-42" aria-hidden="true" tabindex="-1"></a> <span class="at">na.rm =</span> <span class="cn">TRUE</span>)) <span class="sc">%>%</span> </span>
<span id="cb13-43"><a href="#cb13-43" aria-hidden="true" tabindex="-1"></a> <span class="fu">pull</span>(avg_bill_length)</span>
<span id="cb13-44"><a href="#cb13-44" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb13-45"><a href="#cb13-45" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-46"><a href="#cb13-46" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-47"><a href="#cb13-47" aria-hidden="true" tabindex="-1"></a>The chart shows the distribution of bill lengths. The average bill length is <span class="in">`r average_bill_length`</span> millimeters.</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>When we render this, we get an HTML file with our slides, seen in Figure @ref(fig:quarto-slides) below.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-slides.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">Slides made with Quarto</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>Overall, the output looks similar to the default <code>xaringan</code> slides we made. However, remember how we had to manually add three dashes to make slides with <code>xaringan</code>? With Quarto, any first- or second-level headers make new slides so I was able to remove these (though you can use three dashes to manually add slide breaks).</p>
<p>Quarto slides also make it possible to incrementally reveal content. Bulleted and numbered lists can be made to incrementally reveal by default by adjusting the YAML. See here how I add <code>incremental: true</code> to the YAML.</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb14-2"><a href="#cb14-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "Penguins Report"</span></span>
<span id="cb14-3"><a href="#cb14-3" aria-hidden="true" tabindex="-1"></a><span class="an">author:</span><span class="co"> "David Keyes"</span></span>
<span id="cb14-4"><a href="#cb14-4" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span><span class="co"> </span></span>
<span id="cb14-5"><a href="#cb14-5" aria-hidden="true" tabindex="-1"></a><span class="co"> revealjs:</span></span>
<span id="cb14-6"><a href="#cb14-6" aria-hidden="true" tabindex="-1"></a><span class="co"> incremental: true</span></span>
<span id="cb14-7"><a href="#cb14-7" aria-hidden="true" tabindex="-1"></a><span class="an">execute:</span><span class="co"> </span></span>
<span id="cb14-8"><a href="#cb14-8" aria-hidden="true" tabindex="-1"></a><span class="co"> echo: false</span></span>
<span id="cb14-9"><a href="#cb14-9" aria-hidden="true" tabindex="-1"></a><span class="co"> warning: false</span></span>
<span id="cb14-10"><a href="#cb14-10" aria-hidden="true" tabindex="-1"></a><span class="co"> message: false</span></span>
<span id="cb14-11"><a href="#cb14-11" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>When I do this, the content in all lists in my presentation will be revealed one item at a time. You can also set just some lists to incrementally reveal using this format:</p>
<div class="sourceCode" id="cb15"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a>::: {.incremental}</span>
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a><span class="ss">- </span>Adelie</span>
<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a><span class="ss">- </span>Gentoo</span>
<span id="cb15-4"><a href="#cb15-4" aria-hidden="true" tabindex="-1"></a><span class="ss">- </span>Chinstrap</span>
<span id="cb15-5"><a href="#cb15-5" aria-hidden="true" tabindex="-1"></a>:::</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>This pattern using <code>:::</code> to start and end a section creates a section in the resulting HTML file known as a <code><div></code>. The HTML <code><div></code> tag allows you to define properties within that section. In the code above, adding <code>{.incremental}</code> sets a custom CSS class that makes the list reveal incrementally.</p>
<p>We see a similar pattern when creating columns in Quarto slides. Let’s say we want to create a slide with content in two columns, as in Figure @ref(fig:quarto-slides-two-columns).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-slides-two-columns.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">A slide with two columns</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>The code below is what I used to create the two-column slide. You’ll see the <code>:::</code> as well as <code>::::</code>. This creates nested divs. We first have a <code>columns</code> class, which tells the HTML that all content within the <code>::::</code> should be laid out as columns. Then, we use <code>::: {.column width="50%"}</code> to start a div that takes up half of the width of the slide. With both <code>::::</code> and <code>:::</code>, we have to also have a matching closing <code>::::</code> and <code>:::</code> to indicate the end of the section.</p>
<div class="sourceCode" id="cb16"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a>:::: {.columns}</span>
<span id="cb16-2"><a href="#cb16-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-3"><a href="#cb16-3" aria-hidden="true" tabindex="-1"></a>::: {.column width="50%"}</span>
<span id="cb16-4"><a href="#cb16-4" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb16-5"><a href="#cb16-5" aria-hidden="true" tabindex="-1"></a>penguins <span class="sc">%>%</span> </span>
<span id="cb16-6"><a href="#cb16-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(<span class="fu">aes</span>(<span class="at">x =</span> bill_length_mm)) <span class="sc">+</span></span>
<span id="cb16-7"><a href="#cb16-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_histogram</span>() <span class="sc">+</span></span>
<span id="cb16-8"><a href="#cb16-8" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_minimal</span>()</span>
<span id="cb16-9"><a href="#cb16-9" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb16-10"><a href="#cb16-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-11"><a href="#cb16-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-12"><a href="#cb16-12" aria-hidden="true" tabindex="-1"></a>:::</span>
<span id="cb16-13"><a href="#cb16-13" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-14"><a href="#cb16-14" aria-hidden="true" tabindex="-1"></a>::: {.column width="50%"}</span>
<span id="cb16-15"><a href="#cb16-15" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-16"><a href="#cb16-16" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb16-17"><a href="#cb16-17" aria-hidden="true" tabindex="-1"></a>penguins <span class="sc">%>%</span> </span>
<span id="cb16-18"><a href="#cb16-18" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(<span class="fu">aes</span>(<span class="at">x =</span> bill_depth_mm)) <span class="sc">+</span></span>
<span id="cb16-19"><a href="#cb16-19" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_histogram</span>() <span class="sc">+</span></span>
<span id="cb16-20"><a href="#cb16-20" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_minimal</span>()</span>
<span id="cb16-21"><a href="#cb16-21" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb16-22"><a href="#cb16-22" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-23"><a href="#cb16-23" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-24"><a href="#cb16-24" aria-hidden="true" tabindex="-1"></a>:::</span>
<span id="cb16-25"><a href="#cb16-25" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb16-26"><a href="#cb16-26" aria-hidden="true" tabindex="-1"></a>::::</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>With <code>xaringan</code> we were also able to easily center content on our slides by surrounding it with <code>.center[]</code>. Doing the same thing in Quarto is slightly more complicated. Quarto has no built-in CSS class to center content so we need to create it ourselves. I begin by creating a CSS code chunk and creating a custom class called <code>center-slide</code>. Using a bit of CSS, I tell it to center align all content (despite it saying <code>text-align</code> you’ll see that it also aligns images).</p>
<div class="sourceCode" id="cb17"><pre class="sourceCode css code-with-copy"><code class="sourceCode css"><span id="cb17-1"><a href="#cb17-1" aria-hidden="true" tabindex="-1"></a>```{css}</span>
<span id="cb17-2"><a href="#cb17-2" aria-hidden="true" tabindex="-1"></a><span class="fu">.center-slide</span> {</span>
<span id="cb17-3"><a href="#cb17-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb17-4"><a href="#cb17-4" aria-hidden="true" tabindex="-1"></a>}</span>
<span id="cb17-5"><a href="#cb17-5" aria-hidden="true" tabindex="-1"></a>```</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>I then apply the new <code>center-slide</code> class by putting it next to the title of the slide as follows.</p>
<div class="sourceCode" id="cb18"><pre class="sourceCode css code-with-copy"><code class="sourceCode css"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a>## Bill Length {<span class="fu">.center-slide</span>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>With our custom CSS applied, the slide now has all of its content centered, as seen in Figure @ref(fig:quarto-slide-centered).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-slide-centered.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">A slide with the content centered</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>Working in <code>xaringan</code> we added a background image to one of our slides. We can do the same thing in Quarto by applying the <code>background-image</code> attribute to a slide as follows.</p>
<div class="sourceCode" id="cb19"><pre class="sourceCode css code-with-copy"><code class="sourceCode css"><span id="cb19-1"><a href="#cb19-1" aria-hidden="true" tabindex="-1"></a>## Penguins {background-image="penguins<span class="fu">.jpg</span>"}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>This will add a slide with the text Penguins in front of an image of penguins, as seen in Figure @ref(fig:quarto-slide-background-image).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-slide-background-image.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">A slide with a background image</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>We’ve started making some changes to the look-and-feel of our Quarto slides. The sky is the limit in terms of further customizations. As with <code>xaringan</code>, there are two main ways to customize your slides:</p>
<ol type="1">
<li>Using existing themes</li>
<li>Changing the CSS</li>
</ol>
<p>Themes are the easiest way to change what your slides look like. Quarto has many themes you can apply by adding their name to your YAML as follows:</p>
<div class="sourceCode" id="cb20"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb20-1"><a href="#cb20-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb20-2"><a href="#cb20-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "Penguins Report"</span></span>
<span id="cb20-3"><a href="#cb20-3" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span></span>
<span id="cb20-4"><a href="#cb20-4" aria-hidden="true" tabindex="-1"></a><span class="co"> revealjs: </span></span>
<span id="cb20-5"><a href="#cb20-5" aria-hidden="true" tabindex="-1"></a><span class="co"> theme: dark</span></span>
<span id="cb20-6"><a href="#cb20-6" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Using this theme will change from the default light theme to a dark theme. The title slide with the dark theme applied can be seen in Figure @ref(fig:quarto-slide-dark).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-slide-dark.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">A slide with the dark theme applied</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>To see the full list of available themes, go to https://quarto.org/docs/presentations/revealjs/themes.html.</p>
<p>You can also write custom CSS to change your slides further. Quarto uses a type of CSS called Sass. The most important practical implication of using Sass is that we can use variables in our CSS. There are a number of variables that we can target to make changes to our slides. If you recall how the <code>xaringanthemer</code> package allowed us to target things like <code>header_h2_font_size</code> and <code>header_color</code>, using pre-existing variables with Sass will feel very similar.</p>
<p>To start, I’ll create a Sass file called <code>theme.scss</code> and add two sections to it as follows:</p>
<div class="sourceCode" id="cb21"><pre class="sourceCode css code-with-copy"><code class="sourceCode css"><span id="cb21-1"><a href="#cb21-1" aria-hidden="true" tabindex="-1"></a><span class="co">/*-- scss:defaults --*/</span></span>
<span id="cb21-2"><a href="#cb21-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb21-3"><a href="#cb21-3" aria-hidden="true" tabindex="-1"></a><span class="co">/*-- scss:rules --*/</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>In the <code>scss:defaults</code> section, we can use the Quarto Sass variables. For example, to change the color and size of first-level headers, I would add this code:</p>
<div class="sourceCode" id="cb22"><pre class="sourceCode css code-with-copy"><code class="sourceCode css"><span id="cb22-1"><a href="#cb22-1" aria-hidden="true" tabindex="-1"></a><span class="co">/*-- scss:defaults --*/</span></span>
<span id="cb22-2"><a href="#cb22-2" aria-hidden="true" tabindex="-1"></a>$presentation-heading-color<span class="in">: red</span>;</span>
<span id="cb22-3"><a href="#cb22-3" aria-hidden="true" tabindex="-1"></a>$presentation-h1-font-size<span class="in">: 150px;</span></span>
<span id="cb22-4"><a href="#cb22-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb22-5"><a href="#cb22-5" aria-hidden="true" tabindex="-1"></a><span class="co">/*-- scss:rules --*/</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>To apply these tweaks to my slides, I need to adjust my YAML to tell Quarto use my custom <code>theme.scss</code> file. I do this as follows:</p>
<div class="sourceCode" id="cb23"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb23-1"><a href="#cb23-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span>
<span id="cb23-2"><a href="#cb23-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "Penguins Reports"</span></span>
<span id="cb23-3"><a href="#cb23-3" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span></span>
<span id="cb23-4"><a href="#cb23-4" aria-hidden="true" tabindex="-1"></a><span class="co"> revealjs: </span></span>
<span id="cb23-5"><a href="#cb23-5" aria-hidden="true" tabindex="-1"></a><span class="co"> theme: theme.scss</span></span>
<span id="cb23-6"><a href="#cb23-6" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Figure @ref(fig:quarto-slide-scss) shows the changes applied to my rendered slides.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-slide-scss.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">A slide with custom CSS applied to it</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>The <code>scss:defaults</code> section is for using available variables (the full list of variables is available at https://quarto.org/docs/presentations/revealjs/themes.html#sass-variables). The <code>sass:rules</code> section is where you would add additional tweaks that can’t be done by targeting variables. For example, I could take my code from above to center all of the content in a slide and add it to the <code>scss:defaults</code> section.</p>
<div class="sourceCode" id="cb24"><pre class="sourceCode css code-with-copy"><code class="sourceCode css"><span id="cb24-1"><a href="#cb24-1" aria-hidden="true" tabindex="-1"></a><span class="co">/*-- scss:defaults --*/</span></span>
<span id="cb24-2"><a href="#cb24-2" aria-hidden="true" tabindex="-1"></a>$presentation-heading-color<span class="in">: red</span>;</span>
<span id="cb24-3"><a href="#cb24-3" aria-hidden="true" tabindex="-1"></a>$presentation-h1-font-size<span class="in">: 150px;</span></span>
<span id="cb24-4"><a href="#cb24-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb24-5"><a href="#cb24-5" aria-hidden="true" tabindex="-1"></a><span class="co">/*-- scss:rules --*/</span></span>
<span id="cb24-6"><a href="#cb24-6" aria-hidden="true" tabindex="-1"></a><span class="fu">.center-slide</span> {</span>
<span id="cb24-7"><a href="#cb24-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb24-8"><a href="#cb24-8" aria-hidden="true" tabindex="-1"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Because rendered Quarto slides are HTML documents, you can tweak them however you’d like with custom CSS. What’s more, because our slides use reveal.js under the hood, all of the features built into that Javascript library work in Quarto. There are easy ways to add transitions, animations, interactive content, and much more. The demo Quarto presentation, available at https://quarto.org/docs/presentations/revealjs/demo/, shows many of these features in action.</p>
</section>
<section id="websites" class="level3 unnumbered">
<h3 class="unnumbered anchored" data-anchor-id="websites">Websites</h3>
<p>Quarto can also make websites. In the same way that we were able to make slides without an external package like <code>xaringan</code>, we can also make websites without an external package like <code>distill</code>. To create a Quarto website, go to File > New Project. Then select New Directory and you’ll be presented with the menu in Figure @ref(fig:new-project).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/new-project.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The RStudio new project menu</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>Select Quarto website and you’ll be prompted to choose a directory to place it in. Keep the default Engine (Knitr), check Create a git repository (this will only show up if you have already installed git) and leave everything else unchecked. Your screen should look like Figure @ref(fig:create-quarto-website).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/create-quarto-website.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The RStudio menu to create a Quarto website</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>Once you hit the Create Project button, you’ll see a series of files created. There is an <code>index.qmd</code> and <code>about.qmd</code> file as well as a <code>_quarto.yml</code> and <code>styles.css</code> file. These files should sound familiar if you read Chapter @ref(websites-chapter) on making websites with the <code>distill</code> package. The <code>.qmd</code> files are where we’ll add content; the <code>_quarto.yml</code> file is where we’ll set options for the website as a whole; and the <code>styles.css</code> file is where we’ll add CSS to customize the visual appearance of our website.</p>
<section id="building-our-website" class="level4 unnumbered">
<h4 class="unnumbered anchored" data-anchor-id="building-our-website">Building our Website</h4>
<p>Let’s start with the <code>.qmd</code> files. Open <code>index.qmd</code> or <code>about.qmd</code> and you’ll see some default content. I’m going to delete the default content from the <code>index.qmd</code> and replace it with the content from website we made in Chapter @ref(websites-chapter). The only element I have removed is the <code>layout = "l-page"</code> that we used to make a wider layout for the map (we’ll discuss how to make different layouts in Quarto below).</p>
<div class="sourceCode" id="cb25"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb25-1"><a href="#cb25-1" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb25-2"><a href="#cb25-2" aria-hidden="true" tabindex="-1"></a><span class="co"># Load packages</span></span>
<span id="cb25-3"><a href="#cb25-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-4"><a href="#cb25-4" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb25-5"><a href="#cb25-5" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(janitor)</span>
<span id="cb25-6"><a href="#cb25-6" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tigris)</span>
<span id="cb25-7"><a href="#cb25-7" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(gt)</span>
<span id="cb25-8"><a href="#cb25-8" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(lubridate)</span>
<span id="cb25-9"><a href="#cb25-9" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(reactable)</span>
<span id="cb25-10"><a href="#cb25-10" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb25-11"><a href="#cb25-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-12"><a href="#cb25-12" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb25-13"><a href="#cb25-13" aria-hidden="true" tabindex="-1"></a><span class="co"># Import data</span></span>
<span id="cb25-14"><a href="#cb25-14" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-15"><a href="#cb25-15" aria-hidden="true" tabindex="-1"></a>us_states <span class="ot"><-</span> <span class="fu">states</span>(<span class="at">cb =</span> <span class="cn">TRUE</span>, </span>
<span id="cb25-16"><a href="#cb25-16" aria-hidden="true" tabindex="-1"></a> <span class="at">resolution =</span> <span class="st">"20m"</span>,</span>
<span id="cb25-17"><a href="#cb25-17" aria-hidden="true" tabindex="-1"></a> <span class="at">progress_bar =</span> <span class="cn">FALSE</span>) <span class="sc">%>%</span></span>
<span id="cb25-18"><a href="#cb25-18" aria-hidden="true" tabindex="-1"></a> <span class="fu">shift_geometry</span>() <span class="sc">%>%</span> </span>
<span id="cb25-19"><a href="#cb25-19" aria-hidden="true" tabindex="-1"></a> <span class="fu">clean_names</span>() <span class="sc">%>%</span> </span>
<span id="cb25-20"><a href="#cb25-20" aria-hidden="true" tabindex="-1"></a> <span class="fu">select</span>(geoid, name) <span class="sc">%>%</span> </span>
<span id="cb25-21"><a href="#cb25-21" aria-hidden="true" tabindex="-1"></a> <span class="fu">rename</span>(<span class="at">state =</span> name) <span class="sc">%>%</span> </span>
<span id="cb25-22"><a href="#cb25-22" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(state <span class="sc">%in%</span> state.name)</span>
<span id="cb25-23"><a href="#cb25-23" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-24"><a href="#cb25-24" aria-hidden="true" tabindex="-1"></a>covid_data <span class="ot"><-</span> <span class="fu">read_csv</span>(<span class="st">"https://raw.githubusercontent.com/nytimes/covid-19-data/master/rolling-averages/us-states.csv"</span>) <span class="sc">%>%</span> </span>
<span id="cb25-25"><a href="#cb25-25" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(state <span class="sc">%in%</span> state.name) <span class="sc">%>%</span> </span>
<span id="cb25-26"><a href="#cb25-26" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(<span class="at">geoid =</span> <span class="fu">str_remove</span>(geoid, <span class="st">"USA-"</span>)) </span>
<span id="cb25-27"><a href="#cb25-27" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-28"><a href="#cb25-28" aria-hidden="true" tabindex="-1"></a>most_recent_day <span class="ot"><-</span> covid_data <span class="sc">%>%</span> </span>
<span id="cb25-29"><a href="#cb25-29" aria-hidden="true" tabindex="-1"></a> <span class="fu">slice_max</span>(<span class="at">order_by =</span> date,</span>
<span id="cb25-30"><a href="#cb25-30" aria-hidden="true" tabindex="-1"></a> <span class="at">n =</span> <span class="dv">1</span>) <span class="sc">%>%</span> </span>
<span id="cb25-31"><a href="#cb25-31" aria-hidden="true" tabindex="-1"></a> <span class="fu">distinct</span>(date) <span class="sc">%>%</span> </span>
<span id="cb25-32"><a href="#cb25-32" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(<span class="at">date_nice_format =</span> <span class="fu">str_glue</span>(<span class="st">"{month(date, label = TRUE, abbr = FALSE)} {day(date)}, {year(date)}"</span>)) <span class="sc">%>%</span> </span>
<span id="cb25-33"><a href="#cb25-33" aria-hidden="true" tabindex="-1"></a> <span class="fu">pull</span>(date_nice_format)</span>
<span id="cb25-34"><a href="#cb25-34" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb25-35"><a href="#cb25-35" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-36"><a href="#cb25-36" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-37"><a href="#cb25-37" aria-hidden="true" tabindex="-1"></a><span class="fu"># COVID Death Rates as of `r most_recent_day`</span></span>
<span id="cb25-38"><a href="#cb25-38" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-39"><a href="#cb25-39" aria-hidden="true" tabindex="-1"></a>This table shows COVID death rates per 100,000 people in four states states.</span>
<span id="cb25-40"><a href="#cb25-40" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-41"><a href="#cb25-41" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb25-42"><a href="#cb25-42" aria-hidden="true" tabindex="-1"></a><span class="co"># Make table</span></span>
<span id="cb25-43"><a href="#cb25-43" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-44"><a href="#cb25-44" aria-hidden="true" tabindex="-1"></a>covid_data <span class="sc">%>%</span> </span>
<span id="cb25-45"><a href="#cb25-45" aria-hidden="true" tabindex="-1"></a> <span class="fu">slice_max</span>(<span class="at">order_by =</span> date,</span>
<span id="cb25-46"><a href="#cb25-46" aria-hidden="true" tabindex="-1"></a> <span class="at">n =</span> <span class="dv">1</span>) <span class="sc">%>%</span></span>
<span id="cb25-47"><a href="#cb25-47" aria-hidden="true" tabindex="-1"></a> <span class="fu">select</span>(state, deaths_avg_per_100k) <span class="sc">%>%</span> </span>
<span id="cb25-48"><a href="#cb25-48" aria-hidden="true" tabindex="-1"></a> <span class="fu">arrange</span>(state) <span class="sc">%>%</span> </span>
<span id="cb25-49"><a href="#cb25-49" aria-hidden="true" tabindex="-1"></a> <span class="fu">set_names</span>(<span class="st">"State"</span>, <span class="st">"Death rate"</span>) <span class="sc">%>%</span> </span>
<span id="cb25-50"><a href="#cb25-50" aria-hidden="true" tabindex="-1"></a> <span class="fu">reactable</span>()</span>
<span id="cb25-51"><a href="#cb25-51" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb25-52"><a href="#cb25-52" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-53"><a href="#cb25-53" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-54"><a href="#cb25-54" aria-hidden="true" tabindex="-1"></a>We can see this same death rate data for all states on a map.</span>
<span id="cb25-55"><a href="#cb25-55" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-56"><a href="#cb25-56" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb25-57"><a href="#cb25-57" aria-hidden="true" tabindex="-1"></a><span class="co"># Make map</span></span>
<span id="cb25-58"><a href="#cb25-58" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-59"><a href="#cb25-59" aria-hidden="true" tabindex="-1"></a>most_recent <span class="ot"><-</span> us_states <span class="sc">%>%</span> </span>
<span id="cb25-60"><a href="#cb25-60" aria-hidden="true" tabindex="-1"></a> <span class="fu">left_join</span>(covid_data, <span class="at">by =</span> <span class="st">"state"</span>) <span class="sc">%>%</span> </span>
<span id="cb25-61"><a href="#cb25-61" aria-hidden="true" tabindex="-1"></a> <span class="fu">slice_max</span>(<span class="at">order_by =</span> date,</span>
<span id="cb25-62"><a href="#cb25-62" aria-hidden="true" tabindex="-1"></a> <span class="at">n =</span> <span class="dv">1</span>) </span>
<span id="cb25-63"><a href="#cb25-63" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-64"><a href="#cb25-64" aria-hidden="true" tabindex="-1"></a>most_recent <span class="sc">%>%</span> </span>
<span id="cb25-65"><a href="#cb25-65" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(<span class="fu">aes</span>(<span class="at">fill =</span> deaths_avg_per_100k)) <span class="sc">+</span></span>
<span id="cb25-66"><a href="#cb25-66" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_sf</span>() <span class="sc">+</span></span>
<span id="cb25-67"><a href="#cb25-67" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_fill_viridis_c</span>(<span class="at">option =</span> <span class="st">"rocket"</span>) <span class="sc">+</span></span>
<span id="cb25-68"><a href="#cb25-68" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">fill =</span> <span class="st">"Deaths per</span><span class="sc">\n</span><span class="st">100,000 people"</span>) <span class="sc">+</span></span>
<span id="cb25-69"><a href="#cb25-69" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_void</span>()</span>
<span id="cb25-70"><a href="#cb25-70" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb25-71"><a href="#cb25-71" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-72"><a href="#cb25-72" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-73"><a href="#cb25-73" aria-hidden="true" tabindex="-1"></a><span class="fu"># COVID Death Rates Over Time</span></span>
<span id="cb25-74"><a href="#cb25-74" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-75"><a href="#cb25-75" aria-hidden="true" tabindex="-1"></a>The following chart shows COVID death rates from the start of COVID in early 2020 until <span class="in">`r most_recent_day`</span>.</span>
<span id="cb25-76"><a href="#cb25-76" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-77"><a href="#cb25-77" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb25-78"><a href="#cb25-78" aria-hidden="true" tabindex="-1"></a><span class="co"># Make chart</span></span>
<span id="cb25-79"><a href="#cb25-79" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-80"><a href="#cb25-80" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(plotly)</span>
<span id="cb25-81"><a href="#cb25-81" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-82"><a href="#cb25-82" aria-hidden="true" tabindex="-1"></a>covid_chart <span class="ot"><-</span> covid_data <span class="sc">%>%</span> </span>
<span id="cb25-83"><a href="#cb25-83" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(state <span class="sc">%in%</span> <span class="fu">c</span>(<span class="st">"Alabama"</span>,</span>
<span id="cb25-84"><a href="#cb25-84" aria-hidden="true" tabindex="-1"></a> <span class="st">"Alaska"</span>,</span>
<span id="cb25-85"><a href="#cb25-85" aria-hidden="true" tabindex="-1"></a> <span class="st">"Arizona"</span>,</span>
<span id="cb25-86"><a href="#cb25-86" aria-hidden="true" tabindex="-1"></a> <span class="st">"Arkansas"</span>)) <span class="sc">%>%</span> </span>
<span id="cb25-87"><a href="#cb25-87" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(<span class="fu">aes</span>(<span class="at">x =</span> date,</span>
<span id="cb25-88"><a href="#cb25-88" aria-hidden="true" tabindex="-1"></a> <span class="at">y =</span> deaths_avg_per_100k,</span>
<span id="cb25-89"><a href="#cb25-89" aria-hidden="true" tabindex="-1"></a> <span class="at">group =</span> state,</span>
<span id="cb25-90"><a href="#cb25-90" aria-hidden="true" tabindex="-1"></a> <span class="at">fill =</span> deaths_avg_per_100k)) <span class="sc">+</span></span>
<span id="cb25-91"><a href="#cb25-91" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_col</span>() <span class="sc">+</span></span>
<span id="cb25-92"><a href="#cb25-92" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_fill_viridis_c</span>(<span class="at">option =</span> <span class="st">"rocket"</span>) <span class="sc">+</span></span>
<span id="cb25-93"><a href="#cb25-93" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_minimal</span>() <span class="sc">+</span></span>
<span id="cb25-94"><a href="#cb25-94" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">title =</span> <span class="st">"Deaths per 100,000 people over time"</span>) <span class="sc">+</span></span>
<span id="cb25-95"><a href="#cb25-95" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme</span>(<span class="at">legend.position =</span> <span class="st">"none"</span>,</span>
<span id="cb25-96"><a href="#cb25-96" aria-hidden="true" tabindex="-1"></a> <span class="at">plot.title.position =</span> <span class="st">"plot"</span>,</span>
<span id="cb25-97"><a href="#cb25-97" aria-hidden="true" tabindex="-1"></a> <span class="at">plot.title =</span> <span class="fu">element_text</span>(<span class="at">face =</span> <span class="st">"bold"</span>),</span>
<span id="cb25-98"><a href="#cb25-98" aria-hidden="true" tabindex="-1"></a> <span class="at">panel.grid.minor =</span> <span class="fu">element_blank</span>(),</span>
<span id="cb25-99"><a href="#cb25-99" aria-hidden="true" tabindex="-1"></a> <span class="at">axis.title =</span> <span class="fu">element_blank</span>()) <span class="sc">+</span></span>
<span id="cb25-100"><a href="#cb25-100" aria-hidden="true" tabindex="-1"></a> <span class="fu">facet_wrap</span>(<span class="sc">~</span>state,</span>
<span id="cb25-101"><a href="#cb25-101" aria-hidden="true" tabindex="-1"></a> <span class="at">nrow =</span> <span class="dv">2</span>)</span>
<span id="cb25-102"><a href="#cb25-102" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-103"><a href="#cb25-103" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb25-104"><a href="#cb25-104" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplotly</span>(covid_chart)</span>
<span id="cb25-105"><a href="#cb25-105" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>At this point, I could render the <code>index.qmd</code> file individually, but I know I want to render the entire website so let’s do that. You can build a Quarto website just as you did a <code>distill</code> website. Look for the Build tab in the top right of RStudio and click the button that says Render Website. Figure @ref(fig:render-website-button) shows what you should see.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/render-website-button.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The render website button</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>The rendered website should now appear in the Viewer pane on the bottom right panel of RStudio. If you go to the Files pane on the same panel you will also see that a <code>_site</code> folder has been created. If you go into this folder you will see all of the content in your rendered site. I’ll open the <code>index.html</code> file in my web browser. You can see the website in Figure @ref(fig:covid-website-messages).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/covid-website-messages.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The Quarto website with warnings and messages</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>As you can see, there are a lot of warnings and messages that we don’t want to show. In R Markdown we removed these in our <code>setup</code> code chunk, but with Quarto we do it in the YAML. I could add this code to the <code>index.qmd</code> YAML, as we did when making a presentation, to remove all code, warnings, and messages from the output:</p>
<div class="sourceCode" id="cb26"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb26-1"><a href="#cb26-1" aria-hidden="true" tabindex="-1"></a><span class="an">execute:</span><span class="co"> </span></span>
<span id="cb26-2"><a href="#cb26-2" aria-hidden="true" tabindex="-1"></a> echo: false</span>
<span id="cb26-3"><a href="#cb26-3" aria-hidden="true" tabindex="-1"></a> warning: false</span>
<span id="cb26-4"><a href="#cb26-4" aria-hidden="true" tabindex="-1"></a> message: false</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>However, doing this will only make changes to that one file. Instead, we want to add them to the <code>_quarto.yml</code> file.</p>
</section>
<section id="using-the-_quarto.yml-file-to-set-options-for-the-website" class="level4 unnumbered">
<h4 class="unnumbered anchored" data-anchor-id="using-the-_quarto.yml-file-to-set-options-for-the-website">Using the <code>_quarto.yml</code> file to Set Options for the Website</h4>
<p>With <code>distill</code> we used the <code>_site.yml</code> file to make changes to all files in our website. In With Quarto, we use the <code>_quarto.yml</code> file for the same purpose. If you open the <code>_quarto.yml</code> file, you should see three sections:</p>
<ol type="1">
<li>The top sets the project type (in this case, a website).</li>
<li>The middle section is where we set the title of the website as a whole and determine the options for our navigation bar.</li>
<li>The bottom section deals with the appearance.</li>
</ol>
<div class="sourceCode" id="cb27"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb27-1"><a href="#cb27-1" aria-hidden="true" tabindex="-1"></a><span class="fu">project</span><span class="kw">:</span></span>
<span id="cb27-2"><a href="#cb27-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">type</span><span class="kw">:</span><span class="at"> website</span></span>
<span id="cb27-3"><a href="#cb27-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb27-4"><a href="#cb27-4" aria-hidden="true" tabindex="-1"></a><span class="fu">website</span><span class="kw">:</span></span>
<span id="cb27-5"><a href="#cb27-5" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">title</span><span class="kw">:</span><span class="at"> </span><span class="st">"covid-website-quarto"</span></span>
<span id="cb27-6"><a href="#cb27-6" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">navbar</span><span class="kw">:</span></span>
<span id="cb27-7"><a href="#cb27-7" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">left</span><span class="kw">:</span></span>
<span id="cb27-8"><a href="#cb27-8" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="kw">-</span><span class="at"> </span><span class="fu">href</span><span class="kw">:</span><span class="at"> index.qmd</span></span>
<span id="cb27-9"><a href="#cb27-9" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">text</span><span class="kw">:</span><span class="at"> Home</span></span>
<span id="cb27-10"><a href="#cb27-10" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="kw">-</span><span class="at"> about.qmd</span></span>
<span id="cb27-11"><a href="#cb27-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb27-12"><a href="#cb27-12" aria-hidden="true" tabindex="-1"></a><span class="fu">format</span><span class="kw">:</span></span>
<span id="cb27-13"><a href="#cb27-13" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">html</span><span class="kw">:</span></span>
<span id="cb27-14"><a href="#cb27-14" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">theme</span><span class="kw">:</span><span class="at"> cosmo</span></span>
<span id="cb27-15"><a href="#cb27-15" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">css</span><span class="kw">:</span><span class="at"> styles.css</span></span>
<span id="cb27-16"><a href="#cb27-16" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">toc</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Let’s start from the bottom. To remove code, warnings, and messages for all pages in our website, add the portion of the YAML we created above to the <code>_quarto.yml</code> file. The bottom section should now look like this:</p>
<div class="sourceCode" id="cb28"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb28-1"><a href="#cb28-1" aria-hidden="true" tabindex="-1"></a><span class="fu">format</span><span class="kw">:</span></span>
<span id="cb28-2"><a href="#cb28-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">html</span><span class="kw">:</span></span>
<span id="cb28-3"><a href="#cb28-3" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">theme</span><span class="kw">:</span><span class="at"> cosmo</span></span>
<span id="cb28-4"><a href="#cb28-4" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">css</span><span class="kw">:</span><span class="at"> styles.css</span></span>
<span id="cb28-5"><a href="#cb28-5" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">toc</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>
<span id="cb28-6"><a href="#cb28-6" aria-hidden="true" tabindex="-1"></a><span class="fu">execute</span><span class="kw">:</span><span class="at"> </span></span>
<span id="cb28-7"><a href="#cb28-7" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">echo</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb28-8"><a href="#cb28-8" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">warning</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span>
<span id="cb28-9"><a href="#cb28-9" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">message</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>If I now build the website again, I will see it, as in Figure @ref(fig:covid-website-no-messages), with just the content I want to show.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/covid-website-no-messages.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website with warnings and messages removed</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>You can add any additional options that you would add to a single <code>.qmd</code> file to this section of the <code>_quarto.yml</code> file and it will apply them across all pages of your website.</p>
<p>The other parts of the bottom section of the <code>_quarto.yml</code> file deal with the appearance of rendered files. The line <code>theme: cosmo</code> tells Quarto use the cosmo theme (the default when making websites). There are many themes available (the full list is available at https://quarto.org/docs/output-formats/html-themes.html) and I can choose a different one to show how it changes the output.</p>
<div class="sourceCode" id="cb29"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb29-1"><a href="#cb29-1" aria-hidden="true" tabindex="-1"></a><span class="fu">format</span><span class="kw">:</span></span>
<span id="cb29-2"><a href="#cb29-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">html</span><span class="kw">:</span></span>
<span id="cb29-3"><a href="#cb29-3" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">theme</span><span class="kw">:</span><span class="at"> minty</span></span>
<span id="cb29-4"><a href="#cb29-4" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">css</span><span class="kw">:</span><span class="at"> styles.css</span></span>
<span id="cb29-5"><a href="#cb29-5" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">toc</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Using the minty theme results in changes to the colors and fonts on the website, as seen in Figure @ref(fig:covid-website-minty).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/covid-website-minty.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website with the minty theme</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>In addition to using pre-built themes, you can also customize your website with CSS. The <code>css: styles.css</code> section in the <code>_quarto.yml</code> file indicates that Quarto will use any CSS in the <code>styles.css</code> file when rendering. For example, I can add this to the <code>styles.css</code> to make first-level headers red and 50 pixels.</p>
<div class="sourceCode" id="cb30"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb30-1"><a href="#cb30-1" aria-hidden="true" tabindex="-1"></a><span class="at">h1 {</span></span>
<span id="cb30-2"><a href="#cb30-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">color</span><span class="kw">:</span><span class="at"> red;</span></span>
<span id="cb30-3"><a href="#cb30-3" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">font-size</span><span class="kw">:</span><span class="at"> 50px;</span></span>
<span id="cb30-4"><a href="#cb30-4" aria-hidden="true" tabindex="-1"></a><span class="at">}</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>The re-rendered <code>index.html</code>, seen in Figure @ref(fig:covid-website-custom-css), shows the large red headings.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/covid-website-custom-css.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website with custom CSS applied</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>An alternative approach to customizing your website is to use Sass variables. The process for using Sass variables in a <code>.scss</code> file is identical to that laid out above. For example, I can create a file called <code>styles.scss</code> and add a line like this to change the body background to be a light gray color.</p>
<div class="sourceCode" id="cb31"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb31-1"><a href="#cb31-1" aria-hidden="true" tabindex="-1"></a><span class="at">/*-- scss:defaults --*/</span></span>
<span id="cb31-2"><a href="#cb31-2" aria-hidden="true" tabindex="-1"></a><span class="fu">$body-bg</span><span class="kw">:</span><span class="co"> #eeeeee;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>To get Quarto to use this <code>styles.scss</code> file, I adjust the <code>theme</code> line as follows.</p>
<div class="sourceCode" id="cb32"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb32-1"><a href="#cb32-1" aria-hidden="true" tabindex="-1"></a><span class="fu">format</span><span class="kw">:</span></span>
<span id="cb32-2"><a href="#cb32-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">html</span><span class="kw">:</span></span>
<span id="cb32-3"><a href="#cb32-3" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">theme</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="at">minty</span><span class="kw">,</span><span class="at"> styles.scss</span><span class="kw">]</span></span>
<span id="cb32-4"><a href="#cb32-4" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">css</span><span class="kw">:</span><span class="at"> styles.css</span></span>
<span id="cb32-5"><a href="#cb32-5" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">toc</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>The syntax <code>theme: [minty, styles.scss]</code> tells Quarto to use the minty theme and then make any additional tweaks based on the <code>styles.scss</code> file. If I render my website again, I can see the light gray background throughout. Figure @ref(fig:quarto-website-scss) shows the current version.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-website-scss.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website with custom CSS applied through styles.scss</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>Note that when you add a <code>.SCSS</code> file, the tweaks made in your CSS file are no longer applied. If you wanted to use those, you’d need to add them to the <code>styles.scss</code> file.</p>
<p>The line <code>toc: true</code> creates a table of contents on the side of rendered HTML files that you can see in the screenshots above. You can remove it by changing <code>true</code> to <code>false</code>, as seen in Figure @ref(fig:quarto-website-no-toc) below.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-website-no-toc.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website without the table of contents on pages</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>This section of the <code>_quarto.yml</code> file is where you would add any additional options, such as figure height.</p>
<p>The middle section of the <code>_quarto.yml</code> file deals with the title of the website as a whole as well as its navigation. I can change the title by adjusting that line. The <code>navbar</code> section functions nearly identically to how it did in Chapter @ref(websites-chapter) when working with <code>distill</code>. The <code>href</code> is where you list the file you want to link to. The optional <code>text</code> line is where you manually specify the text that should show up for that link. Here are a couple changes to the default <code>_quarto.yml</code> to change the website title and the text for the About page link.</p>
<div class="sourceCode" id="cb33"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb33-1"><a href="#cb33-1" aria-hidden="true" tabindex="-1"></a><span class="fu">website</span><span class="kw">:</span></span>
<span id="cb33-2"><a href="#cb33-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">title</span><span class="kw">:</span><span class="at"> </span><span class="st">"Quarto COVID Website"</span></span>
<span id="cb33-3"><a href="#cb33-3" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">navbar</span><span class="kw">:</span></span>
<span id="cb33-4"><a href="#cb33-4" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">left</span><span class="kw">:</span></span>
<span id="cb33-5"><a href="#cb33-5" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="kw">-</span><span class="at"> </span><span class="fu">href</span><span class="kw">:</span><span class="at"> index.qmd</span></span>
<span id="cb33-6"><a href="#cb33-6" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">text</span><span class="kw">:</span><span class="at"> Home</span></span>
<span id="cb33-7"><a href="#cb33-7" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="kw">-</span><span class="at"> </span><span class="fu">href</span><span class="kw">:</span><span class="at"> about.qmd</span></span>
<span id="cb33-8"><a href="#cb33-8" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">text</span><span class="kw">:</span><span class="at"> About this Website</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Figure @ref(fig:quarto-website-navbar-changes) shows these changes applied to the website.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-website-navbar-changes.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website with chnages to the navigation bar</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>The title on the home page is still covid-website-quarto, but you could change that in the <code>index.qmd</code> file.</p>
<p>Finally, we come to the top section of the <code>_quarto.yml</code>. This is the most straightforward. The line <code>type: website</code> indicates that the current project is a website (other project types include books, wikis, and more).</p>
</section>
<section id="layouts" class="level4">
<h4 class="anchored" data-anchor-id="layouts">Layouts</h4>
<p>When we made our website with <code>distill</code> we used <code>layout = "l-page"</code> to make the map wider. We can accomplish the same thing with Quarto, though the syntax is slightly different. With Quarto, you can adjust the width of the output using the <code>:::</code> syntax we saw above to add HTML <code><div></code> tags. To make the map larger on our Quarto website, we add <code>:::{.column-screen-inset}</code> at the beginning and <code>:::</code> at the end of the code block that makes it.</p>
<div class="sourceCode" id="cb34"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb34-1"><a href="#cb34-1" aria-hidden="true" tabindex="-1"></a>:::{.column-screen-inset}</span>
<span id="cb34-2"><a href="#cb34-2" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span>
<span id="cb34-3"><a href="#cb34-3" aria-hidden="true" tabindex="-1"></a><span class="co">#| out-width: 100%</span></span>
<span id="cb34-4"><a href="#cb34-4" aria-hidden="true" tabindex="-1"></a><span class="co"># Make map</span></span>
<span id="cb34-5"><a href="#cb34-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb34-6"><a href="#cb34-6" aria-hidden="true" tabindex="-1"></a>most_recent <span class="ot"><-</span> us_states <span class="sc">%>%</span> </span>
<span id="cb34-7"><a href="#cb34-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">left_join</span>(covid_data, <span class="at">by =</span> <span class="st">"state"</span>) <span class="sc">%>%</span> </span>
<span id="cb34-8"><a href="#cb34-8" aria-hidden="true" tabindex="-1"></a> <span class="fu">slice_max</span>(<span class="at">order_by =</span> date,</span>
<span id="cb34-9"><a href="#cb34-9" aria-hidden="true" tabindex="-1"></a> <span class="at">n =</span> <span class="dv">1</span>) </span>
<span id="cb34-10"><a href="#cb34-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb34-11"><a href="#cb34-11" aria-hidden="true" tabindex="-1"></a>most_recent <span class="sc">%>%</span> </span>
<span id="cb34-12"><a href="#cb34-12" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(<span class="fu">aes</span>(<span class="at">fill =</span> deaths_avg_per_100k)) <span class="sc">+</span></span>
<span id="cb34-13"><a href="#cb34-13" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_sf</span>() <span class="sc">+</span></span>
<span id="cb34-14"><a href="#cb34-14" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_fill_viridis_c</span>(<span class="at">option =</span> <span class="st">"rocket"</span>) <span class="sc">+</span></span>
<span id="cb34-15"><a href="#cb34-15" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">fill =</span> <span class="st">"Deaths per</span><span class="sc">\n</span><span class="st">100,000 people"</span>) <span class="sc">+</span></span>
<span id="cb34-16"><a href="#cb34-16" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_void</span>()</span>
<span id="cb34-17"><a href="#cb34-17" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
<span id="cb34-18"><a href="#cb34-18" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb34-19"><a href="#cb34-19" aria-hidden="true" tabindex="-1"></a>:::</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Figure @ref(fig:quarto-website-wide-section) shows the wider map.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-website-wide-section.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website with a wider section</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>You may have noticed that I also added the line <code>#| out-width: 100%</code> in the code chunk. This is because we need to specify that the map should take up all of the available width. Without this line, the map would only take up a portion of the available width. There are a number of different output widths you can use (the full list is available at https://quarto.org/docs/authoring/article-layout.html).</p>
</section>
<section id="hosting-your-quarto-website" class="level4 unnumbered">
<h4 class="unnumbered anchored" data-anchor-id="hosting-your-quarto-website">Hosting Your Quarto Website</h4>
<p>After we finished making our <code>distill</code> website in Chapter @ref(websites-chapter), we discussed hosting it using GitHub Pages. You can do the same thing with a Quarto website. Recall that GitHub Pages requires you to publish your website based on the files in the root of your repository or in the <code>docs</code> folder. I’ll do the latter by changing my <code>_quarto.yml</code> file so that the site outputs in the <code>docs</code> folder. To do this, I add a line to the top section of the <code>_quarto.yml</code> file.</p>
<div class="sourceCode" id="cb35"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb35-1"><a href="#cb35-1" aria-hidden="true" tabindex="-1"></a><span class="fu">project</span><span class="kw">:</span></span>
<span id="cb35-2"><a href="#cb35-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">type</span><span class="kw">:</span><span class="at"> website</span></span>
<span id="cb35-3"><a href="#cb35-3" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">output-dir</span><span class="kw">:</span><span class="at"> docs</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Now, when I render my site, the HTML and other files show up in the <code>docs</code> directory. At this point, I can push my repository to GitHub, adjust the GitHub Pages settings as I did in Chapter @ref(websites-chapter) and I will be given a URL where my Quarto website will live.</p>
<p>In addition to using GitHub Pages, Quarto has a free service called Quarto Pub that makes it straightforward to get your materials online. Especially if you are not a GitHub user, this is a great option to publish your work. To show you how Quarto Pub works, let me publish the website we just made to it. To get started, look for the Terminal tab on the bottom left panel of RStudio. Click it and at the prompt enter the text <code>quarto publish</code> and hit enter. Doing so will bring up a list of ways you can publish your website. See Figure @ref(fig:quarto-publish) below.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-publish.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The list of providers to publish your Quarto website</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>Press enter to select Quarto Pub. You’ll then be asked to authorize. Type Y to do so, which will take you to quartopub.com. Sign up for an account (or sign in if you already have one). You should see a screen like Figure @ref(fig:quarto-pub-authorize), indicating that you have successfully signed in and authorized RStudio to connect with Quarto Pub.</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-pub-authorize.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The confirmation screen from Quarto Pub</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>From there, you can return to RStudio. You’ll be prompted to select a name for your website on Quarto Pub. The easiest thing is to select the same name as your project (in my case, that’s <code>quarto-website-covid</code>). Enter the name and hit enter. The site will then be published and you will be taken to the site, as seen in Figure @ref(fig:quarto-pub-website).</p>
<div class="cell">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="assets/quarto-pub-website.png" class="img-fluid figure-img" style="width:100.0%"></p>
<p></p><figcaption class="figure-caption">The website published on Quarto Pub</figcaption><p></p>
</figure>
</div>
</div>
</div>
<p>When you make updates to your site, you can republish to Quarto Pub using the same steps. Quarto Pub is probably the easiest way to publish your HTML files made with Quarto.</p>
</section>
</section>
</section>
<section id="conclusion-should-you-use-r-markdown-or-quarto" class="level2 unnumbered">
<h2 class="unnumbered anchored" data-anchor-id="conclusion-should-you-use-r-markdown-or-quarto">Conclusion: Should You Use R Markdown or Quarto?</h2>
<p>As you’ve seen throughout this chapter, we can do everything we did with R Markdown in Quarto as well. And, unlike R Markdown, we didn’t need to load any external packages to make different outputs. What’s more, the syntax between different output formats is more consistent. For example, because you can make new slides in Quarto by adding first- or second-level headers, the Quarto documents you make to create reports should translate much more easily to presentations.</p>
<p>You’re probably wondering at this point whether you should use R Markdown or Quarto. It’s a big question, and one many in the R community are thinking about.</p>
<p>The first thing to know is that R Markdown is not going away. If you already use R Markdown, you don’t need to switch. As of the writing of this book, I still use R Markdown for most of my work. If you have developed a workflow that uses R Markdown, by all means stick with it.</p>
<p>If you are new to R and have never used R Markdown or Quarto, you may be a good candidate to start with Quarto. The developers of R Markdown have promised to continue its development, but have also said that features they develop for Quarto in the future may not be backported to R Markdown. So, if you’re starting from scratch, start with Quarto.</p>
<p>My strongest recommendation, though, is to use either R Markdown or Quarto. As you’ve seen throughout this chapter, the differences between R Markdown and Quarto are relatively small and the impact on your workflow of switching should be minor. The major impact will come if you switch from a multi-tool workflow to a single tool workflow. Both R Markdown and Quarto can help you become more efficient, avoid manual errors, and share results in a wide variety of formats.</p>
</section>
</section>
</main>
<!-- /main column -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
const toggleBodyColorMode = (bsSheetEl) => {
const mode = bsSheetEl.getAttribute("data-mode");
const bodyEl = window.document.querySelector("body");
if (mode === "dark") {
bodyEl.classList.add("quarto-dark");
bodyEl.classList.remove("quarto-light");
} else {
bodyEl.classList.add("quarto-light");
bodyEl.classList.remove("quarto-dark");
}
}
const toggleBodyColorPrimary = () => {
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");