Quarto Dashboards, Part 2

Now that we’ve acquired some skills for making dashboards, let’s spice them up a bit! This week, we’re going to add interactive content to our dashboards!

Historically, if you wanted to make a Shiny dashboard, you would have created a .R file containing the UI and server interfaces. In January 2024, Posit released Quarto 1.4 for creating layouts with interactive components. While the ideas are still the same—UI and server interfaces—we can now create a dashboard in a familiar Quarto context!

What is Shiny?

Let’s start with a broad overview of what Shiny is. Please skim over “Getting Started” page for the Shiny R package.

How does this translate into Quarto?

As we said, the document layout of a Shiny “app” is different from a Quarto dashboard with Shiny. So, let’s see how these ideas translate. Please skim over introduction page for Dashboards with Shiny.

Check-inCheck In
  1. What gets added to the YAML to move from a static Quarto dashboard to a Shiny dashboard?
  1. What are the three execution contexts that can be used? Meaning, what are the three options that can come after |# context: in a code chunk? Hint: Two are included on this page, and you can find the third on this page.
  • context: setup
  • context: packages
  • context: server
  • context: ui
  • context: render
  • context: data
  1. If no |# context: is provided in a code chunk, what context does Quarto assume the code chunk should have?
  • server
  • setup
  • data
  • None of the above
  1. Let’s unpack the three components to selectInput('x', 'X', names(dataset)).

  1. The first component ('x') represents the [choices / variable name / label] that stores the value to be given to the renderPlot({}) function as input$x.

  2. The second component ('X') represents the [choices / variable name / label] displayed on the dashboard.

  3. The third component (names(dataset)) represents the [choices / variable name / label] displayed in the dropdown menu.

  1. When a dataset is reactive, how do you pass the data into ggplot()?
  1. When a dataset is reactive (changes based on the user input), what function would you use to create a plot?
  • plot({})
  • Plot({})
  • renderplot({})
  • renderPlot({})
  1. Match each component to its role in displaying a table from a reactive dataset.

  • renderTable({})

  • output$data

  • tableOutput('data')

  • Displays the table in the dashboard.
  • Stores the result of the table.
  • Creates the table from the reactive data.

Where should I put my inputs?

The example we just walked through had a sidebar (on the left) for users to control the dashboard. This isn’t the only place these controls can go!

Let’s read this resource on dashboard input layout.

Check-inCheck In

  1. To create a sidebar, you would use ____. To create a toolbar, you would use ____.

  2. A sidebar clearly goes on the side, but where does a toolbar go? Select all that apply.

  • On the top of the page.
  • On the bottom of the page.
  • On the top of the card.
  • On the bottom of the card.
  1. [True / False] Instead of the input taking up the entire top or side of the dashboard, you could place the input into a specific card.

Where can I learn more?

The pages we’ve read focused on this dashboard and its source code. Let’s poke around another example dashboard: