Dashboards

Data Dashboards

A Data Dashboard is an interactive display of selected statistics and plots to allow the user to quickly monitor, explore, and understand patterns in data.

Used for:

  1. Real-time Monitoring
  1. Data Exploration

Tools for Dashboards

Quarto Dashboards

Workshop

Anatomy of a Dashboard

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
---
  • In general, each code cell 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 empty cards to your document by adding inserting four blank code cells at the bottom.
  2. Arrange them in a 2 x 2 grid layout.
02:30

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(mtcars)
mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.0 6 160.0 110 3.90 2.620 16.46 0 1 4 4
Mazda RX4 Wag 21.0 6 160.0 110 3.90 2.875 17.02 0 1 4 4
Datsun 710 22.8 4 108.0 93 3.85 2.320 18.61 1 1 4 1
Hornet 4 Drive 21.4 6 258.0 110 3.08 3.215 19.44 1 0 3 1
Hornet Sportabout 18.7 8 360.0 175 3.15 3.440 17.02 0 0 3 2
Valiant 18.1 6 225.0 105 2.76 3.460 20.22 1 0 3 1
Duster 360 14.3 8 360.0 245 3.21 3.570 15.84 0 0 3 4
Merc 240D 24.4 4 146.7 62 3.69 3.190 20.00 1 0 4 2
Merc 230 22.8 4 140.8 95 3.92 3.150 22.90 1 0 4 2
Merc 280 19.2 6 167.6 123 3.92 3.440 18.30 1 0 4 4
Merc 280C 17.8 6 167.6 123 3.92 3.440 18.90 1 0 4 4
Merc 450SE 16.4 8 275.8 180 3.07 4.070 17.40 0 0 3 3
Merc 450SL 17.3 8 275.8 180 3.07 3.730 17.60 0 0 3 3
Merc 450SLC 15.2 8 275.8 180 3.07 3.780 18.00 0 0 3 3
Cadillac Fleetwood 10.4 8 472.0 205 2.93 5.250 17.98 0 0 3 4
Lincoln Continental 10.4 8 460.0 215 3.00 5.424 17.82 0 0 3 4
Chrysler Imperial 14.7 8 440.0 230 3.23 5.345 17.42 0 0 3 4
Fiat 128 32.4 4 78.7 66 4.08 2.200 19.47 1 1 4 1
Honda Civic 30.4 4 75.7 52 4.93 1.615 18.52 1 1 4 2
Toyota Corolla 33.9 4 71.1 65 4.22 1.835 19.90 1 1 4 1
Toyota Corona 21.5 4 120.1 97 3.70 2.465 20.01 1 0 3 1
Dodge Challenger 15.5 8 318.0 150 2.76 3.520 16.87 0 0 3 2
AMC Javelin 15.2 8 304.0 150 3.15 3.435 17.30 0 0 3 2
Camaro Z28 13.3 8 350.0 245 3.73 3.840 15.41 0 0 3 4
Pontiac Firebird 19.2 8 400.0 175 3.08 3.845 17.05 0 0 3 2
Fiat X1-9 27.3 4 79.0 66 4.08 1.935 18.90 1 1 4 1
Porsche 914-2 26.0 4 120.3 91 4.43 2.140 16.70 0 1 5 2
Lotus Europa 30.4 4 95.1 113 3.77 1.513 16.90 1 1 5 2
Ford Pantera L 15.8 8 351.0 264 4.22 3.170 14.50 0 1 5 4
Ferrari Dino 19.7 6 145.0 175 3.62 2.770 15.50 0 1 5 6
Maserati Bora 15.0 8 301.0 335 3.54 3.570 14.60 0 1 5 8
Volvo 142E 21.4 4 121.0 109 4.11 2.780 18.60 1 1 4 2

datatable()

library(DT)
datatable(mtcars)

Value boxes

You can create a dynamic value box using the following.

```{r}
#| component: valuebox
#| title: My big number
list(
  icon = "stopwatch",
  color = "primary",
  value = x
)
```

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 Gampminder dataset at
<https://www.gapminder.org/data/>.
:::

Your Turn

Display the data on earthquakes in your dashboard according to the following layout.

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}
```