Hello, dashboards!

Small Data SF

Sara Altman

Posit, PBC

Isabella Velásquez

Posit, PBC

2024-09-23

Hello, Dashboards!

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

rows and columns value boxes multiple pages

sidebar

interactive leaflet widget html widget

dashboard for a model provides context into the model by adding narrative to the dashboard not just raw json dump

uses shiny for python select island and penguins and distributions will change can see all these dashboards and their code on the quarto website under gallery

🍰 Olympic Games dashboard

🔗 https://saraaltman.quarto.pub/olympic-games/

Walk through Click link to interact with the dashboard yourself

Notebook ➝ Dashboard

olympicdash.qmd

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

# notebook content goes here...

How did we create this dashboard? One change to notebook format

Once you done that Many components you can add all components offered in ipynb or plain text qmd

Dashboard basics

Cards

Dashboards are composed of cards.

cards are the basic building blocks of dashboards you often won’t need to manually define a card – they will typically map to cells in your notebook that create plots, display data, display text, etc.

Rows and columns

Cards are arranged into rows and columns.

to organize content arrange into rows and columns

Layouts

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

can also control the general layout of the page with things like pages, tabsets, and sidebars talk about this in the next slide deck

Step-by-step

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

First dashboard

Step 1: format: dashboard

dashboard.qmd

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

first, need to add that format: dashboard line

Step 2: Add a card

dashboard.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()
)
```

now, add a card creating a plot this is plotnine code see what it looks like

Step 2: Add a card

dashboard.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.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.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()
)
```

will appear below by default

Step 4: Add titles to cards

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

add titles using the title option in the cell

dashboard.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 5: Add a logo

dashboard.qmd

---
title: "My first Quarto dashboard"
format: 
  dashboard:
    logo: images/beetle.png
---

```{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 5: Add a logo

add a logo yaml header

dashboard.qmd

---
title: "My first Quarto dashboard"
format: 
  dashboard:
    logo: images/beetle.png
---

```{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 - 5

now have a dashboard

Layout

Rows

By default, cards are laid out in rows:

dashboard.qmd

---
title: "Rows"
format: 
  dashboard:
    logo: images/beetle.png
---

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

## Scatter

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

## Bar

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

Rows

dashboard.qmd

---
title: "Rows"
format: 
  dashboard:
    logo: images/beetle.png
---

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

## Scatter

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

## Bar

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

Rows

Default value of orientation is rows:

dashboard.qmd

---
title: "Rows"
format: 
  dashboard:
    orientation: rows
    logo: images/beetle.png
---

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

## Scatter

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

## Bar

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

Columns

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

dashboard.qmd

---
title: "Columns"
format: 
  dashboard:
    orientation: columns
    logo: images/beetle.png
---

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

## Scatter

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

## Bar

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

Columns

dashboard.qmd

---
title: "Columns"
format: 
  dashboard:
    orientation: columns
    logo: images/beetle.png
---

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

## Scatter

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

## Bar

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

Rows, then columns

dashboard.qmd

---
title: "Rows, then columns"
format: 
  dashboard:
    logo: images/beetle.png
---

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

## Overview

### 

This dashboard summarizes an illuminating analysis of fuel economy of cars.

### 

This is a car.

![](images/car.png){fig-alt="Illustration of a teal color car."}

## Plots

### Scatter

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

### Bar

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

Rows, then columns

dashboard.qmd

---
title: "Rows, then columns"
format: 
  dashboard:
    logo: images/beetle.png
---

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

## Overview

### 

This dashboard summarizes an illuminating analysis of fuel economy of cars.

### 

This is a car.

![](images/car.png){fig-alt="Illustration of a teal color car."}

## Plots

### Scatter

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

### Bar

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

Columns, then rows

dashboard.qmd

---
title: "Rows, then columns"
format: 
  dashboard:
    orientation: columns
    logo: images/beetle.png
---

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

## Overview

### 

This dashboard summarizes an illuminating analysis of fuel economy of cars.

### 

This is a car.

![](images/car.png){fig-alt="Illustration of a teal color car."}

## Plots

### Scatter

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

### Bar

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

Columns, then rows

dashboard.qmd

---
title: "Rows, then columns"
format: 
  dashboard:
    orientation: columns
    logo: images/beetle.png
---

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

## Overview

### 

This dashboard summarizes an illuminating analysis of fuel economy of cars.

### 

This is a car.

![](images/car.png){fig-alt="Illustration of a teal color car."}

## Plots

### Scatter

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

### Bar

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

Your turn

Start

In your cloned version of posit-dev/smalldatasf-quarto-exercises (http://pos.it/smalldatasf-quarto-exercises), open on olympicdash-1.qmd.

Goal

Your goal is to create the following dashboard.

Step 1

• Turn the output to a dashboard.
• Add titles to code cells.
• Add the Olympics logo from the images folder

05:00

Step 2

Reorganize the cards into rows and columns as shown below.

05:00