Introduction

I’m enrolled in STAT 541: Advanced Statical Computing with R this quarter. The class is project based, with weekly labs demonstrating the skills we built that week. As part of the class, we are to maintain a Quarto website. One of the labs we we did was on Quarto Dashboards, a new(ish) feature in Quarto, debuting in Quarto 1.4. We made a static dashboard first, then proceeded to make it interactive. Interactivity can be obtained in two broad ways–server-side and client-side. Server side is far more common, and can easily be gotten with Shiny. I wanted to be able to serve a static file which was self-contained, however, so I turned to quarto-live.

Note: I’m going to be focusing on R, but everything should(?) be possible with Python, using pyodide instead of webR.

R in the Browser

So how does one have a client-side interactive dashboard? The answer is WebAssembly, a low-level target which can be compiled to in order to allow for execution of various languages in the browser sandbox. I know very little about WASM so I won’t bother blundering through an explanation. Check this R sandbox out to see how cool the end product is though.

Note that not all R packages just work–here’s a list of available webR packages (which seems to be, ironically, a Shiny app.) Note that curl isn’t compiled for WASM, which I’d assume hamstrings any analyses which rely on loading online data. Most of the tidyverse works, and there are usually alternatives even if your go-to doesn’t work. Note that Josiah Parry posted recently on how to build local packages for webR.

Dashboarding

I watched Mine Çetinkaya-Rundel’s video on Quarto dashboards which I thought was very helpful. The full 3-part series seems to go into great detail and is a great starting place to make a dashboard.

Interactive dashboards, however, are a bit harder to learn about–quarto-live is relatively new, so there don’t seem to be too many resources surrounding client side interactive dashboards.If you want to use Shiny, there are some resources. Though the quarto-live documentation hosts a dashboard (source), it is somewhat simplistic. It does a decent bit with OJS though, which is useful to reference.

The source for my interactive dashboard is here (rendered). I think it is self-contained/explanatory enough to pull both up and see what maps to what. I don’t do anything fancy and use very little OJS, so this is most useful for webR stuff. Also, note that I am yet to fix an empty card which pops up in the “data” tab of the Vaccine Belief page. Please open an issue/PR if you know what’s causing that.

Notes

Some random notes I collated which I think would’ve been helpful when making my dashboard.

YAML

 1title: "Trust in Science in the 2018 Global Health Monitor Report"
 2format:
 3  live-dashboard:
 4    theme: pulse
 5    orientation: columns
 6    nav-buttons: [github, linkedin]
 7    github: https://github.com/VisruthSK/lab-4
 8    linkedin: https://www.linkedin.com/in/visruthsk/
 9logo: images/Wellcome_Trust_logo.svg
10logo-alt: stylized W above "wellcome"
11embed-resources: true
12engine: knitr
13resources:
14  - data
15webr:
16  render-df: gt-interactive
17  packages:
18    - tidyverse
19    - gt
20    - rnaturalearthdata
21    - rnaturalearth
22    - here
23    - glue
24    - htmltools
25    - htmlwidgets
26    - RColorBrewer
27    - scales
28    - leaflet
29    - sf
30    - plotly
31    - gghalves
32    - webr

Some of this is for the dashboard, and parts are specific to webR specifically. There are two important webR things to note here: resources which defines what directories are loaded alongside the dashboard (to allow you to do read_csv(here("data", "wellcome.csv"))), & packages which defines the packages available to the webR instance when its first spun up. You can interactively install packages as well, but packages listed here can be loaded without any extra installation (webR will download and install them on load, as you can see in the bottom right of the page sometimes).

Lack of Memory

The browser seems to expose little memory to processes, like webR, so it is a good idea to pre-process the data before passing it in.

Communicating between OJS and R

The quarto-live documentation is good at describing how to pass variables between R and OJS. I use this in the “Flash Facts” cards in my dashboard, which reflect any filtering done to df.