A quick experiment with WebR: how much can I do in under an hour?

I got a leaflet through my door the other day with a bar graph that just didn’t look right. It inspired me to create a tool to easily create a bar graph online, so that people can do a quick side-by-side comparison. I’ve been wanting an excuse to give WebR a go, and this seems like a good place to start, so I thought I’d live blog my way through my first hour of playing with WebR. Ready, get set, go!

Author

Affiliation

Cara Thompson

Building Stories with Data

It’s 1.45pm, my daughters have just started watching a cartoon, and I thought I’d see whether I can put together a quick WebR page before it finishes. Racing against Mickey Mouse wasn’t quite how I thought I would end up creating my first WebR project, but here we are. On your marks, get set, go!

To do this, I’m starting with James Goldie’s write up of how he created a package demo page. My website is already built with Quarto, so I’ve installed the WebR extension (by running quarto add coatless/quarto-webr in the terminal) and added filters: ["webr"] to the YAML in the front matter of this post.

Here goes my attempt at a first bit of editable and executable code…

I wasted about 10 minutes on a typo, but we have an editable code chunk! The code chunk needs to use ```{webr-r}, not ```{web-r}. Still, we have some code running, and Mickey hasn’t won the race yet! Change the 5 to a different number, and you should get the that number plus 1 printed under the code box when you hit “Run code”.

Now let’s see if we can do something more substantial… I’ve installed the {tidyverse} by including the following in the YAML:

---
webr:
  packages:
  - "tidyverse"
---

It works! The fact that I had installed the whole {tidyverse} was slowing things down, so I’ve changed the front matter to only include the packages I actually need (at this stage, {ggplot2} and {dplyr}). We now have a web page with a piece of executable code that generates a plot. It’s 14.05 and I’m feeling pretty positive about this!

Tada! A plot where people can edit the labels and the values.

Now, let’s add {ggtext} to the mix - my go-to annotation package - and some styling.

We’ve moved on to Super Kitties (my favourite kids cartoon title sequence at the moment!), and I got sidetracked by trying to hide the code (ultimately, I only really want the data to be editable). But it’s only 2.35 and I’ve made something that works. So I’m going to leave it there. The plot looks pretty much like the original, except the bars are the right length for the data they represent.

Next step: make this into something that doesn’t show as much code and it easier for people to interact with… Watch this space!