3MW (Using Parametrized Reports Instead of Shiny)

Author

Albert Rapp
April 10, 2024

Guten Tag!

Many greetings from Munich, Germany. In today’s newsletter, I’m going to show you how you can use parameterized web reports to create websites that feel dynamic even though they are completely static and do not rely on a server backend.

But before we do that, time for my usual announcement:

Use images in your ggplots

Images can be a great addition to your charts. In the past, I have used separate images in my chart as axes labels (like for brand names), as eye-catching one-off elements or to turn waffle charts into icon waffle charts. My newest YouTube video shows you how all of that works:

As always, you can find all of the code snippets on GitHub.

Recap

Last time, we were working with our weather app user interface and plugged in a dropdown menu where we can select multiple cities. And we even implemented a line of JavaScript code that alerts us to the selected city value (where whitespaces and special characters are replaced by underscores.) So, what we currently have is

  • a function that can create a dropdown entry

  • a list of city names, and

  • a dropdown menu generated from that list.

Set the selected option

Currently, our dropdown menu shows the first entry from the list by default. To make sure our dropdown menu shows a specific city, we can add the selected attribute to the option tag that we want to select. As soon as the selected attribute is inside an option tag, that particular option is the one displayed and selected in the dropdown menu.

We can use that to our advantage by modifying the create_dropdown_entry() function. We’ll just use another argument selected_city_value and check if the value we currently put into the value attribute corresponds to that.

Notice that I’ve set the selected attribute to gibberish text. The funny thing is that this doesn’t matter. As long as the attribute is present, that option is selected. Thus, we can easily set an arbitrary city as selected city.

Parameterized Report

The next step is to create a template using parameterized reports. A parameterized report is a Quarto file where you can set a parameter in the YAML header that will be used throughout the rendering of the document. It’s a great way to create a bunch of similar documents.

We can use this to create not just one website that displays the user interface with the selected city, but render multiple documents, one for each city. All of this happens using the same template Quarto file, and we just tweak the parameter in each render process. But of course, we need to create such a template file first.

So let’s just create a new Quarto file template.qmd and throw in all of our previous code chunks. And in the YAML header, we can set the params option for the selected_city_value attribute to a city value like Milwaukee_WI.

Of course, we have to instruct Quarto where to use this parameter. That works via the params list. You can just use it in R like you would with any list.

This way, whenever we render the document, we’ll get a dropdown menu with Milwaukee, WI displayed. And to prove that not only the dropdown menu changes, we can also put some text below that into the Quarto file.

Now, we need to implement a logic that can switch between the different web reports. This is where our one line of JavaScript code comes in. We replace the alert function with something that navigates the web browser to a different file. The JS code for that is simply setting the variable window.location.href variable to the file name of the rendered report.

As long as we name our rendered HTML reports using the city values, we can use what we already get in our popup alert to instruct the web browser to navigate to the file that has the report for the selected city. For the user, it looks like the information updated, but really, only the URL changed.

Rendering the Files

But all of this requires that all of the cities that we can select have a rendered report. And that’s where the {quarto} R package comes in. With this package, you can render Quarto documents with specific input parameters from within an R script.

Once you run the script, you will see all of your output files. Now you can open one of the city HTML reports, and when you select something else from the dropdown menu, the URL and displayed information will change.

Conclusion

This is a neat, low-tech solution for when you don’t need real-time information but just want to display a bunch of stuff at a set interval. You could set up some automation to re-render this as needed. And the best part is that you don’t have to set up a server infrastructure to handle things like Shiny. All you need is a place to store your HTML files, and the rest just works.

As always, I hope you enjoyed this newsletter. And if you have any questions don’t hesitate to reply to this mail or contact me on LinkedIn.

See you next week,
Albert 👋

Enjoyed this newsletter and found something helpful? Here are other ways I can help you:

Insightful Data Visualizations for "Uncreative" R Users

In this course, I teach you how to create insightful data visualizations without being a design expert.

Making Beautiful Tables with R

Tables are often boring, hard to read, and, most importantly, they don't communicate effectively. In this course, Albert Rapp will show you that creating beautiful tables is just a matter of learning some important principles.

Reply

or to participate.