WH

Quarto - Revealjs

Presentations in Quarto

Not only is quarto good for document publishing needs, it can also be used as presentation tool. With quarto, you can leverage revealjs to display your charts and graphs.

Columns

There might be a situation where you would want to present your graphs in two columns. This makes better use of the space in one slide to accommodate two figures.

:::: {.columns}
:::: {.column}
First column
::::

:::: {.column}
Second Column
::::
::::

Fragments

Rendering the graphs using python might display other code content on your slide. Hide the graph generated by the python code block and refer to the graph's svg content instead with a fragment. A {.fragment} block allows you to display the content incrementally that is not text.

::: {.fragment}

```{python}
#| output: false

# Output chart to svg image format
plt.savefig('./images/my_chart.svg', format='svg')
```
::: {.fragment}
![](./images/my_chart.svg)
:::

:::

Speaker Notes / Timer

When you are presenting, you should also ensure you are concisely delivering your content. Revealjs offers a timer inside the {.notes} block to help with your pacing. The {.notes} block is primarily used to assist the presenter in noting what topics should be addressed, but you can use the {.notes} block just for the timer too.

::: {.notes}

Some of my notes.

:::

Final Output / Exporting

To make the slides distributable to your audience, you will need to preserve the slides in html format, but it is also essential to make it a standalone html file by including all the required dependencies (css, js, fonts, svgs, etc.) for the slide inside the html.

In your front-matter include the following

---
format:
    revealjs:
        embed-resources: true
        self-contained-math: true
        output-file: slides-index.html
---

We are using output-file key to create a different output file to not have it overwrite the development html. Comment out the three lines when you want to go back to the development flow.