Lecture 12

Quarto Dashboards

Byeong-Hak Choe

bchoe@geneseo.edu

SUNY Geneseo

April 30, 2025

Quarto Dashboards

Quarto Dashboards

What is a dashboard?

• A dashboard is a way of displaying various types of visual data in one place.
  • Usually, a dashboard is intended to convey different, but related information in an easy-to-digest form.
  • E.g., SUNY Geneseo Institutional Research Discovery Dashboards

Quarto Dashboards

A new output format for easily creating
dashboards from .qmd files

.qmd ➝ Dashboard

---
title: "Dashing through the snow ❄️"
format: dashboard
---

# content goes here...

Quarto Dashboards

• Quarto Dashboards requires Quarto version above 1.4.

  • Download Quarto

Dashboard Basics

• Dashboards are composed of cards
• Cards are arranged into rows and columns
• Pages, tabsets, and sidebars allow more advanced layouts

With these simple building blocks, it is pretty straightforward to build some cool dashboards…

Dashboard Basics

--- 
title: My Dashboard
author: Your Name
format:
  dashboard
---

```{r}
library(tidyverse)
```

```{r}

```

Plots

Each code chunk makes a card, and can take a title

```{r}
#| title: GDP and Life Expectancy

library(gapminder)
library(tidyverse)
ggplot(gapminder, 
       aes(x = gdpPercap, 
           y = lifeExp, 
           color = continent)) +
  geom_point()
```

Value Boxes

• Value boxes are a great way to prominently display simple values within a dashboard. For example, here is a dashboard row with three value boxes:

Value Boxes

```{r}
#| content: valuebox
#| title: "Spam per day"

list(
  icon = "trash",
  color = "danger",
  value = spam
)
```

Value Boxes

icon and color

• The icon used in value boxes can be any of the 2,000 available bootstrap icons.

• The color can be any CSS color value, however there are some color aliases that are tuned specifically for dashboards that you might consider using by default:

• primary: Blue
• secondary: Gray
• success: Green
• info: Bright Blue

• warning: Yellow/Orange
• danger: Red
• light: Light Gray
• dark: Black

Navigation Bar and Pages

--- 
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: 
  dashboard:
    logo: img/penguins.png
    nav-buttons: [github]
    github: https://github.com/bcdanl/310
---

# Bills

# Flippers

# Data

Sidebars: Page Level

---
title: "Sidebar"
format: dashboard
---
    
# Page 1

## {.sidebar}

```{r}
```

## Column 

```{r}
```

```{r}
```

# Page 2


::: {.cell}

:::

Sidebars: Global

---
title: "Global Sidebar"
format: dashboard
---
    
# {.sidebar}

Sidebar content (e.g. inputs)

# Plot

```{r}
```

# Data

```{r}
```

Layout: Rows

---
title: "Focal (Top)"
format: dashboard
---
    
## Row {height=70%}

```{r}
```

## Row {height=30%}

```{r}
```

```{r}
```

Layout: Columns

---
title: "Focal (Top)"
format: 
  dashboard:
    orientation: columns
---
    
## Column {width=60%}

```{r}
```

## Column {width=40%}

```{r}
```

```{python}
```

Tabset

---
title: "Palmer Penguins"
format: dashboard
---
    
## Row

```{r}
```

## Row {.tabset}

```{r}
#| title: Chart 2
```

```{r}
#| title: Chart 3
```

Tables

Each code chunk makes a card, doesn’t have to have a title

```{r}
library(gapminder)
library(tidyverse)
library(gt)

gapminder |>
  group_by(continent, year) |>
  summarize(mean_lifeExp = 
              round(mean(lifeExp), 1)) |>
  pivot_wider(names_from = continent, 
              values_from = mean_lifeExp) |>
  gt()
```

Other features

• Text content

• Expanding cards

Dashboard deployment

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

Interactive Dashboards

https://quarto.org/docs/dashboards/interactivity/shiny-r

• For interactive exploration, some dashboards can benefit from a live R backend

• To do this with Quarto Dashboards, add interactive Shiny components

• Deploy with or without a server!

Learn more

https://quarto.org/docs/dashboards