3MW (Build dashboards without Shiny servers or {webr})

Author

Albert Rapp
October 25, 2023

Guten Tag!

Many greetings from Ulm, Germany. Everyone is talking about how you can use {shiny} apps without a server using the powers of {webr}. That’s pretty cool. And I will talk about this in this newsletter at some point.

But today, I want to show you that R allowed you to build small interactive dashboards without a server for some time now. If you only need a few toggles to scroll through your data, then {crosstalk} can help you build just that. No Shiny server or long load times using {webr} necessary.

Maps and Bars?

Ever wanted to learn how to plot maps of the US? Here’s your chance. In my newest YT video I recreate a chart from the PEW Research Center. This chart involves maps and bars.

It was quite complex to build and you can probably learn a lot from watching me build this chart. You can check it out on YouTube.

Course progress

The kind people who are testing the first lessons of my course right now are currently still busy testing. But one of the first feedback I got was this:

Every video was flawless in conveying the lesson and building learners' confidence step by step.

- Anonymous course tester

With great feedback like this I’m super exciting to launch pre-sale pretty soon. This pre-sale will come with probably around 80% of all lessons and comes at a reduced price. If you’re interest in joining the pre-sale, don’t forget to sign up to the extra mailing list on the course page.

Now, let’s jump into this week’s issue. As always, you can find all of the code on GitHub.

Shared data with {crosstalk}

At the heart of using crosstalk lies a shared data set. This allows all the widgets that we throw into the dashboard to know the same things. Here’s how that works. First, we prepare a data set that we want to share.

And then we simply pass it to SharedData$new.

Preparing a slider

Once you have a shared data set, you can use it to bind it to some widget like a slider. You do that using the filter_slider() function from {crosstalk}. What this needs is

  • an ID

  • a label

  • a shared data set

  • a specification which column of the data is should target

This will give you a slider similar to this one here.

Insert a plot

By the same logic we can add an image widget. Unfortunately, {crosstalk} doesn’t play well with {ggplot2}. But what it does play with is plotly. So let’s just create a ggplot and then convert it to a plotly chart with ggplotly().

We start with the ggplot. Nothing too fancy going on here. We can use the shared_data just like a normal tibble and then use some of it’s columns to build ggplot layers.

And now we can convert it to plotly. Keep in mind that the automatic conversion is not always perfect but for a demo like this it will do. If you’re fluent in plotly, you could also just build the plotly chart from scratch.

Let’s make this interactive

Now, let’s bring our slider and the plot together. To do so, we can just wrap the slider and the plot into a bscols() function to align these things into a column format.

Where’s the line?

Nice, our interactive slider works and the points get filtered out quite smoothly. But our line sadly disappears when we don’t have the full data range. That’s a bit unfortunate which seems to be a problem with how geom_smooth() operates.

Thus, our workaround is to compute that stuff manually. Hence, we fit a loess model ourselves.

And then we use it as a prediction model in our data preparation.

Finally, redoing our ggplot where we replace geom_smooth() by geom_line() will give us this code.

And consequently we get a smoother filtering experience

A table please

A dashboard wouldn’t be a dashboard without some sort of table. And again, {crosstalk} cannot just use your favorite table package from R. But what it can work with is the DT package. So good for you if that’s your favorite.

We can throw in another column into our dashboard by wrapping DT::datatable(shared_data) into out bscols() function as well. Don’t forget to modify the widths in that case.

Less columns please

After you have marveled at the magic of {crosstalk} you probably want to have only some of the columns in the table. The way to do that is to create a new shared data set for the table that has only the desired columns. And here’s the trick.

To make that work you want to tie together the original shared data and the new shared data in the same “group”. That way, the plot widget can still use the original data and the table can use the other data but both react to the slider simultaneously. Here’s how to set up the code.

Then, using this new shared data in the DT table gets the desired result.

Nice. The table is much conciser now. Let’s leave it like this for now. Next week, we’ll make the table a bit nicer and then wrap everything into a decent {bslib} dashboard style.

Hope you’ve enjoyed this week’s newsletter. If you want to reach out to me, just reply to this mail or find me on LinkedIn. (I’m moving away from Twitter. Only the last scheduled posts will go out there).

See you next week,
Albert 👋

If you like my content, you may also enjoy these:

Reply

or to participate.