How to make code block figures appear side-by-side?

[friendly]

Description

My env: Quarto 1.3.450 / R version 4.3.2

For a book project using Quarto I'm trying to place figures side-by-side from R code.
This always worked perfectly with knitr/rmarkdown using fig.show="hold", out.width="49%"
The Quarto documentation https://quarto.org/docs/authoring/figures.html shows
examples using ::: divs and ![Surus](surus.png){#fig-surus}, but not for code blocks.
What am I doing wrong?

I'm currently rendering to HTML, but whatever I do has to work for PDF.

```{r fig.show="hold", out.width="49%"}
#| label: fig-proj-vectors
#| code-fold: true
#| fig-cap: "Data variables viewed as vectors in the space of their projections. The angles of the **x** vectors with respect to the **y** coordinate axes show their relative contributions to each. The lengths of the **x** vectors show the relative degree to which they are library(matlib)

vals <- c(0, 10)
X <- expand.grid(x1 = vals, x2=vals, x3=vals) |> as.matrix()
# project on just x1, x2 plane
P1 <- rbind(diag(2), c(0,0))
Y1 <- X %*% P1
# oblique projection
P2 <- matrix(c(0.71, 0.71, 0, -0.42, .42, 0.84), ncol=2)
Y2 <- X %*% P2

op <- par(mar=c(4, 5, 1, 1)+.1)
xlim <- ylim <- c(-1.1, 1.1)
axes.x <- c(-1, 1, NA, 0, 0)
axes.y <- c(0, 0, NA, -1, 1)
labs <- c(expression(x[1]), expression(x[2]), expression(x[3]))
plot(xlim, ylim, type = "n", asp=1,
     xlab = expression(y[1]), ylab = expression(y[2]),
     cex.lab = 1.8)
circle(0, 0, 1, col = adjustcolor("skyblue", alpha = 0.2))
lines(axes.x, axes.y, col = "grey")
vectors(P1, labels = labs, cex.lab = 1.8, lwd = 3, pos.lab = c(4, 2, 1))

plot(xlim, ylim, type = "n", asp=1,
     xlab = expression(y[1]), ylab = expression(y[2]),
     cex.lab = 1.8)
circle(0, 0, 1, col = adjustcolor("skyblue", alpha = 0.2))
lines(axes.x, axes.y, col = "grey")
vectors(P2, labels = labs, cex.lab = 1.8, lwd = 3)
par(op)
```

But I get two separate figures, each with it's own caption. I want only a single figure number and caption for this example.
As well, the figure numbering doesn't work. I get:

WARNING: 03-multivariate_plots.html: Unable to resolve crossref @fig-proj-vectors

I also tried using include_graphics() with the figures generated from the previous code block. But this produces no output.

```{r}
#| label: fig-proj-vectors
#| fig-show: hold
#| out-width: "49%"
#| echo: false
#| fig-cap: "Data variables viewed as vectors in the space of their projections. The angles of the **x** vectors with respect to the **y** coordinate axes show their relative contributions to each. The lengths of the **x** vectors show the relative degree to which they are represented in the space of **y**s. Left: **P1** projection; right: **P2** projection."
knitr::include_graphics(c("figs/ch03/fig-proj-vectors-1.png",
                          "figs/ch03/fig-proj-vectors-2.png"))
```

As it is, all I can do is to combine the two figures in an image editor.

[mcanouil]

In Quarto, you should only use YAML syntax.
More importantly, you should not mix options syntaxes:

```{r fig.show="hold", out.width="49%"}
#| label: fig-proj-vectors
#| code-fold: true
```

should be (even in Rmarkdown):

```{r}
#| label: fig-proj-vectors
#| code-fold: true
#| fig-show: "hold"
#| out-width: "49%"
```

This being said, I suggest to take a look at https://quarto.org/docs/authoring/figures.html#computations.

Quarto document	HTML
--- title: "Quarto Playground" format: html: default pdf: default engine: knitr --- ```{r} #| layout-ncol: 2 plot(1) plot(2) ```

Try to make your code small and simple, when asking for help.

[friendly]

Thanks. What I was missing was the layout-ncol: option.

Also, it's not entirely clear to me how layout relates to out-width when combined with layout-ncol and how to get Quarto to generate just a single figure number and one caption. On the first, I figured out to use out-width: "100%"

But the following gives three figure numbers, each with the same caption

```{r}
#| label: fig-peng-tour-demo
#| layout-ncol: 3
#| echo: false
#| out-width: "100%"
#| fig-cap: "Grand tours of the penguin dataset in 2, 3, and 4 dimensions using different `display_*()` methods."
knitr::include_graphics("images/peng-tour-demo1.png")
knitr::include_graphics("images/peng-tour-demo2.png")
knitr::include_graphics("images/peng-tour-demo3.png")
```

[mcanouil]

First, note that your code is not reproducible which makes it hard to help and needs extra work.
Second, why would you expect the three figures (using fig- prefix means cross-referenceable figures) to have different caption if you only provide one?

PS: don't use option you don't need such as out-width.

Quarto document	HTML
--- title: "Quarto Playground" format: html engine: knitr --- This is a playground for Quarto. ```{r} #| label: fig-peng-tour-demo #| layout-ncol: 3 #| echo: false #| fig-cap: #| - "Caption 1" #| - "Caption 2" #| - "Caption 3" plot(1) plot(2) plot(3) ```

[friendly]

I'll use a quarto playground in future...

But, in this case I want ONLY ONE figure number and ONE figure caption.

From my code, Quarto generated THREE fig numbers, and they al use the same caption

[mcanouil]

I see. I think you are missing the purpose of using fig- and in general the purpose of cross-referenceable objects.

A figure is a single entity.
If your entity is composed of several entities, then each are inevitably sub-entities inheriting from the parent.
When you make a multiple figures, it's unlikely you are going to reference only the figure as a whole. Using "the figure in the middle" kind of reference does not seem to be the right way. With this in mind, Quarto makes the sub-entities referenceable that's by design.
Now you have the ability to remove the sub captions and keep only the main caption under the three figures, but the figures will still have a/b/c underneath to allow them to be referenced.

If you really want to make a single figure out of the three, then use patchwork or magick to combine them.

Edit:

---
format: html
---

```{r}
#| label: fig-whatever
#| layout-ncol: 3
#| fig-cap: My main caption
#| fig-subcap: true
plot(1)
plot(2)
plot(3)
```

[friendly]

For the record:

@mcanouil 's explanation was very helpful in understanding the way Quarto wants to do things like this, but I prefer in many cases to compose images side-by-side and have a single caption without the sub labels (a), (b), ...

patchwork is the easy solution for ggplot2 graphics. But what about base R graphics?

Here is a magick solution:

library(magick)
p1 <- image_read("figs/ch03/fig-proj-vectors-1.png")
p2 <- image_read("figs/ch03/fig-proj-vectors-2.png")
# join them left to right
p12 <- image_append(c(p1, p2), stack = FALSE)
image_write(p12, path="images/proj-vectors-1-2.png", format="png")

In a code chunk, I don't need to save the final image, I can just use image_append() after creating the figures. But I think I have to save the partial images. Something like the following (untested):

```{r}
#| label: fig-proj-vectors
#| out-width: "100%"
#| fig-cap: "Data variables viewed as vectors in the space of their projections. ..."
png(tempfile("p1", ext = "png"))
plot(1)
dev.off()
png(tempfile("p2", ext = "png"))
plot(2)
dev.off()
image_append(c(p1, p2), stack = FALSE)

Is there a way to do this without using temp files? In my usage, I don't want to show the code in my document this way.
I suppose I could use non-echod chunks, but this would be somewhat messy.

[mcanouil]

patchwork is the easy solution for ggplot2 graphics. But what about base R graphics?

patchwork supports tables (gt) and base plots.

See https://patchwork.data-imaginist.com/articles/guides/assembly.html