index

Reactivity?

HUH?

Example: footy scores

menu + slider => chart of footy scores

viewof footyTeam2 = Inputs.select(
  ["Pies", "Blues", "Bombers", "Cats"],
  { value: "Blues", label: "Footy team" })

viewof year2 = Inputs.range([1990, 2005],
  { value: 1990, step: 1, label: "Year", width: 300 })

footyTeam2 = "Blues"

year2 = 1990

scores2 = FileAttachment("data/footy-scores.csv").csv({ typed: true })
filteredScores2 = scores.filter(d => d.team == footyTeam2 && d.year == year2)

Plot.plot({
  marks: [
    Plot.barY(filteredScores2, { x: "game", y: "score", fill: "game" })
  ],
  x: { label: "Game number", labelOffset: 70 },
  y: { label: "Score" },
  width: 800,
  height: 500,
  marginLeft: 60,
  marginBottom: 90,
  marginTop: 60,
  style: {
    fontSize: 24
  }
})

scores2 = Array(832) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

filteredScores2 = Array(13) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

Code is usually about doing things

Write code to create a control
Write code to check its value all the time
Write code to do things every time it changes
Write code to pass updates from one thing to another

This gets old quickly!

😩

Reactive code just updates itself

Describe a control or input

Describe an output that reacts to the control’s changes

… there is no step 3

(the output takes care of itself!)

This is how Shiny and Dash work!

menu + slider => chart of footy scores

# describe some controls - a dropdown menu
# and a slider - and a plot

ui <- fluidPage(

  selectInput("footyTeam",
    label = "Footy team",
    choices = c("Pies", "Blues",
      "Bombers", "Cats"),
    selected = "Blues"),
  sliderInput("year", label = "Year",
    1990, 2005, value = 1991),
  plotOutput("footyScores")
  
)# describe some controls - a dropdown menu
# and a slider - and a plot

ui <- fluidPage(

  selectInput("footyTeam",
    label = "Footy team",
    choices = c("Pies", "Blues",
      "Bombers", "Cats"),
    selected = "Blues"),
  sliderInput("year", label = "Year",
    1990, 2005, value = 1991),
  plotOutput("footyScores")
  
)

# for the plot, filter our data and
# draw a line chart

server <- function(input, out) {
  output$footyScores <- renderPlot({

    scores %>%
    filter(
      year == input$year,
      house == input$footyTeam) %>%
    {
      ggplot(.) +
        aes(x = game, y = score) +
        geom_line()
    }
    
  })}# for the plot, filter our data and
# draw a line chart

server <- function(input, out) {
  output$footyScores <- renderPlot({

    scores %>%
    filter(
      year == input$year,
      house == input$footyTeam) %>%
    {
      ggplot(.) +
        aes(x = game, y = score) +
        geom_line()
    }
    
  })}

So why not use Shiny?

Shiny already works with R Markdown, and it works with Quarto too

But you need R running to react to things as people read the document, not just when you render it

This requires a special web server! (eg. shinyapps.io)

So why not use Shiny?

In media, charts could be viewed 100k+ times in days

(If I’m lucky…)

I can’t afford a Shiny server for that kind of traffic!

Enter Observable JS

Quarto gives us a new kind of code chunk called OJS

It lets us write JavaScript that is naturally reactive

Observable JS: no server required

We make a slider called x…

viewof x = Inputs.range(
  [0, 100], { step: 1 })

x = 50

… and then reference it:

md`The square of ${x} is ${x**2}!
  How about that!`

The square of 50 is 2500! How about that!

The text reacts to the changing value of x. Nice!

viewof footyTeam = Inputs.select(
  ["Pies", "Blues", "Bombers", "Cats"],
  { value: "Blues", label: "Footy team" })

viewof year = Inputs.range([1990, 2005],
  { value: 1990, step: 1, label: "Year", width: 300 })

footyTeam = "Blues"

year = 1990

viewof footyTeam = Inputs.select(
  ["Pies", "Blues", "Bombers", "Cats"],
  { value: "Blues", label: "Footy team" })

viewof year = Inputs.range(
  [1990, 2005],
  {
    value: 1990,
    step: 1, label: "Year",
    width: 300
  })

Plot
Code

scores = FileAttachment("data/footy-scores.csv").csv({ typed: true })
filteredScores = scores.filter(d => d.team == footyTeam && d.year == year)

Plot.plot({
  marks: [
    Plot.barY(filteredScores, { x: "game", y: "score", fill: "game" })
  ],
  x: { label: "Game number", labelOffset: 70 },
  y: { label: "Score" },
  width: 800,
  height: 500,
  marginLeft: 60,
  marginBottom: 90,
  marginTop: 60,
  style: {
    fontSize: 24
  }
})

scores = Array(832) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

filteredScores = Array(13) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

scores = FileAttachment("data/footy-scores.csv")
  .csv({ typed: true })

// filter it using the controls
filteredScores = scores.filter(
  d => d.team == footyTeam &&
  d.year == year)

// make the chart
Plot.plot({
  marks: [
    Plot.barY(filteredScores, {
      x: "game",
      y: "score",
      fill: "game"
    })
  ],
  x: {
    label: "Game number",
    labelOffset: 70
  },
  y: { label: "Score" },
  width: 800,
  height: 500,
  marginLeft: 60,
  marginBottom: 90,
  marginTop: 60,
  style: { fontSize: 24 }
})

Quarto +

OJS means

You can do your data analysis in R, Python or Julia
You can make visuals that react to users
You don’t need to worry about the cost if it gets popular
Learning JavaScript is as easy as possible

R/Python Widgets

“Web content” in R Markdown usually involves a special R or Python package (eg. htmlwidgets)

👍 Convenient

👎 Customising means learning JavaScript and learning how an R package works

Quarto + OJS

It’s just JavaScript!

You get great libraries bundled in to try out JS:

Observable Plot for making charts
Observable Inputs for making controls
Arquero for data analysis (it’s just like dplyr)

Seriously, just like `dplyr`, I’m not even kidding

Remember the survey before?

I did that with Observable Plot and Arquero.

Here’s the code I used to tally up survey responses:

countsUsed = aq.from(surveyResults)
  .derive({
    used: d => op.split(d.responseUsed, ", ")
  })
  .select("used")
  .unroll("used")
  .groupby("used")
  .count()
  .derive({ measure: d => "Have used" })
  .rename({ used: "tool" })

Quarto

Create beautiful documents with R, Python, Julia and Observable

JAMES GOLDIE