3MW (Making dashboard interactive)

Author

Albert Rapp
January 17, 2024

Guten Tag!

Many greetings from Munich, Germany. Quarto dashboards are inspired by {flexdashboard} from RMarkdown. So it doesn’t come as a surprise that Quarto dashboards are static dashboards by default (because so are {flexdashboards}).

But what may surprise you, is this: Static dashboards can be interactive. “Are you mad? Static and interactive are opposite things”, I can hear you say. Well, yeah, they’re opposite things, okay!?

BUT, Dashboards are simply called static whenever they do not have a server back-end (like Shiny). Still, we can add as many interactive things that do not require a server. Like interactive charts that are created with {plotly} or {ggiraph}. And the same is true for tables. The {reactable} table has insane interactive capabilities.

So that’s how we can make static dashboards interactive. And that’s what I’m going to show you today. But before we do that, time for announcements.

Common ggplot mistakes

There are common ggplot mistakes that everybody makes in the beginning. I’m not only talking about coding mistakes like not knowing whether to place stuff inside or outside aes(), I’m also talking about dataviz mistakes like using wrong colors.

And in in my newest YT video, I show you ways to avoid 6 common ggplot mistakes.

Where is the code?

Now let’s dive into the newsletter. Note that you can find a live version of the dashboard online and the code for that can be found in a special GH repository for this dashboard.

A dashboard skeleton

Let’s take our dashboard skeleton from last week and fill this up with a few static things first. Here’s how the skeleton looked.

We start out by replacing all of the code chunks in the main body with code chunks that create some more meaningful output. Here’s what we’re aiming for.

Static things first

For now, all of those things that we add are static (fixed text, fixed table and fixed chart.) Basically, nothing for the user to click and interact with. Let’s go over the things we’ve created quickly. You can always take a look at the full code for more details.

The text in the first card is imported as markdown. Here’s how that looks (including the formatting of the card.)

The table was created with the incredible {gt} package. And the title of the card can be easily inserted into the Quarto syntax using the title tag.

Again, the full table code is omitted here. And if you’re not familiar with {gt}, then check out my free e-book. And finally, the plot was created with {ggplot2}.

Interactive chart

Cool. We have the static part done. Time to make things interactive. My favorite way to make a ggplot interactive is with the {ggiraph} package. In case, you’ve never worked with that package, here’s an explainer:

In a Quarto dashboard, the workflow is almost exactly the same as described in the video. But there’s a crucial thing you have to watch out for:

The cards have a pretty high z-index that governs which things are in the front of the page (when things overlap). This is a problem for tooltips that show up as you hover over a point. That’s why you have to increase the z-index of your tooltips.

Other than that, there’s not much to watch out for. And you get a nice interactive chart.

Sortable table

With tables it’s always nice if you can sort values by numbers or alphabetically. And while {gt} can do that, the interactive capabilities are not as advanced as those of {reactable}. Thus, translating the {gt} code to {reactable} will do the trick.

By default, the output from {reactable} creates a sortable table when you click on the column names. So there’s nothing much to look out for except for maybe the little distribution images.

If you’ve worked with {reactable} before, then you may know that everything in the table requires HTML/CSS of some sorts. Luckily, the plots are just that with the help from the {ggiraph} package.

Filterable table

Next comes the hardest but also the most interactive part. What we want to do is add a couple of checkboxes into the sidebar that govern what rows are displayed in the table. Here’s how that would look.

But honestly, this requires a bit more explaining and I’ll release a helpful video on how to make {reactable} tables even more interactive on Sunday. The video will now cover everything we need but it sure helps with understanding the explanations for the things we do need. So, let’s tackle that problem next week (and if you can’t wait until then, the code is already in the repo.)

This concludes our newsletter. Hope you enjoyed it. 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:

Join the conversation

or to participate.