Dashboards

Lecture 16

Dr. Greg Chism

University of Arizona
INFO 526 - Summer 2024

Dashboards

Dashboards

2006:

  • Visually display most important information on one screen

  • Monitored by a glance

2020+:

  • Reactive to user needs & questions

  • Regularly updating

  • Produces reports

Several (common) tools

Key performance indicators (KPIs)

Benchmarks

  • Outcomes

    • 🌮 Increase customer satisfaction

    • 🚹 🚺 Address inequity in salaries

    • 🦕 Grow audience & Patreon subscribers

Key performance indicators (KPIs)

Project measurements

  • Inputs

    • 🌮 Ingredient costs, labor costs

    • 🚹 🚺 Employee data, salary data

    • 🦕 Viewership/subscribers

  • Process

    • 🌮 Speedy service, product consistency

    • 🚹 🚺 Contract amounts, raises + promotions

    • 🦕 Speed of production, number of revisions

  • Outcome

    • 🌮 Good tacos in minimal time

    • 🚹 🚺 Individuals with equal pay

    • 🦕 Interesting and educational videos

Key performance indicators (KPIs)

Lagging KPI:

  • Performance indicator of something that has happened

Leading KPI:

  • Performance indicator that signals something to come

Dashboards

Named after car dashboards

Dashboard visualizations

Gauge plot: They are all what Edward Tufte would call “low data to ink” plots (and which he would hate)

  • Speedometers = low-information donut plot where only one number means anything about the data.

  • The other numbers & colors are there to provide context and meaning for that data point.

  • For all of these, you could cover up the dial and just leave the number and you’d have the same info.

Making gauge plots

Code
library(plotly)

fig <- plot_ly(
    domain = list(x = c(0, 1), y = c(0, 1)),
    value = 270,
    title = list(text = "Speed"),
    type = "indicator",
    mode = "gauge+number") 
fig <- fig %>%
  layout(margin = list(l=20,r=30))

fig

Making gauge plots II

Code
fig <- plot_ly(
  domain = list(x = c(0, 1), y = c(0, 1)),
  value = 450,
  title = list(text = "Speed"),
  type = "indicator",
  mode = "gauge+number+delta",
  delta = list(reference = 380),
  gauge = list(
    axis =list(range = list(NULL, 500)),
    steps = list(
      list(range = c(0, 250), color = "lightgray"),
      list(range = c(250, 400), color = "gray")),
    threshold = list(
      line = list(color = "red", width = 4),
      thickness = 0.75,
      value = 490))) 
fig <- fig %>%
  layout(margin = list(l=20,r=30))

fig

Bullet charts

Similar to battery charts:

  • Essentially stacked bar plot

  • Gray/“uncharged” group

  • Colored/“charged” proportion group

  • Adds to 100

Code
fig <- plot_ly(
  type = "indicator",
  mode = "number+gauge+delta",
  gauge = list(shape = "bullet"),
  delta = list(reference = 300),
  value = 220,
  domain = list(x = c(0, 1), y = c(0, 1)),
  title= list(text = "Profit"),
  height = 150,
  width = 400)

fig

Value boxes

  • Shows key information

  • Digestible

  • Uses Icons

Icons

  • Common car warning lights

  • Do all make sense without a label?

  • With dashboards you can have hover-over labels or include text, but only while that icon still likely retains meaning

  • Icons lose & gain meaning much faster than you would expect

Started being used for romantic love in the 1400’s

Quarto dashboards

  • Similar structure to what we’ve been using!

  • Simpler / more straightforward than Shiny

  • Aesthetically pleasing

Dashboard layout

Layout

title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: dashboard
## Row {height=70%}

::: {.cell}

:::

## Row {height=30%}

::: {.cell}

:::

::: {.cell}

:::

Orientation

title: "Diamonds Explorer"
author: "Cobblepot Analytics"
format: 
  dashboard:
    orientation: columns
## Column {width=60%}

::: {.cell}

:::

## Column {width=40%}

::: {.cell}

:::

::: {.cell}

:::

Scrolling

title: "Diamonds Explorer"
author: "Cobblepot Analytics"
format: 
  dashboard:
    scrolling: true

::: {.cell}

:::

::: {.cell}

:::

::: {.cell}

:::

Pages

title: "Palmer Penguins"
format: dashboard
# Bills 

::: {.cell}

:::

# Flippers {orientation="columns" scrolling="true"}

## Column

::: {.cell}

:::

::: {.cell}

:::

## Column 

::: {.cell}

:::

Tabsets

title: "Palmer Penguins"
format: dashboard
## Row

::: {.cell}

:::

## Row {.tabset}

::: {.cell title='Chart 2'}

:::

::: {.cell title='Chart 3'}

:::

Tabsets

title: "Palmer Penguins"
format: dashboard
## Row {height=70%}

::: {.cell}

:::

## Row {height=30%}

### Column {.tabset}

::: {.cell title='Chart 2'}

:::

::: {.cell title='Chart 3'}

:::

### Column

::: {.cell}

:::

Cards

Created automatically for cells & markdown content that are within rows/columns:

## Column {width=40%}

::: {.cell}

:::

::: {.cell}

:::

Can also just contain markdown via .card

## Column {width=40%}

::: {.cell}

:::

::: {.card}
This text will be displayed within a card
:::

::: {.cell}

:::

More

The above and more can be found here!

Live coding