Dashboards

Data at a glance

Last Time

1. Interpolation splits by area.
2. Votes are extensive.
3. SR precincts have shapes.
4. Two approaches estimate new-map votes.

Key Ideas for Today

1. A dashboard can be used to monitor and explore data.
2. Rows and columns lay out cards.
3. A value box shows one number.
4. Pages split up a dashboard.

Concept Acquisition

1. A data dashboard is an interactive display of selected statistics and plots for monitoring and exploring data, used both for real-time monitoring and for data exploration.
2. Tableau, Power BI, and Looker are common dashboard tools; Quarto builds a dashboard from a .qmd document.
3. A Quarto dashboard is made of cards, one per code cell, arranged by ## rows and columns and split into pages by # headers.

Tool Acquisition

1. format: dashboard, with options orientation, logo, and nav-buttons.
2. ## Row and ## Column headers, with height and width attributes.
3. fig-width and fig-height to size plots in a card.
4. knitr::kable() for static tables and DT::datatable() for interactive ones.
5. #| component: valuebox for value boxes, and ::: {.card} for blank cards.

Concept Application

1. Turn the demo document into a dashboard in Positron and add a card by printing the map.
2. Arrange four cards in a 2 x 2 grid.
3. Lay out the earthquake data in a dashboard with a map, value boxes, a table, and an “About the data” page (problem set).

Data Dashboard

An interactive display of selected statistics and plots that lets the user quickly monitor, explore, and understand patterns in data.

Used for:

1. Real-time Monitoring
   • California Power Outages Map
   • TikTok Personal Analytics
   • Fremont Climate Action

2. Data Exploration
   • COVID 19 Data Explorer
   • TikTok Business
   • CalViz Degrees

Tools for Dashboards

Workshop

Links:

Documentation: https://quarto.org/docs/dashboards/

Live example: download the demo-dashboard.qmd file from Ed and open it in Positron.

1. Render the document (install packages as needed)
2. Add your name as author
3. Change to format: dashboard and render again
4. Print quake_map in a new cell and render again

Open demo-dashboard.qmd in Positron yourself and work along with them. First steps:

1. Render it as is (format: html): the code shows, but nothing else does, since every cell only assigns an object.
2. Have them add their name as author.
3. Change to format: dashboard and render again: a title and nothing else, since dashboards hide code and make cards only from output.
4. Print quake_map in a new cell and render again: one cell with output, one card.

Anatomy of a Dashboard

Navbar

--- 
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: 
  dashboard:
    logo: images/penguins.png
    nav-buttons: [linkedin, twitter, github]
---

https://quarto.org/docs/dashboards/layout.html#navigation

Layout

• Define new row with ## Row, new column with ## Column
• Nest one inside the other using ### for child (e.g. ### Column)
• Defaults to row-by-row layout. Change by using

---
format:
  dashboard:
    orientation: columns
---

• Each code cell with output creates one card
• Tune dimensions by adding e.g. ## Row {height=30%}

Layout by row

---
format: dashboard
---
    
## Row {height=70%}

```{r}
```

## Row {height=30%}

```{r}
```

```{r}
```

Layout by column

---
format: 
  dashboard:
    orientation: columns
---
    
## Column {width=60%}

```{r}
```

## Column {width=40%}

```{r}
```

```{r}
```

Your turn

1. Add four code cells at the bottom that each print something (e.g. 1, 2, 3, 4).
2. Arrange them in a 2 x 2 grid layout.

02:30

Guess the Metaphor

A dashboard is like a magic shop: out of everything in the storeroom (the data), the shopkeeper picks a few prized items and sets each in its own display case (a card), arranged in rows and columns so a customer can take in the whole shop at a glance.

Data Display

Plots

You can insert graphics from ggplot, base R, or an interactive library. It can be helpful to tweak fig-width and fig-height.

## Row {height="65%"}

```{r}
#| fig-width: 10
#| fig-height: 8
plot(cars)
```

## Row {height="35%"}
        
```{r}
#| fig-width: 5
#| fig-height: 4
plot(pressure)
```
    
```{r}
#| fig-width: 5
#| fig-height: 4
plot(airmiles)
```

Tables

1. Static table: gt::gt(), knitr::kable().
2. Interactive table: DT::datatable()

kable()

library(knitr)
kable(head(mtcars))

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360	175	3.15	3.440	17.02	0	0	3	2
Valiant	18.1	6	225	105	2.76	3.460	20.22	1	0	3	1

datatable()

library(DT)
datatable(mtcars, options = list(pageLength = 5))

Value boxes

You can create a dynamic value box using the following.

```{r}
#| component: valuebox
#| title: Quakes in the last 24 hours
list(
  icon = "stopwatch",
  color = "primary",
  value = n_24
)
```

Blank Cards

You can create a blank card to fill with anything (code, images, markdown) using:

::: {.card}
Gapminder combines data from multiple sources into
unique coherent time-series that can’t be found
elsewhere. Learn more about the Gapminder dataset at
<https://www.gapminder.org/data/>.
:::

Your Turn

Lay out the earthquake data in your dashboard:

1. Two columns.
2. Left column, top row: value boxes for hours_last and n_24.
3. Left column, bottom row: the table top_n_table.
4. Right column: quake_map, filling the whole column.

06:00

Pages

Split your dashboard into multiple pages by adding level one headers with the page name. This example uses two pages, “Bills” and “Flippers”, that will be linked in the navbar.

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

```{r}
```

# Flippers

## Column

```{r}
```

```{r}
```

## Column 

```{r}
```

Key Ideas for Today

1. A dashboard can be used to monitor and explore data.
2. Rows and columns lay out cards.
3. A value box shows one number.
4. Pages split up a dashboard.

For Next Time

1. Sign up for Quiz 5 (11/2-11/3).
2. Finish PS 5, due 10/31.
3. Project Studio 4 is the week of 11/2.