Quarto Dashboards: from zero to publish in one hour

Mine Çetinkaya-Rundel

Duke University + Posit, PBC

Hello, Dashboards!

Quarto

  • an open-source, scientific, and technical publishing system
  • aims to make the process of creating and collaborating dramatically better

Quarto ➝ many outputs

With Quarto you can weave together narrative text and code to produce elegantly formatted output as documents, web pages, blog posts, books, and more…

Quarto ➝ dashboards

Since Quarto 1.4!

Quarto version

Tip

Run the following in your Terminal to find your Quarto version:

Terminal
quarto --version

useR! 2025 dashboard

🔗 https://mine.quarto.pub/user-2025-dash/

Dashboard basics

Cards

Dashboards are composed of cards.

Rows and columns

Cards are arranged into rows and columns.

Layouts

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

Step-by-step

Let’s make a dashboard, step-by-step!

Note

We’ll use R for the computation for building this dashboard, but (just about) everything, i.e., Quarto syntax, would be exactly the same if we were using Python or Julia for the computation.

First dashboard in R

Step 1: format: dashboard

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

Step 2: Add a card

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

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

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

Step 2: Add a card

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

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

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

Step 3: Add another card

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

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

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Step 3: Add another card

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

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

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Step 4: Add titles to cards

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

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

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Step 4: Add titles to cards

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

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

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Steps 1 - 4

Let’s build!

Materials

🏁 Start

If you would like to follow along or work on it yourself later

  • Go to the GitHub repo github.com/mine-cetinkaya-rundel/quarto-dashboards-rmed.

  • Click on Use This Template to create a repo for yourself using this one as a template.

  • Clone that repo and open it in your preferred IDE / editor.

  • Start modifying useR25-start.qmd to build your dashboard.

🎯 Goal

Our goal is to create the following dashboard and then deploy to QuartoPub.

✅ Solutions

All files needed to build the dashboard can be found at:


🔗 github.com/mine-cetinkaya-rundel/quarto-dashboards-rmed


  • useR25.qmd: Quarto file for the dashboard
  • brand/: Theming files (dark-brand.yml, light-brand.yml, logo.png)
  • data/: program.csv

Thank you!

If you’re interested in participating in the R/Medicine & Posit Raffle, where you can win:

  • Care package of hex stickers featuring all of your favorite R or Python packages 📦✨

  • Dedicated time with the Great Tables team (Michael Chow & Rich Iannone) to ask questions, get tips, or just chat about beautiful tables!