Dashboards

in Quarto

Python

Note

Coming soon: This page is currently being updated with standardized datasets and parallel Python examples.

Dashboards are a useful way of combining multiple visualizations about a data source. And luckily, they’re very easy to make in Quarto. Take a look at the sample dashboard and then come back here to walk through how it was made in 4 steps.¹ As you build the dashboard, it may be necessary to use “Source” mode instead of “Visual” mode in RStudio.

1 Change the YAML header

The first step is to thange the YAML header. Change the format to “dashboard”:

--- 
title: "Development Indicators by Continent"
author: "Gapminder Analytics Group"
format: dashboard
---

2 Define pages

Dashboards can accommodate multiple pages by defining level-one headers, which are shown by a single pound sign #. Whatever you write as headers will be shown as the link to that page, so choose wisely. This example uses “Charts” for page one and “Data” for page two.

--- 
title: "Development Indicators by Continent"
author: "Gapminder Analytics Group"
format: dashboard
---

# Charts
(page one stuff goes here)

# Data
(page two stuff goes here)

3 Define rows

Use level-2 headings to define the rows. Our sample dashboard has two rows. These headers won’t show anything in a dashboard, so it’s maybe good to call them something simple like “Row”:

--- 
title: "Development Indicators by Continent"
author: "Gapminder Analytics Group"
format: dashboard
---

# Charts

## Row
(top chart goes here)

## Row
(bottom charts go here)

# Data

3.1 Adjust height

By default, these rows will be distributed equally across the height of the web page. Change this distribution by defining height like this:

--- 
title: "Development Indicators by Continent"
author: "Gapminder Analytics Group"
format: dashboard
---

# Charts

## Row {height=60%}
(top chart goes here)

## Row {height=40%}
(bottom charts go here)

# Data

4 Define cards

Every code chunk will be shown as a card in the final dashboard.

4.1 Add titles

Define a title for each card by setting the title parameter at the top of the code chunk:

R
Python

```{r}
#| title: The title goes here
{gram19_football |>
    count(team_venue) |>
    ggplot(aes(
      y = team_venue,
      x = n)) +
    geom_col()} |>
  ggplotly()
```

```{python}
#| title: The title goes here
(gram19_football >>
  ggplot(
    mapping = aes(
      x = team_venue))
  + geom_bar()
  + p9.coord_flip()
).show()
```

4.2 Highlight values

Highlight a single value by setting content: valuebox in the top of the code chunk. In the code chunk, define icon, color, and value.

R
Python

```{r}
#| content: valuebox
#| title: "Average life expectency"

list(
  icon = "person-raised-hand",
  color = "secondary",
  value = gapminder |> 
    filter(year == max(year)) |> 
    pull(lifeExp) |> 
    mean(na.rm = TRUE) |> 
    round(1) |> 
    paste("years")
)
```

```{python}
#| content: valuebox
#| title: "Average life expectency"

dict(
  icon = "person-raised-hand",
  color = "secondary",
  value = f"{(
    gapminder
    .loc[lambda d: d['year'] == d['year'].max(), 'lifeExp'] 
    .mean(skipna=True)                                      
    .round(1)                                               
    )} years"
)
```

Footnotes

This example in R is based on the Python dashboard walkthrough found on the Posit website. The Python version is also available for comparison. The full source code for the dashboard is available on Github. Learn more about Quarto dashboards by consulting the online documentation provided by Posit.↩︎