Quarto Dashboards

Hi!

My name is Isabella Velásquez.

ivelasq3 | ivelasq | ivelasq | ivelasq.rbind.io

(Quick) Intro to Quarto

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

What is Quarto?

Quarto® is an

open-source

technical

content creation system.

  • Create documents in your favorite editor
  • Create dynamic content with Python, R, Julia, and Observable
  • Publish technical content in HTML, PDF, MS Word, and more
  • Share technical content by publishing to Posit Connect, Confluence, or other publishing systems

Why Quarto?

  • Multilingual and independent of computational systems
  • Shared expression for core features
  • Enable “single-source publishing” — create Word, PDFs, HTML, etc. from one source

How does Quarto work?

---
title: "ggplot2 demo"
format: 
  html:
    code-fold: true
---

## Meet Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

```{r}
#| label: plot-penguins
#| echo: false
#| message: false
#| warning: false

library(tidyverse)
library(palmerpenguins)

ggplot(penguins, 
       aes(x = flipper_length_mm, y = bill_length_mm)) +
  geom_point(aes(color = species, shape = species)) +
  scale_color_manual(values = c("darkorange","purple","cyan4")) +
  labs(
    title = "Flipper and bill length",
    subtitle = "Dimensions for penguins at Palmer Station LTER",
    x = "Flipper length (mm)", y = "Bill length (mm)",
    color = "Penguin species", shape = "Penguin species"
  ) +
  theme_minimal()
```

What can you build with Quarto?

nbdev.fast.ai

Python for Data Analysis, 3E by Wes McKinney

https://jollydata.blog/

The untold story of palmerpenguins by Dr. Kristen Gorman, Dr. Allison Horst, and
Dr. Alison Hill

Journal of Statistical Software (JSS)

Dashboard by Mine Çentikaya-Rundel

Learn more about Quarto

Intro to Quarto - Isabella Velásquez

Learn more about Quarto

Building a Website in R - Federica Gazzelloni

Learn more about Quarto

Branded Quarto - Emil Hvitfeldt

Quarto Dashboards

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Quarto Dashboards

  • A new output format for creating dashboards from notebooks
  • Publish groups of visualizations, tables, text together
  • Released in Quarto 1.4

Tip

Run this command in your terminal to see what version of Quarto you are on:

Terminal
quarto --version

Quarto Dashboards

Goal is to make it simple to build compelling interactive dashboards using R, Python, Julia, and Observable.

https://quarto.org/docs/dashboards/examples/

Dashboard Basics

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Dashboard Basics

Dashboards are composed of cards.

Dashboard Basics

Cards are arranged into rows and columns.

Dashboard Basics

Pages, tabsets, and sidebars allow for more advanced layouts.

Start from Scratch

Begin with front matter:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

Start from Scratch

Add a card:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
plot(mtcars)
```

Start from Scratch

Add a card:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
plot(mtcars)
```

Start from scratch

Continue adding cards:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
plot(mtcars)
```

```{r}
plot(mtcars$mpg)
```

Start from Scratch

Add a title to your cards:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Layout Options

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Rows

By default, cards are laid out in rows:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Rows

By default, cards are laid out in rows:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars)
```

Columns

We can change it to be columns instead:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: columns
---

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Headings

Alternatively, we can use headings to arrange cards:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## Row

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars)
```

Headings

Alternatively, we can use headings to arrange cards:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## Row

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars)
```

Headings

Make another row with content:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## Row

Here is my dashboard:

## Row

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Headings

Continue adding content:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## Row

Here is my dashboard:

## Row

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

```{r}
#| title: "Plot 3"
plot(mtcars$hp)
```

Headings

We can add columns within our rows:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## Row

Here is my dashboard:

## Row

### Column

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars)
```

### Column

```{r}
#| title: "Plot 3"
plot(mtcars)
```

Tabsets

Or use tabsets to put content in different tabs:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## Row

Here is my dashboard:

## Row

### Column {.tabset}

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

### Column

```{r}
#| title: "Plot 3"
plot(mtcars$hp)
```

Tabsets

Pages

Use a Level 1 heading to create new pages:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## Row

Here is my dashboard:

# Page 1

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

# Page 2

```{r}
#| title: "Plot 3"
plot(mtcars$hp)
```

Pages

Use a Level 1 heading to create new pages:

Data Display

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Cards

Cards are the fundamental unit of display within dashboards.

Text

Cards can also have arbitrary markdown:

::: {.card}
This text will be displayed within a card
:::

Enclose the both the cell and the content in a .card div to include content alongside the output of a cell:


::: {.card}
```{r}
plot(mtcars)
```

Above is my plot.
:::

Text

Content that is included at the top of a dashboard is considered leading content, and will be included as is with no card styling:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

## Row

Here is my dashboard:

## Row

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Plots

Both interactive JavaScript-based plots and standard raster based plots are supported.

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

## Row

```{r}
#| title: "Plot 1"
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Plots

Size plots in static dashboards using code chunk options:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

## Row

```{r}
#| title: "Plot 1"
#| fig-width: 5
#| fig-height: 4
plot(mtcars)
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Tables

Produce tabular output within cards:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

## Row

```{r}
#| title: "Table 1"
mtcars |> tibble::as_tibble() |> dplyr::filter(cyl == 6)  |> gt::gt()
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Tables

Produce tabular output within cards:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

## Row

```{r}
#| title: "Table 1"
mtcars |> tibble::as_tibble() |> dplyr::filter(cyl == 6)  |> gt::gt()
```

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Value Boxes

Value boxes display simple values within a dashboard:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

## Row

::: {.valuebox color="#F52A32"}
Last updated:

`{{r}} Sys.Date()`
:::

```{r}
#| content: valuebox
#| title: "Spam per day"
n <- mtcars |> tibble::as_tibble() |> dplyr::count() |> dplyr::pull(n)

list(
  icon = "trash",
  color = "#F52A32",
  value = n
)
```

## Row

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Value Boxes

dashboard.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

## Row

::: {.valuebox color="#F52A32"}
Last updated:

2024-07-18
:::

```{r}
#| content: valuebox
#| title: "Spam per day"
n <- mtcars |> tibble::as_tibble() |> dplyr::count() |> dplyr::pull(n)

list(
  icon = "trash",
  color = "#F52A32",
  value = n
)
```

## Row

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Value Boxes

Inputs

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Input Layout

There are several ways to layout inputs within interactive dashboards:

  • Sidebars provide a collapsible vertical panel for inputs.

  • Toolbars provide a horizontal panel for inputs.

  • Card Inputs provide a panel for card-specific inputs.

Input Layout

There are several ways to layout inputs within interactive dashboards:

  • Sidebars provide a collapsible vertical panel for inputs.

  • Toolbars provide a horizontal panel for inputs.

  • Card Inputs provide a panel for card-specific inputs.

Interactivity

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Shiny

  • The Shiny package provides an easy way to build web applications with R.
  • Quarto dashboards can include embedded Shiny components (e.g. a plot with sliders that control its inputs) to add interactivity.

Quarto or Shiny?

Why not both?

https://forum.posit.co/t/quarto-dashboards-vs-shiny/178402

Non-interactive dashboard

dashboard.qmd
---
title: "Non-interactive Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## {.sidebar}

## Column

### Row

Here is my dashboard:

### Row

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Non-interactive dashboard

dashboard.qmd
---
title: "Non-interactive Quarto dashboard"
format: 
  dashboard:
    orientation: rows
---

## {.sidebar}

## Column

### Row

Here is my dashboard:

### Row

```{r}
#| title: "Plot 2"
plot(mtcars$mpg)
```

Add Interactive Components

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
server: shiny
---

```{r}
#| context: setup
library(ggplot2)
```

## {.sidebar}

```{r}
selectInput(
    "variableChoice",
    "Choose a variable:",
    choices = names(mtcars)
  )
```

## Column

### Row

Here is my dashboard:

### Row

```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```

```{r}
#| context: server

output$variablePlot <- renderPlot({
  yVar <- mtcars[[input$variableChoice]]
  plot(mtcars$index, yVar)
})
```

Add Interactive Components

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    orientation: rows
server: shiny
---

```{r}
#| context: setup
library(ggplot2)
```

## {.sidebar}

```{r}
selectInput(
    "variableChoice",
    "Choose a variable:",
    choices = names(mtcars)
  )
```

## Column

### Row

Here is my dashboard:

### Row

```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```

```{r}
#| context: server

output$variablePlot <- renderPlot({
  yVar <- mtcars[[input$variableChoice]]
  plot(mtcars$index, yVar)
})
```

Add Interactive Components

Theming

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Bootswatch Themes

Quarto includes 25 themes from the Bootswatch project:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    theme: united
server: shiny
---

```{r}
#| context: setup
library(ggplot2)
```

## {.sidebar}

```{r}
selectInput(
    "variableChoice",
    "Choose a variable:",
    choices = names(mtcars)
  )
```

## Column

### Row

Here is my dashboard:

### Row

```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```

```{r}
#| context: server

output$variablePlot <- renderPlot({
  yVar <- mtcars[[input$variableChoice]]
  plot(mtcars$index, yVar)
})
```

Bootswatch Themes

Quarto includes 25 themes from the Bootswatch project:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    theme: united
server: shiny
---

```{r}
#| context: setup
library(ggplot2)
```

## {.sidebar}

```{r}
selectInput(
    "variableChoice",
    "Choose a variable:",
    choices = names(mtcars)
  )
```

## Column

### Row

Here is my dashboard:

### Row

```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```

```{r}
#| context: server

output$variablePlot <- renderPlot({
  yVar <- mtcars[[input$variableChoice]]
  plot(mtcars$index, yVar)
})
```

Bootswatch Themes

Custom Themes

Create an entirely custom theme:

dashboard.qmd
---
title: "My first Quarto dashboard"
format: 
  dashboard:
    theme: style.scss
server: shiny
---

```{r}
#| context: setup
library(ggplot2)
```

## {.sidebar}

```{r}
selectInput(
    "variableChoice",
    "Choose a variable:",
    choices = names(mtcars)
  )
```

## Column

### Row

Here is my dashboard:

### Row

```{r}
#| title: "Plot 2"
plotOutput("variablePlot")
```

```{r}
#| context: server

output$variablePlot <- renderPlot({
  yVar <- mtcars[[input$variableChoice]]
  plot(mtcars$index, yVar)
})
```

Custom Themes

style.scss
/*-- scss:defaults --*/

@import url('https://fonts.googleapis.com/css2?family=Baumans&display=swap');

$font-family-sans-serif: "Baumans";
$body-bg: #F2E2C5;
$body-color: #21409A;
$code-color: #5f5f5f;
$input-bg: #F2E2C5;
$navbar-bg: #A6290D;
$h2-font-size:  1.6rem !default;
$headings-font-weight:  500 !default;

/*-- scss:rules --*/

h1, h2, h3, h4, h5, h6 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

Custom Themes

Deployment

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Deployment Types

Dashboards are typically just static HTML pages so can be deployed to any web server or web host.

  • Static: Rendered a single time (e.g. when underlying data won’t ever change)
  • Scheduled: Rendered on a schedule (e.g. via cron job) to accommodate changing data.
  • Parameterized: Variations of static or scheduled dashboards based on parameters.
  • Interactive: Fully interactive dashboard using Shiny (requires a server for deployment).

Static Deployment Options

Interactive Deployment Options

Wrap Up

  1. (Quick) Intro to Quarto

  2. Quarto Dashboards

  3. Dashboard Basics

  4. Layout Options

  5. Data Display

  6. Inputs

  7. Interactivity

  8. Theming

  9. Deployment

  10. Wrap Up

Templates

I added a folder of templates for different dashboard layouts in the GitHub repository:

Thank you!

ivelasq3 | ivelasq | ivelasq | ivelasq.rbind.io