Plotting and Graphics

Introduction

The quarto-live extension prepares the R and Python environments with WebAssembly-compatible graphics devices, so plotting works out of the box. In this guide, you’ll learn how to create interactive visualizations and customize your plots directly within your Quarto documents.

Dynamic Visualization Examples

Below are examples of interactive plotting for both R and Python, shown side-by-side using a Quarto tabset.

R Example

Python Example

Customsing Plot Size

You can configure the plot size using the fig-width and fig-height cell options. Figure size is measured in inches, and plots are rendered with an internal 2× scaling.

R: Custom Plot Dimensions

Source

```{webr}
#| fig-width: 8
#| fig-height: 4
plot(rnorm(10000), t = 'l')
```

Output

Python: Custom Plot Dimensions

Source

```{pyodide}
#| fig-width: 8
#| fig-height: 4
#| fig-dpi: 72
import matplotlib.pyplot as plt
import numpy as np

x = np.random.normal(1, 1, 10000)
plt.plot(x, '-')
plt.show() 
```

Output

Browser Requirements for Graphics

For both R and Python, the default canvas-based graphics device requires a web browser that supports the OffscreenCanvas API. Most modern browsers support this API; however, older systems or some mobile devices may not.

R Graphics

For webR graphics, there is a fallback bitmap device based on a WebAssembly build of the Cairo graphics library. Although this fallback works well, it is slower and requires an additional resource download at page load.

Python Graphics

For Pyodide, there is currently no bitmap fallback. Unsupported browsers may display an error message similar to:

Warning

Cannot import ‘OffscreenCanvas’ from ‘js’

Note

A similar bitmap graphics fallback for Python is planned for a future version of quarto-live.

Further Reading

For more details on interactive plotting, consider exploring:

• Interactive Data Visualization in R – Learn to build dynamic visualizations using ggplot2 and Plotly.
• Interactive Plotting in Python – Dive deeper into creating interactive charts using matplotlib and Plotly.
• Hybrid Execution and Visualization – Explore advanced techniques for combining pre-rendered and live interactive graphics.

Explore More Articles

Note

Here are more articles from the same category to help you dive deeper into the topic.