Dashboards

NoteLearning objectives

• Define dashboards for data communication
• Evaluate the effectiveness of dashboards for communicating data
• Distinguish between client-side and server-side interactivity
• Create and revise Quarto dashboards

A motivating critique

The Economist’s Big Mac Index — an interactive dashboard that tracks whether currencies are over- or undervalued relative to purchasing-power parity, using the price of a McDonald’s Big Mac as the benchmark.¹

The Big Mac Index is a useful case study in dashboard design. Notice:

• A single topic (currency valuation) is communicated through multiple views — a map, a bar chart, and a sortable table — each highlighting a different dimension of the data
• The reader can filter by time period and specific currencies without leaving the page
• The overall trend (which currencies are over- or undervalued) is immediately visible, but details are available on demand through hover and filtering

What is a dashboard?

A dashboard is a visual display of data used to monitor conditions and/or facilitate understanding.²

Dashboards have several defining characteristics:

• Collection of related data points — a dashboard is not a single chart but a coordinated set of views on related information
• Single view — all components appear on one screen or page, allowing the reader to compare across panels without navigating away
• Range of communication methods — charts, tables, value boxes (summary statistics), and explanatory text all have a role
• Static or interactive — a static dashboard presents a fixed snapshot; an interactive dashboard lets the reader filter, drill down, or select subsets

The key design challenge is selecting which metrics and views belong together — too many panels overwhelm, too few leave readers without context.

Interactivity in dashboards

Dashboards can include two fundamentally different kinds of interactivity.

Client-side interactivity

Client-side interactivity runs entirely in the browser. The complete dataset is loaded when the page loads, and all filtering, zooming, and hover behavior is handled by JavaScript without any server communication.

Characteristics: - Can be published as a static webpage (GitHub Pages, Netlify, etc.) - No server required after initial load - Limited by what JavaScript can execute in the browser - Works with the {htmlwidgets} family: {ggiraph}, {leaflet}, interactive {gt} tables

Server-side interactivity

Server-side interactivity requires a running R process. When the reader changes an input (selects a dropdown, adjusts a slider), the server re-executes R code and returns new output.

Characteristics: - Requires a live server (Posit Connect, shinyapps.io, etc.) - Full R capabilities available — data manipulation, model fitting, file I/O - Enables input controls: dropdowns, toggles, sliders, search bars - Enables dynamically regenerated charts and tables based on user input

Quarto dashboards support both: a fully static dashboard uses only client-side widgets; adding Shiny enables server-side reactivity.

Dashboards with Quarto

Quarto produces dashboards from .qmd files using format: dashboard. The layout is row- and column-based, defined through Markdown headings and optional attributes.

Minimal example

---
title: "My Dashboard"
format: dashboard
---

## Row

```{r}
#| title: "Sales by Region"
plot_sales_chart()

```{r}
#| title: "Total Revenue"
value_box(value = "$4.2M", ...)
```

```

Setting format: dashboard in the YAML is all that is needed to activate dashboard layout. Code cells produce cards automatically.

Dashboard components

A Quarto dashboard is composed of three nesting levels:

1. Navigation bar and pages — The title, author, and optional navigation links between multiple pages are defined in YAML and at the top-level heading level (#). Multiple pages allow organizing a large dashboard into thematic sections.

2. Sidebars, rows, columns, and tabsets — Content is arranged using second-level headings (##) for rows or columns. Attributes like {width=40%} and {height=300} control sizing. Sidebars hold input controls for interactive dashboards. Tabsets group related cards behind clickable tabs.

3. Cards — Cards are the individual containers that hold plots, tables, value boxes, or free-form Markdown. Each code cell in a dashboard produces a card. A #| title: chunk option sets the card header.

Worked examples

Several live examples illustrate different dashboard patterns:

• Worldwide Development — animated time-series visualization with interactive controls
• Stock Explorer — financial time series with date range selection
• Labor and Delivery Dashboard — clinical monitoring with value boxes and summary tables

Why Quarto instead of Tableau or Power BI?

Tableau and Power BI are dominant in industry for dashboards, but they have significant constraints in a research or academic context:

• Closed-source, proprietary — licenses are expensive and the software cannot be modified or extended
• Point-and-click interface — limited to the chart types and transformations the tool exposes; complex data preparation is difficult
• Limited customization — styling, unusual chart types, and reproducibility are all harder

Quarto dashboards use the same R code and {ggplot2} pipeline as every other part of your analysis. There is no separate tool to learn, no licensing cost, and no gap between how you explore data and how you present it.

Note Application Exercise

AE 20: Housing market at a glance

Summary

• A dashboard is a coordinated set of views on related data, displayed in a single screen and used to monitor conditions or facilitate understanding
• Client-side interactivity (hover, filter) runs in the browser and can be deployed as a static page; server-side interactivity (reactive inputs, dynamic computation) requires a running R process
• Quarto dashboards use format: dashboard and arrange content through Markdown headings (rows, columns, tabsets) and code cells (cards)
• Quarto dashboards integrate cleanly with the rest of the R/ggplot2 workflow, are free and open source, and can be published as static pages or extended with Shiny

Acknowledgements

Material derived in part from Advanced Data Visualization.

Footnotes

1. Source: [The Economist](https://www.economist.com/interactive/big-mac-index)

2. Source: The Big Book of Dashboards