Exploring Interactive Code Cells

Unleash the Power of Interactive R Code in Your Quarto Documents

Welcome to the world of interactive code cells, unlocked by the community quarto-webr extension. These cells allow you to run R code directly within your Quarto HTML documents, enabling real-time computations, dynamic visualizations, and more. Let’s explore the impressive capabilities webR offers.

Creating webR-Enabled Code Cells

To create a webR-enabled code cell, simply use the {webr-r} tag in your Quarto HTML document, like this:

For example, the code cell above, powered by webr, was generated by entering the following into the Quarto document:

```{webr-r}
1 + 1
```

Sample Use Cases

Now, let’s delve into some practical scenarios where interactive code cells shine.

Fit a Linear Regression Model

We begin by using the “Hello World” example of statistics: fitting and analyzing a linear regression.

Line-by-line Execution

In this section, we’ll explore the built-in keyboard shortcuts for executing code within the interactive code cell. You can run either the selected code or specific lines or the entire cell with the following keyboard shortcuts:

• Run selected code:
  • macOS: ⌘ + ↩︎/Return
  • Windows/Linux: Ctrl + ↩︎/Enter
• To run the entire code cell, you can simply click the “Run code” button, or use the keyboard shortcut:
  • Shift + ↩︎

Feel free to try it out in the following code cell:

By using these shortcuts, you can run code conveniently and efficiently. This practice can also help you become familiar with keyboard shortcuts when transitioning to integrated development environments (IDEs) like RStudio or Visual Studio Code with R.

Preventing Modifications to Code

Code cells can be locked to their initial state by specifying #| read-only: true. The next code cell has such a feature implemented. Try modifying the expression 1 + 1 to any other value.

{quarto-webr} Output

Cell code

```{webr-r}
#| read-only: true
1 + 1
```

Note

This option can be paired with autorun: true to avoid having the user press the “Run code” button to see the output.

Drawing Attention to Code

Lines of code can be highlighted using editor-code-line-numbers to draw attention to specific parts of the code. For example:

• editor-code-line-numbers: 1-3 will highlight lines 1 to 3.
• editor-code-line-numbers: 1,3,6 will highlight lines 1, 3, and 6.
• editor-code-line-numbers: 1,3-5,7 will highlight lines 1, 3 to 5, and 7.

We can see the 1,3-5,7 example in the following code cell:

{quarto-webr} Output

Cell code

```{webr-r}
#| read-only: true
#| editor-code-line-numbers: 1,3-5,7

# This is a comment

1 + 1
2 + 2
3 + 3

# This is another comment
```

Create a Graph with Base R

For this example, webR empowers us to create and visualize data plots interactively. We can tweak labels, colors, or even the variables being used on an as-needed basis to explore “What if …” scenarios. For instance, what if we try changing the value blue to orange and run the code again.

Fill in the Blanks

Another approach is to purposely leave out part of a command during an exercise to afford students structure in solving it. For example, we could have the question of:

Fill in the blank to have the following expression add up to 42.

Data Wrangle in Real Time

Data manipulation is a crucial part of data analysis. In this example, we’ll modify a data set in real-time and view the results. It’s like changing ingredients while cooking to get the perfect dish!

Working with R Packages

You can incorporate R packages available in webR by installing them interactively using webr::install() within a {webr-r} code cell or by specifying them in the document’s YAML. Once you’ve installed a package, you can harness its power just as you would in a traditional R environment. For more details, please refer to Using R Packages.

Note

Please note that installing certain packages, such as ggplot2, may take some time depending on the communication channel being used.

Let’s take ggplot2 as an example:

With ggplot2 now installed, let’s create a graph with it!

Variable Definitions and Reuse

Define variables in one code cell and reuse them in subsequent cells:

Functions

Functions can similarly be defined and used in one code cell or multiple code cells.

Note

The function definition must be run before calling the function. Otherwise, there will be an error that is generated.

Handling Errors and Warnings

When webR encounters an error while running R code, the error and warning messages are displayed to the user.

For example, if the routine has a hard stop, the execution immediately ends, and the message is shared.

Similarly, if a variable is not found, then the code stops being evaluated and returns an error.

Unlike errors, warning messages are allowed to propagate into the output without stopping the computation.

This is even the case inside of complex functions.

Escaping Characters in a String

Handle special characters in strings with ease:

Anonymous Function Definition

Define and use anonymous functions seamlessly:

Empty Code Cell

Define an empty code cell by simply leaving it blank.

Pre-rendered Code Cell

Any code using the usual {r} tag will be executed, and its output saved, just as if you were rendering a Quarto document without the webR extension:

message("Hello!")

Hello!

Fin

These are just some of the powerful features and capabilities that webR brings to your Quarto HTML documents, making your data analysis and presentation more dynamic and engaging. Have an interesting example to share? Let us know at our issue tracker!

Important

This Quarto extension is open source software and is not affiliated with Posit, Quarto, or webR. The extension is at best a community effort to simplify the integration of webR inside of Quarto generated documents.