Advanced Quarto

Katja Kozjek

NBIS, SciLifeLab

19-May-2025

Quarto dashboards

• Dashboards are a great way to share results from analyses with others

• A new output format for creating dashboards from notebooks/ .qmd files
  

• Dashboards examples

You already analyzed and summarize your data in computational notebooks with R and/or Python. What’s next? You can share your insights or allow others to make their own conclusions in eye-catching dashboards and straight-forward to author, design, and deploy Quarto Dashboards, regardless of the language of your data processing, visualization, analysis, etc. With Quarto Dashboards, you can create elegant and production-ready dashboards using a variety of components, including static graphics (ggplot2, Matplotlib, Seaborn, etc.), interactive widgets (Plotly, Leaflet, Jupyter Widgets, htmlwidgets, etc.), tabular data, value boxes, text annotations, and more. Additionally, with intelligent resizing of components, your Quarto Dashboards look great on devices of all sizes. And importantly, you can author Quarto Dashboards without leaving the comfort of your “home” – in plain text markdown with any text editor (VS Code, RStudio, Neovim, etc.) or any notebook editor (JupyterLab, etc.).

Dashboard components

• Dashboards are composed of cards
• Cards content: plots, tables, value boxes…
• Cards are arranged into rows and columns
• Pages, tabsets, and sidebars allow for more advanced layouts

Dashboard basic structure

Let’s make a dashboard!

Step 1: format: dashboard

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: dashboard
---

# notebook content goes here...

Step 2: Add a card

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: dashboard
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Step 2: Add a card

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: dashboard
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Step 3: Add another card

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: dashboard
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Step 3: Add another card

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: dashboard
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Step 4: Add titles to cards

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: dashboard
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Step 4: Add titles to cards

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: dashboard
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Step 5: Add a logo

• Logo added to the navigation bar

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format:
  dashboard: 
    logo: ../assets/images/cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Step 5: Add a logo

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format:
  dashboard: 
    logo: ../assets/images/cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Layout

• Rows
  • By default, cards are laid out in rows

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format:
  dashboard: 
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
library(gt)
```

## Row - Gender {height=70%}

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

## Row - Temperature {height=30%}

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Layout - Rows

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format:
  dashboard: 
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
```

## Row - Gender {height=70%}

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

## Row - Temperature {height=30%}

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Layout

• Columns
  • Setting orientation to columns makes each ## indicate a column instead of a row

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: 
  dashboard: 
    orientation: columns
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
```

## Column - Gender

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

## Column - Temperature

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Layout - Columns

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: 
  dashboard: 
    orientation: columns
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
```

## Column - Gender

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

## Column - Temperature

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Tabsets

• Put content in different tabs

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: 
  dashboard: 
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
```

## Row - Gender

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

## Row - Temperature

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

### Tabsets of plots {.tabset}
```{r}
#| title: Gender
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
#| title: Temperature
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Tabsets

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: 
  dashboard: 
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
```

## Row - Gender

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

## Row - Temperature

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

### Tabsets of plots {.tabset}
```{r}
#| title: Gender
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

```{r}
#| title: Temperature
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Pages

• New page is created with a Level I heading (#)

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: 
  dashboard: 
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
```

# Page 1
## Row - Gender

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

# Page 2
## Row - Temperature

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Pages

my-dashboard.qmd

---
title: "Immunotechnology Cake Club"
format: 
  dashboard: 
    logo: ./cake-emoji.png
---

```{r}
library(dplyr)
library(ggplot2)
```

# Page 1
## Row - Gender

```{r}
#| title: Who bakes better?
cake_data %>%
    ggplot(aes(x = Gender, y = Score, fill = Gender)) +
    geom_boxplot() +
    theme_minimal() +
    theme_bw() + 
    scale_fill_manual(values = c("#F5E8E1", "#D0BBA8")) + 
    labs(x = "Gender", y = "Score") + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

# Page 2
## Row - Temperature

```{r}
#| title: How does outdoor temperature influence final score?
cake_data %>%
    ggplot(aes(x = Temperature, y = Score)) +
    geom_line( color="darkgrey") +
    geom_point(shape=21, color="black", fill="#DBD9DA", size=6) + 
    theme_bw() + 
    theme(axis.text = element_text(size = 20),
    axis.title = element_text(size = 20),
    legend.text = element_text(size = 20), 
    legend.title = element_text(size = 20))
```

Dashboard deployment

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

Deployment options:

• GitHub Pages: Push your .qmd and rendered files to a GitHub repository and enable GitHub Pages.
• Posit Connect Cloud: Easy publish and share data applications and documents in a cloud environment.
• Other web servers: Upload the rendered HTML files to any web server of your choice.

Interactive dashboards

• Quarto dashboards can include interactive Shiny components (e.g. a plot with sliders that control its inputs)
• Quarto dashboard with Shiny

Extra Material

• Official quarto extensions
• An awesome list of Quarto content
• A gallery of Quarto examples

Sources

• Quarto Dashboards
• Hello, Dashboards!
• Quarto Dashboard video by Charles Teague
• From Notebooks to Dashboards with Quarto
• Dashboard layout
• Dashboard options
• Quarto Dashboards - NCEAS

Thank you. Questions?