Using vegawidget in Quarto

Data 304

The vegawidget package

```{r}
library(vegawidget)
```

The goal of vegawidget is to render Vega-Lite and Vega specifications as htmlwidgets, and to help you communicate with a Vega chart using JavaScript or Shiny. Its ambition is to be a low-level interface to the Vega(-Lite) API, so that other packages can build upon it.

Accordingly, this package may be useful to:

  • build (using lists of lists) re-usable Vega and Vega-Lite specifications for deployment elsewhere.
  • develop higher-level, user-friendly packages to compose specific types of plots, or even to build a general ggplot2-like framework, using this package as the rendering foundation.

Rendering JSON

  1. Create JSON spec as an R string.

    1. Use single quotes around JSON spec
    2. Use double gotes withing JSON spec

  2. Pass string to as_vegaspec() to convert to vegaspec and render.

Rendering JSON – An example

```{r}
'
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://cdn.jsdelivr.net/npm/vega-datasets@2.8.0/data/gapminder.json"},
  "height": 150, "width": 400,
  "mark": "point",
  "transform": [{"filter": "datum.year == 1990"}],
  "encoding": {
    "x": {"field": "fertility", "type":  "quantitative"},
    "y": {"field": "life_expect", "type": "quantitative"},
    "color": {"value": "maroon"}
  }
}' |> as_vegaspec()
```

Alternative to JSON

Instead of creating a Vega-Lite specification in JSON as a string, you have the option to

  1. Create the specification as an R list using
  • R lists in place of JSON objects and arrays
  • vega_schema() to output the schema string.
  1. Pass the R list to as_vegaspec()

Alternative to JSON – an example

```{r}
my_spec <- 
  list(
    `$schema` = vega_schema(),
    data = list(url = "https://cdn.jsdelivr.net/npm/vega-datasets@2.8.0/data/gapminder.json"),
    height = 150, width = 400,
    mark =  "point",
    transform = list(list(filter = "datum.year == 1990")),
    encoding = list(
      x =  list(field = "fertility", type = "quantitative"),
      y =  list(field = "life_expect", type = "quantitative"),
      color = list(value =  "maroon")
    )
  )
my_spec |> as_vegaspec()
```

Other output formats

You can export your Vega-Lite graphic as SVG or PNG.

```{r}
#| results: markup
my_spec |> as_vegaspec() |> 
  vw_write_svg(path = "myplot.svg", width = 400, height = 200)
```

Use this code to include your graphic in a quarto document.

![Scatter plot of life expectancy by ferticility in 1990](myplot.svg)

012345678fertility020406080life_expect

Scatter plot of life expectancy by ferticility in 1990

For creating PDF documents

I recommend using the typst format for PDFs.

  • doesn’t rely on latex, so less to install and configure
  • (much) faster than latex
  • works well with SVG format
  • getting SVGs to render on a Mac may require some installation (Cairo R package, XQuartz)
    • PNGs will probably work out-of-the-box, but the resolution may not be as sharp and the graphics aren’t scalable.

Do that by setting the format to typst in your YAML header.

format: typst

More to come

From the vegawidget documentation:

This package provides functions to render Vega(-Lite) specifications; although it provides some helpers, it does not provide higher-level functions to build specifications. Rather, this is left to other packages. Even though you can use its functions directly, you are invited to import and re-export them for use in your package.

  • R packages altair and vegabrite provide tools to build Vega-Lite specifications using R functions.

  • Vega-Lite specifications can also be created with Python or Javascript code.