3MW (Quarto dashboards)

Author

Albert Rapp
January 10, 2024

Guten Tag!

Many greetings from Munich, Germany. The results of last week’s poll are clearly in favor of focusing more on dashboards. So get ready for more Shiny and web development stuff. This week, let us start with something easy.

Quarto is an incredibly powerful tool and one of its coolest new features is the creation of dashboards. This week, I want to show you how to get started with them. But first, let me give you my usual announcements.

ggplot packages

Ever wanted to make ggplot better with one of the many great extensions? In my newest YouTube video, I show you my five favorite extensions.

Also, you can find all of my free ggplot tutorials in a new YT playlist. And if you want to level up your dataviz skills beyond the things I teach in my free videos, check out my dataviz course that helps you to leverage {ggplot2} to make charts that communicate effectively without being a design expert.

Hello Dashboard

When it comes to Quarto, the output type is determined by setting the YAML header of a Quarto file to the desired output. The same is true for the new dashboards. To make sure that we create such outputs, we need to specify format: dashboard.

If you cannot compile your Quarto file when you use this new format, make sure to have the pre-release version of Quarto installed. As I’ve said, this is a pretty new feature.

Dashboard structure

In Quarto, the layout is structured using markdown headlines. Here's the breakdown:

  • Each Level 1 headline corresponds to a new page.

  • Every Level 2 headline introduces a new row.

  • Every code chunk introduces a new column.

This simple hierarchy makes it easy to organize and design your dashboard effectively. Here’s how a simple Quarto dashboard could look.

And the code for this is

Adding a sidebar

By adding a new Level 2 headline with a .sidebar class, you can also really easily add a collapsible sidebar.

That was pretty easy right? But notice how the layout shifted. This is something that confused me too. As you can see from the kind answer of the Quarto devs, this layout switch happens because the sidebar always adds a full new column. To fix our layout, the trick is to

  • Insert another Level 2 heading for the main part of the app and

  • move down one level to Level 3 headings for the rows

Modifying widths and heights

We can also adjust the widths and heights of the columns and rows quite easily. In the next dashboard layout I made

  • the first row much larger by setting it’s height to 70%,

  • the first column in the first row wider and

  • I changed the height of the second column in the first row.

The trick is to add the width and height code chunk options to the code chunks and/or adding the same instructions to the headlines using the typical Quarto syntax.

Code chunks without output

We have seen that each code chunk generates an output. But what if we want to split up our code a little bit. You know, one code chunk for preprocessing and one code chunk for the actual output. As long as our preprocessing does not generate an output, you’ll be fine.

But as we all know. Sometimes functions like to create some unexpected output. And this is particularly true if you want to use OJS code cells. In that case, you can simply set the output code chunk option to false.

Notice that for OJS cells the code chunk option is slightly different

Adding value boxes and non-code

Adding value boxes is pretty straight forward too. Here’s how such a box could look.

You can create them either via Python or R. Just make sure that you use the content code chunk option and set it to valuebox. After that a value box is nothing but a list (in R) or a dictionary (in Python).

And if you just want to place some new cards you can do that with the .card class and Quarto’s ::: syntax.

Putting all of this together we can create a dashboard like this:

The trick to get the cards and value boxes to stack on top of each other were Level 4 headings. If you’re curious, you can find the full code on GitHub.

Nice, we have learned how to create Quarto dashboards. Next week, we will fill our dashboards with more content. Specifically, we will add static and interactive tables and charts with R and Observable JS.

As always, if you want to reach out to me, just reply to this mail or find me on LinkedIn.

See you next week,
Albert 👋

Here are other ways I can help you:

Reply

or to participate.