Quarto Dashboards

Hi!

My name is Isabella Velásquez.

ivelasq3 | ivelasq | ivelasq | ivelasq.rbind.io

(Quick) Intro to Quarto

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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()
```

Python for Data Analysis, 3E by Wes McKinney

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

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

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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:

Navigation

Add a logo and buttons to your navigation bar:

dashboard.qmd

---
title: "My first Quarto dashboard"
format: 
  dashboard:
    logo: images/car.png
    nav-buttons:
      - reddit
      - icon: gitlab
        href: https://gitlab.com/ivelasq
---

## 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)
```

Navigation

Add a logo and buttons to your navigation bar:

dashboard.qmd

---
title: "My first Quarto dashboard"
format: 
  dashboard:
    logo: images/car.png
    nav-buttons:
      - reddit
      - icon: gitlab
        href: https://gitlab.com/
---

## 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)
```

Data Display

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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.

Sidebars

To include a sidebar, add the .sidebar class to a Level 2 heading:

dashboard.qmd

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

## {.sidebar}

Sidebar text here!

## Column

### 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)
```

Sidebars

To include a sidebar, add the .sidebar class to a Level 2 heading:

dashboard.qmd

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

## {.sidebar}

Sidebar text here!

## Column

### 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)
```

Interactivity

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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

Cloud

On-Prem

Shiny Server (open source)
Posit Connect (commercial)
Roll your own

Wrap Up

(Quick) Intro to Quarto
Quarto Dashboards
Dashboard Basics
Layout Options
Data Display
Inputs
Interactivity
Theming
Deployment
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