How to build a multi-layer plot step by step using a grid in knitr?

Question

For the interactive tutorial accompanying the workshop, I would like to emphasize the use of the grid package (especially how to work with viewports). To do this, I would like to build step by step (i.e. Piece by piece). Between each of the steps / pieces, I would like to include plain text to explain each step in more detail.

How can I say that knitr does not evaluate the piece separately, but to begin the evaluation, where did the previous fragment end? Basically, instead of re-evaluating the fragment, I want to add to the result of the previous fragment.

In the code below, what happens is that I get 2 graphics in the .html output when knitting in html. The first shows the results of the first fragment (pink rectangle and some text), and the second shows the results of the second fragment (blue rectangle). What I would like to achieve is two graphs - the first graph showing the results of the first fragment (as above), and the second graph showing the results of the first fragment + the results of the second fragment (blue rectangle in the pink rectangle). Basically, I would like to reproduce the behavior of two code blocks when running in console R. The blue rectangle should be placed in a pink rectangle and not painted separately.

Here is the first fragment

```{r grid first vp, tidy = FALSE}
library(grid)
grid.newpage()

## draw a rectangle around the root vp and provide some text
grid.rect()
grid.text("this is the root vp", x = 0.5, y = 1, just = c("centre", "top"))

vp <- viewport(x = 0.5, y = 0.5, 
               height = 0.5, width = 0.5,
               just = c("centre", "centre"))

pushViewport(vp)

grid.rect(gp = gpar(fill = "pink"))
grid.text("this is our first vp", x = 0.5, y = 1, just = c("centre", "top"))
```

Then several explanatory texts appear:

", root x = 0.5 y = 0.5 - just = c("centre", "centre"), - height = 0.5 width = 0.5.

- pushViewport(vp), , - grid.rect(gp = gpar(fill = "pink"))

, . , , , (). , ( , ).

```{r grid second vp, tidy = FALSE}

vp <- viewport(x = 0.5, y = 0.5, 
               height = 0.5, width = 0.5,
               just = c("centre", "centre"))

pushViewport(vp)

grid.rect(gp = gpar(fill = "cornflowerblue"))
```

, , knitr "" , , " " ?

Answer 1

, . ,

opts_knit$set(global.device = TRUE)

, , , , .

Answer 2

grid.grab(), , ( ). , knitr , grid.grab() , , .

```{r first, tidy = FALSE}
library(grid)
grid.newpage()

## draw a rectangle around the root vp and provide some text
grid.rect()
grid.text("this is the root vp", x = 0.5, y = 1, just = c("centre", "top"))

vp <- viewport(x = 0.5, y = 0.5, 
               height = 0.5, width = 0.5,
               just = c("centre", "centre"), 
               name="first")

pushViewport(vp)

grid.rect(gp = gpar(fill = "pink"))
grid.text("this is our first vp", x = 0.5, y = 1, just = c("centre", "top"))
scene <- grid.grab()
```

```{r second, tidy = FALSE, fig.keep='last'}
grid.draw(scene)
seekViewport("first")
vp <- viewport(x = 0.5, y = 0.5, 
               height = 0.5, width = 0.5,
               just = c("centre", "centre"))

pushViewport(vp)

grid.rect(gp = gpar(fill = "cornflowerblue"))
```

, ,

```{r second, tidy = FALSE}
<<first>>
vp <- viewport(x = 0.5, y = 0.5, 
               height = 0.5, width = 0.5,
               just = c("centre", "centre"))

pushViewport(vp)

grid.rect(gp = gpar(fill = "cornflowerblue"))
```