-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.qmd
468 lines (337 loc) · 13.3 KB
/
index.qmd
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
---
title: "Quarto Presentations"
subtitle: "An interactive slide **template** for Habitat<br>build with Quarto and Reveal.js"
authors: ""
# add emoji extension
from: markdown+emoji
format:
revealjs:
theme: [moon, styles.scss]
slide-number: false
chalkboard:
buttons: false
preview-links: auto
logo: images/habitat_compact.png
footer: Slides adapted from the [`Quarto`](https://quarto.org/docs/presentations/revealjs/) example
---
## :wave: Hello, There
This presentation will show you examples of what you can do with Quarto and [Reveal.js](https://revealjs.com), including:
- Presenting code and LaTeX equations
- Including computations in slide output
- Image, video, and iframe backgrounds
- Fancy transitions and animations
...and much more
## Pretty Code {auto-animate="true"}
- Over 20 syntax highlighting themes available
- Default theme optimized for accessibility
``` r
# Define a server for the Shiny app
function(input, output) {
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
# Render a barplot
})
}
```
::: footer
Learn more: [Syntax Highlighting](https://quarto.org/docs/output-formats/html-code.html#highlighting)
:::
## Code Animations {auto-animate="true"}
- Over 20 syntax highlighting themes available
- Default theme optimized for accessibility
``` r
# Define a server for the Shiny app
function(input, output) {
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
# Render a barplot
barplot(WorldPhones[,input$region]*1000,
main=input$region,
ylab="Number of Telephones",
xlab="Year")
})
}
```
::: footer
Learn more: [Code Animations](https://quarto.org/docs/presentations/revealjs/advanced.html#code-animations)
:::
## Line Highlighting
- Highlight specific lines for emphasis
- Incrementally highlight additional lines
``` {.python code-line-numbers="4-5|7|10"}
import numpy as np
import matplotlib.pyplot as plt
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```
::: footer
Learn more: [Line Highlighting](https://quarto.org/docs/presentations/revealjs/#line-highlighting)
:::
## Executable Code
```{r}
#| echo: true
#| fig-width: 10
#| fig-height: 4.5
library(ggplot2)
ggplot(mtcars, aes(hp, mpg, color = am)) +
geom_point() +
geom_smooth(formula = y ~ x, method = "loess")
```
::: footer
Learn more: [Executable Code](https://quarto.org/docs/presentations/revealjs/#executable-code)
:::
## LaTeX Equations
[MathJax](https://www.mathjax.org/) rendering of equations to HTML
::: columns
::: {.column width="40%"}
``` tex
\begin{gather*}
a_1=b_1+c_1\\
a_2=b_2+c_2-d_2+e_2
\end{gather*}
\begin{align}
a_{11}& =b_{11}&
a_{12}& =b_{12}\\
a_{21}& =b_{21}&
a_{22}& =b_{22}+c_{22}
\end{align}
```
:::
::: {.column width="60%"}
```{=tex}
\begin{gather*}
a_1=b_1+c_1\\
a_2=b_2+c_2-d_2+e_2
\end{gather*}
```
```{=tex}
\begin{align}
a_{11}& =b_{11}&
a_{12}& =b_{12}\\
a_{21}& =b_{21}&
a_{22}& =b_{22}+c_{22}
\end{align}
```
:::
:::
::: footer
Learn more: [LaTeX Equations](https://quarto.org/docs/authoring/markdown-basics.html#equations)
:::
## Column Layout {.smaller}
Arrange content into columns of varying widths:
::: columns
::: {.column width="35%"}
#### Motor Trend Car Road Tests
The data was extracted from the 1974 Motor Trend US magazine, and comprises fuel consumption and 10 aspects of automobile design and performance for 32 automobiles.
:::
::: {.column width="3%"}
:::
::: {.column width="62%"}
```{r}
knitr::kable(head(mtcars)[,c("mpg", "cyl", "disp", "hp", "wt")])
```
:::
:::
::: footer
Learn more: [Multiple Columns](https://quarto.org/docs/presentations/revealjs/#multiple-columns)
:::
## Incremental Lists
Lists can optionally be displayed incrementally:
::: incremental
- First item
- Second item
- Third item
:::
. . .
<br/> Insert pauses to make other types of content display incrementally.
::: footer
Learn more: [Incremental Lists](https://quarto.org/docs/presentations/revealjs/#incremental-lists)
:::
## Fragments
Incremental text display and animation with fragments:
<br/>
::: {.fragment .fade-in}
Fade in
:::
::: {.fragment .fade-up}
Slide up while fading in
:::
::: {.fragment .fade-left}
Slide left while fading in
:::
::: {.fragment .fade-in-then-semi-out}
Fade in then semi out
:::
. . .
::: {.fragment .strike}
Strike
:::
::: {.fragment .highlight-red}
Highlight red
:::
::: footer
Learn more: [Fragments](https://quarto.org/docs/presentations/revealjs/advanced.html#fragments)
:::
## Slide Backgrounds {background="#43464B"}
Set the `background` attribute on a slide to change the background color (all CSS color formats are supported).
Different background transitions are available via the `background-transition` option.
::: footer
Learn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds)
:::
## Media Backgrounds {background="#43464B" background-image="https://raw.githubusercontent.com/quarto-dev/quarto-web/main/docs/presentations/revealjs/demo/images/milky-way.jpeg"}
You can also use the following as a slide background:
- An image: `background-image`
- A video: `background-video`
- An iframe: `background-iframe`
::: footer
Learn more: [Media Backgrounds](https://quarto.org/docs/presentations/revealjs/#image-backgrounds)
:::
## Absolute Position
Position images or other elements at precise locations
{.absolute top="170" left="30" width="400" height="400"}
{.absolute .fragment top="150" right="80" width="450"}
{.absolute .fragment bottom="110" right="130" width="300"}
::: footer
Learn more: [Absolute Position](https://quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)
:::
## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"}
Automatically animate matching elements across slides with Auto-Animate.
::: r-hstack
::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
:::
::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"}
:::
::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"}
:::
:::
::: footer
Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
:::
## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"}
Automatically animate matching elements across slides with Auto-Animate.
::: r-stack
::: {data-id="box1" style="background: #2780e3; width: 350px; height: 350px; border-radius: 200px;"}
:::
::: {data-id="box2" style="background: #3fb618; width: 250px; height: 250px; border-radius: 200px;"}
:::
::: {data-id="box3" style="background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;"}
:::
:::
::: footer
Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
:::
## Slide Transitions {.smaller}
The next few slides will transition using the `slide` transition
| Transition | Description |
|------------|------------------------------------------------------------------------|
| `none` | No transition (default, switch instantly) |
| `fade` | Cross fade |
| `slide` | Slide horizontally |
| `convex` | Slide at a convex angle |
| `concave` | Slide at a concave angle |
| `zoom` | Scale the incoming slide so it grows in from the center of the screen. |
::: footer
Learn more: [Slide Transitions](https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)
:::
## Tabsets {.smaller .scrollable transition="slide"}
::: panel-tabset
### Plot
```{r}
library(ggplot2)
ggplot(mtcars, aes(hp, mpg, color = am)) +
geom_point() +
geom_smooth(formula = y ~ x, method = "loess")
```
### Data
```{r}
knitr::kable(mtcars)
```
:::
::: footer
Learn more: [Tabsets](https://quarto.org/docs/presentations/revealjs/#tabsets)
:::
## Preview Links
Navigate to hyperlinks without disrupting the flow of your presentation.
Use the `preview-links` option to open links in an iframe on top of your slides. Try clicking the link below for a demonstration:
::: {style="text-align: center; margin-top: 1em"}
[Matplotlib: Visualization with Python](https://matplotlib.org/){preview-link="true" style="text-align: center"}
:::
::: footer
Learn more: [Preview Links](https://quarto.org/docs/presentations/revealjs/presenting.html#preview-links)
:::
## Themes
10 Built-in Themes (or [create your own](https://quarto.org/docs/presentations/revealjs/themes.html#creating-themes))
::: {layout-ncol="2"}
:::
::: footer
Learn more: [Themes](https://quarto.org/docs/presentations/revealjs/themes.html)
:::
## Easy Navigation
::: {style="margin-bottom: 0.9em;"}
Quickly jump to other parts of your presentation
:::
::: {layout="[1, 20]"}
{width="41"}
Toggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools.
:::
You can also press `m` to toggle the menu open and closed.
::: footer
Learn more: [Navigation](https://quarto.org/docs/presentations/revealjs/presenting.html#navigation-menu)
:::
## Chalkboard {chalkboard-buttons="true"}
::: {style="margin-bottom: 0.9em;"}
Free form drawing and slide annotations
:::
::: {layout="[1, 20]"}
{width="41"}
Use the chalkboard button at the bottom left of the slide to toggle the chalkboard.
:::
::: {layout="[1, 20]"}
{width="41"}
Use the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.
:::
You can also press `b` to toggle the chalkboard or `c` to toggle the notes canvas.
::: footer
Learn more: [Chalkboard](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)
:::
## Point of View
Press `o` to toggle overview mode:
{.border}
Hold down the `Alt` key (or `Ctrl` in Linux) and click on any element to zoom towards it---try it now on this slide.
::: footer
Learn more: [Overview Mode](https://quarto.org/docs/presentations/revealjs/presenting.html#overview-mode), [Slide Zoom](https://quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom)
:::
## Speaker View
Press `s` (or use the presentation menu) to open speaker view
{fig-align="center" style="border: 3px solid #dee2e6;" width="780"}
::: footer
Learn more: [Speaker View](https://quarto.org/docs/presentations/revealjs/presenting.html#speaker-view)
:::
## Authoring Tools {.smaller}
Live side-by-side preview for any notebook or text editor including Jupyter and VS Code
::: columns
::: {.column width="50%"}
{.border .border-thick}
:::
::: {.column width="50%"}
{.border .border-thick}
:::
:::
::: footer
Learn more: [Jupyter](https://quarto.org/docs/tools/jupyter-lab.html), [VS Code](https://quarto.org/docs/tools/vscode.html), [Text Editors](https://quarto.org/docs/tools/text-editors.html)
:::
## And More...
- [Touch](https://quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides)
- [Footer & Logo](https://quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide)
- [Auto-Slide](https://quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input)
- [Multiplex](https://quarto.org/docs/presentations/revealjs/presenting.html#multiplex) (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop).
::: footer
Learn more: [Quarto Presentations](https://quarto.org/docs/presentations/revealjs/)
:::