7 Elements
7.2 Showing quarto code
This one isn’t as much a slidecrafting tip, as it is a quarto tip! If you are showing how to do something in Quarto using Quarto you need this tip. In essence what we are working with are unexcuted blocks.
Adding a markdown cell around what you want to show. Important to use more ticks than any of the inside cells inside.
Using double curly brackets to indicate that the code block should not be executed. The following code when used in a quarto document will render as shown in the example
```` markdown
This is **Quarto** code
```{{python}}
1 + 1
```
````{{python}}), so the code block appears verbatim rather than being run.7.3 Changing plot backgrounds
Plots and charts are useful in slides. Changing the background makes them fit in. This post will go over how to change the background of your plots to better match the slide background, in a handful of different libraries.
7.3.1 Why are we doing this?
If you are styling your slides to change the background color, you will find that most plotting libraries default to using a white background color. If your background is non-white it will stick out like a sore thumb. I find that changing the background color to something transparent #FFFFFF00 is the easiest course of action.
Why make the background transparent instead of making it match the background?
It is simply easier that way. There is only one color we need to set and it is #FFFFFF00. This works even if the slide background color is different from slide to slide, or if the background is a non-solid color.
7.3.2 base R
we don’t have to make any changes to the R code, we can supply the chunk options dev and dev.args for the chunk to "png" and list(bg="transparent") respectively and you are good. The chunk will look like this.
```{r, dev = "png", dev.args=list(bg="transparent")}
plot(mpg ~ disp, data = mtcars, col = factor(am), pch = 16, bty = "n")
```You can also change the options globally using the following options in the yaml.
knitr:
opts_chunk:
dev: png
dev.args: { bg: "transparent" }
7.3.3 ggplot2
ggplot2 are handled the same way as base R plotting, so we don’t have to make any changes to the R code, we can supply the chunk options dev and dev.args for the chunk to "png" and list(bg="transparent") respectively and you are good. The chunk will look like this.
```{r, dev = "png", dev.args=list(bg="transparent")}
library(ggplot2)
mtcars |>
ggplot(aes(disp, mpg, color = factor(am))) +
geom_point() +
theme_minimal()
```You can also change the options globally using the following options in the yaml.
knitr:
opts_chunk:
dev: png
dev.args: { bg: "transparent" }
7.3.4 matplotlib
With matplotlib, we need to set the background color twice, once for the plotting area, and once for the area outside the plotting area.
fig = plt.figure()
# outside plotting area
plt.axes().set_facecolor("#FFFFFF00")
# your plot
plt.scatter(x, y, c=colors)
# inside plotting area
fig.patch.set_facecolor("#FFFFFF00")
7.3.5 seaborn
For seaborn, we also set it twice, both of them in set_style()
sns.set_style(rc={'axes.facecolor':'#FFFFFF00',
'figure.facecolor':'#FFFFFF00'})
7.3.6 Source Document
The above was generated with this document.
7.4 Plot sizing
Plots and charts are useful in slides. But we need to make sure they are sized correctly to be as effective as possible.
7.4.1 auto-stretch option
Revealjs slides default to having the option auto-stretch: true, this ensures that figures always fit inside the slide. You can turn it off globally like this.
format:
revealjs:
auto-stretch: falseor on a slide-by-slide basis by adding the .nostretch class to the slide.
## Slide Title {.nostretch}We see how they affect sizing in the following slides first with the default, and second with .nostretch.
auto-stretch: true (default): the figure is automatically scaled down to fit within the slide boundaries..nostretch class: the figure is shown at its natural size, potentially overflowing the slide.By themselves, they look pretty similar. One occasion where you really notice the difference is when there are other elements on the slide. auto-stretch makes sure the image fits by making the image smaller as seen below.
auto-stretch enabled: image is shrunk to fit alongside the other content..nostretch: image renders at full natural size and may overlap or push other content off the slide.7.4.2 Sizing Options
When sizing plots we need to remember that we have to deal with two kinds of sizes. First is the size of the actual file on disk, this is controlled using out-width and out-height. Next is how big the image is supposed to be in the document, which is controlled using fig-width, fig-height, and/or fig-asp. Lastly, you can control the location using fig-align and the resolution using fig-dpi.
All of these numbers will change depending on whether you have a title or other elements on your slides, what fonts you use, and the aspect ratio of the slides themselves.
7.4.2.1 out-width, out-height
Setting these options affects the size of the resulting image on disk. If they are set smaller than usual, we get an image that doesn’t take up the whole screen.
```{r}
#| out-width: 6in
#| out-height: 3.5in
```out-width: 6in, out-height: 3.5in: the saved image file is small, resulting in a figure that does not fill the slide.out-width/out-height example, shown alongside a default-sized chart.I don’t find myself using these options much as I tend to want images that take up most of the space, but they are useful to know.
7.4.3 fig-width, fig-height
I end up using fig-width and fig-height the most out of the options shown in this blog post. I find that the default values are too high, making the text on the plot too small for the viewer to see. Especially for an in-person audience.
Below is the same chart 4 times with different value pairs for fig-width and fig-height. Notice how the default values appear to be around fig-width: 9 and fig-height: 5.
fig-width: 9, fig-height: 5 (Reveal.js defaults): text labels on the chart appear small and may be hard to read for an audience.fig-width and fig-height: larger text relative to the plot area, improving readability for live audiences.fig-width/fig-height combination showing how the ratio between dimensions affects text and element sizes on the chart.fig-width/fig-height variant in the comparison series, demonstrating that smaller values produce larger, more legible chart text.All of the above figures have roughly the same aspect ratios, but if you want others you just specify different values. Like this square chart below.
fig-width and fig-height values, demonstrating how aspect ratio is controlled independently of the slide dimensions.7.4.4 fig-asp
You might have noticed that the ratios shown in the last section weren’t identical. Because unless you deal with 1-2 or 1-1 ratios you are going to get decimals very fast. And you have to recalculate small things over and over again. This is why fig-asp is amazing. Simply determine the aspect ratio between the height and width, set that as the fig-asp and then you just have to set one of fig-height or fig-width. Is it too small? increase fig-height and keep fig-asp the same. is it too big? decrease fig-height and keep fig-asp the same.
fig-asp to fix the aspect ratio: changing fig-height scales the chart proportionally without needing to update both dimensions.fig-asp ratio at a different fig-height, showing how the chart scales up or down while maintaining consistent proportions.7.4.5 fig-align
Unless your chart fits fully inside the slide then it tends to be left aligned, you can change that with fig-align, setting it to left, center or right.
fig-align: left: the figure is positioned against the left edge of the slide content area.fig-align: center: the figure is centered horizontally on the slide.fig-align: right: the figure is positioned against the right edge of the slide content area.7.4.6 fig-dpi
Lastly, something you might need to worry about is the Dots Per Inch (DPI) specified by fig-dpi. This is a measure of resolution in your chart. If you see your chart becoming a little blurry, increase the dpi until it isn’t anymore. Note that dpi will result in larger file sizes, so only change if you have to.
fig-dpi: text and lines are crisp and sharp, at the cost of a larger file size.7.4.7 Make work with columns
even if you set the option globally, you will have to make slide-by-slide adjustments, such as with charts in .columns. Below is one example of how we can modify the fig-asp to make it look decent in a column layout.
fig-asp adjusted to fit the narrower column width, preventing the figure from overflowing its column.7.4.8 Source Document
The above was generated with this document.