Navigate
Courses Tutorials Practice Pricing Tools Upgrade
Lesson 2 of 3

Quarto Dashboards

In Lesson 1 you made single charts talk back: you wrapped Maya's bakery scatter in ggplotly() for hover, and pinned her six coffee-and-pastry shops onto a leaflet map. Useful, but each one lived in its own window. Maya kept five browser tabs open and a printout on her desk, flipping between them to answer one question.

A dashboard ends the tab-juggling. It takes those separate tiles, the headline numbers, the trend line, the by-shop bars, the map, and arranges them on a single page so the whole business is visible at a glance. Better still, it can link them: pick one shop and every tile narrows to that shop at once.

That is exactly the dashboard below. Move the Area filter and watch all three value boxes and both charts answer together. You will build this yourself, from a plain text file and with no web server.

By the end of this lesson you will be able to:

  • Say what a Quarto dashboard is: one .qmd file with format: dashboard that renders to a laid-out page of tiles
  • Lay out a dashboard as a grid of rows and columns, and drop a chart into a card
  • Build value boxes, the big headline numbers, by computing them in R
  • Link several views with crosstalk so selecting in one filters the others, with no server

Prerequisites: you can run R and load a package with library(), you have built a ggplot (data, then aes(), then a geom) in the ggplot2 course, and you made a single interactive chart and map in Lesson 1. Every new term is defined as it appears.

What it is

One file, one screen

A Quarto dashboard is not a new app you learn or a server you run. It is a single plain text file, a **.qmd (Quarto markdown) document, that you render** into a finished web page. The same file you would knit into a report, with one line changed.

That one line lives at the very top, in the YAML header (the small settings block fenced by --- lines). Swap format: html for **format: dashboard and Quarto stops stacking your content as a long report and starts arranging it as a tiled dashboard instead. Toggle the widget below between Source (.qmd) and Rendered** to see the same file as text you write and as the page it produces.

Everything in this lesson is built from Maya's six shops. Each lesson runs in a fresh R session, so we build that data right here (run this once, then every later block can use it):

RInteractive R
shops <- data.frame( name = c("Riverside", "Old Town", "Market Square", "University", "Harbour", "Garden Gate"), area = c("South", "North", "South", "North", "South", "North"), customers = c(180, 240, 95, 210, 130, 160), # average customers per day revenue = c(42000, 53000, 21000, 47000, 28000, 36000) # revenue last month, dollars ) shops #> name area customers revenue #> 1 Riverside South 180 42000 #> 2 Old Town North 240 53000 #> 3 Market Square South 95 21000 #> 4 University North 210 47000 #> 5 Harbour South 130 28000 #> 6 Garden Gate North 160 36000

  

  





Key Insight
A Quarto dashboard is authored, not coded by hand. You describe the content in markdown and R; format: dashboard does the laying-out. You never write the HTML or CSS yourself.