Skip to contents

Live Demos

demos.Rmd

Overview

dashboardr includes several live demo dashboards that showcase its capabilities. Each demo comes with complete code documentation showing the exact R code used.

Main Demos

  • Tutorial Dashboard - Beginner-friendly introduction to dashboardr. Code & Docs | Live Demo
  • Showcase Dashboard - Advanced dashboard with multiple pages and tabsets. Code & Docs | Live Demo
  • Interactive Inputs - Gallery of input types (select, slider, switch, checkbox). View Demo
  • Sidebar Demo - Page sidebars with filters (checkbox, dropdown, slider). View Demo

Tabset Theme Demos

Each tabset theme has its own demo dashboard showing 1, 2, and 3-level nested tabs:

  • Pills - Rounded pill-shaped tabs. View
  • Modern - Clean contemporary styling. View
  • Minimal - Subtle, understated tabs. View
  • Classic - Traditional tab appearance. View
  • Underline - Underlined active tab. View
  • Segmented - iOS-style segmented controls. View

Loading Overlays

Demo of animated loading overlays with different themes (light, dark, glass, accent). View Demo

Tutorial Dashboard

The tutorial dashboard is perfect for learning the basics:

  • Stacked bar charts with custom colors and ordering
  • Heatmaps showing relationships between variables
  • Tabset grouping for organizing visualizations
  • Text-only pages for documentation
  • Collapsible code blocks showing exact R code for each visualization

View Complete Code Documentation →

library(dashboardr)

# Generate and open the tutorial dashboard
tutorial_dashboard()

Showcase Dashboard

The showcase dashboard demonstrates advanced features:

  • Multiple tabset groups (Demographics, Politics, Social Issues)
  • Complex visualizations with custom styling
  • Mixed content pages (text + visualizations)
  • Card layouts with images
  • Bidirectional links between code documentation and live visualizations

View Complete Code Documentation →

# Generate and open the showcase dashboard
showcase_dashboard()

Setting a Tabset Theme 

# Set theme at dashboard level
create_dashboard(
  title = "My Dashboard",
  output_dir = "my_dashboard",
  tabset_theme = "pills"
)

Available themes: pills, modern, minimal, classic, underline, segmented.

Creating Nested Tabs 

# 1 Level - Different tabgroup names create separate tabs
create_viz() %>%
  add_viz(type = "bar", x_var = "age", tabgroup = "age") %>%
  add_viz(type = "bar", x_var = "education", tabgroup = "education") %>%
  add_viz(type = "bar", x_var = "region", tabgroup = "region")

# 2 Levels - Use "/" to create parent > child hierarchy
create_viz() %>%
  add_viz(type = "bar", x_var = "age", tabgroup = "satisfaction/by_age") %>%
  add_viz(type = "bar", x_var = "education", tabgroup = "satisfaction/by_education")

# 3 Levels - Add more "/" for deeper nesting
create_viz() %>%
  add_viz(type = "bar", x_var = "age", tabgroup = "survey/satisfaction/age") %>%
  add_viz(type = "bar", x_var = "education", tabgroup = "survey/demographics/education")

Page Sidebars

Sidebars provide a dedicated space for filters that stays visible as users scroll:

create_content(data = my_data) %>%
  add_sidebar(width = "280px", title = "Filters") %>%
    add_text("Filter the data:") %>%
    add_input(
      input_id = "country",
      label = "Countries:",
      type = "checkbox",
      filter_var = "country",
      options = c("USA", "UK", "Germany"),
      columns = 2  # 2-column grid layout
    ) %>%
  end_sidebar() %>%
  add_viz(type = "bar", x_var = "country")

Features:

  • Left or right positioning (position = "right")
  • Multiple input types (checkbox, radio, dropdown, slider)
  • Multi-column layouts for checkboxes (columns = 2, 3, 4)
  • Mobile-responsive (stacks on small screens)

See the Sidebar Demo for live examples.

Loading Overlays 

# Add overlay to a page
add_page(
  name = "Analysis",
  data = my_data,
  visualizations = my_viz,
  overlay = TRUE,
  overlay_theme = "glass",
  overlay_text = "Loading charts...",
  overlay_duration = 2000
)

Available overlay themes: light, dark, glass, accent.

Requirements

All demos require:

  1. Quarto CLI installed on your system
  2. gssr package for GSS data (for tutorial/showcase):

Next Steps

After exploring the demos:

  1. Run tutorial_dashboard() to see basic features
  2. Run showcase_dashboard() to see advanced capabilities
  3. Check out vignette("getting-started") for detailed guides
  4. Use the demos as templates for your own projects