Hello,
Quarto Dashboards!

Hello, Dashboards!

Quarto

• is a (relatively) new, 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

Olympic Games dashboard - R

🔗 mine.quarto.pub/olympic-games-r

Olympic Games dashboard - Python

🔗 mine.quarto.pub/olympic-games-py

Notebook ➝ Dashboard

olympicdash-r.qmd

---
title: "Olympic Games"
format: dashboard
---

# notebook content goes here...

olympicdash-py.qmd

---
title: "Olympic Games"
format: dashboard
---

# notebook content goes here...

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

• First with R

• Then with Python

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

First dashboard in Python

Step 1: format: dashboard

dashboard-py.qmd

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

Step 2: Add a card

dashboard-py.qmd

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

```{python}
from plotnine import ggplot, aes, geom_point
from plotnine.data import mpg
```

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

Step 2: Add a card

dashboard-py.qmd

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

```{python}
from plotnine import ggplot, aes, geom_point
from plotnine.data import mpg
```

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

Step 3: Add another card

dashboard-py.qmd

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

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

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

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

Step 3: Add another card

dashboard-py.qmd

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

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

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

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

Step 4: Add titles to cards

dashboard-py.qmd

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

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

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

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

Step 4: Add titles to cards

dashboard-py.qmd

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

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

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

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

Steps 1 - 4

Let’s build!

Materials

• Slides for this video: mine.quarto.pub/quarto-dashboards/1-hello-dashboards

• Source code for slides: github.com/mine-cetinkaya-rundel/quarto-dashboards

🏁 Start

• Go to the GitHub repo github.com/mine-cetinkaya-rundel/olympicdash.

• 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.

• Work on one of the following depending on your preferred language:

olympicdash-r-1.qmd

olympicdash-py-1.qmd

🎯 Goal

Your goal is to create one of the following dashboards, and then deploy to QuartoPub.