Dynamic filtering with vue.js and R markdown
Here’s a usable example of the rendered HTML output from the R Markdown file that we’ll be creating. As it’s a static file, its data is not live and represents data correct at the time of publication, 14 February 2020.
Integrating Vue with R markdown
For convenience, I’m going to source Vue.js from a Content Delivery Network (CDN) link. We can source a link for the latest Vue build via vuejs.org. Vue maintains an excellent devtools extension for Chrome and Firefox browsers, though it’s worth warning that these devtools won’t work on pages using the minified production builds of Vue. In this case, use the alternative development build from the same resource section on vuejs.org.
We’ll be using Vue to manage four HTML elements: a table, two <select> elements, and a range slider. Given the interlinked nature of the Vue logic, it makes more sense to include this code in its entirety at this stage. From here we can discuss the individual elements in reference to this block, rather than cherry-picking individual lines of code later and adding an unnecessary layer of complexity.
Filtering Players based on input values
In our HTML code, we’ll be accessing Vue data from two places: the instance’s data object and via computed properties which dynamically change to reflect any related changes in the data object. In our case, we have a computed property called filteredPlayers. This array of players will change to reflect any changes made by the user via the <select> elements or range slider, filtering the players accordingly. All we need to know at a high level is that Vue is reactive and our visualized data will respond in real time to user input. If you plan to work in-depth with Vue in future though, it’s well worth reading and understanding its reactivity system. This is valuable not just in understanding the secrets behind Vue’s magic, but also in avoiding common gotchas.
In our HTML markup we can populate a table by looping through our filteredPlayers array. It’s possible to include raw HTML markup in R Markdown files, but we must ‘cat’ any HTML elements utilizing Vue’s syntactic sugar, as R will print it as a block of raw code rather than actual HTML markup if we don’t. A glossary for this table’s column variables can be referenced via basketball-reference.com.
Configuring the range slider
The first thing that you may notice is that the slider is created within our Vue instance’s mounted() function. This function is known as a Lifecycle Hook and allows us to dictate that the code within the function will only be executed once the Vue instance has been created and mounted to our web page’s Document Object Model (DOM). Since this slider is separate from our Vue instance but relies upon it in order to work, it is important that the slider is created at this point and not earlier. Lower-level discussion of Vue.js is beyond the scope of this blog post, but it’s certainly worth understanding the Vue lifecycle if you do plan to use Vue in a project of your own.
Configuring the <select> inputs
These inputs allow the user to filter the players by their respective divisions and conferences. I’ve added a function named inputHandler to each input. This function will be called each time a HTML element’s value changes, in order to reset a <select> element’s related Vue data if the user selects a value from its counterpart <select> element. For example, we don’t want to be concurrently filtering for players in both the Atlantic Division and the Western Conference as that will return zero players.
Applying custom Styling
One notable benefit of R Markdown is that it utilizes the Bootstrap framework. When searching for solutions, it’s worth bearing in mind that R Markdown still uses Bootstrap 3.3 while Bootstrap itself is now on version 4.0. This is relevant to the styling we need for our template as we’ll need to put some padding under the div that houses our range slider. If we were googling for Bootstrap solutions, we’d likely come across Bootstrap 4’s native padding classes, but as these don’t exists in Bootstrap 3 we’ll have to create our own class.
Working with the Quirks of R Markdown
Undoubtedly, R Markdown has some quirks. If you don’t run into anything while composing straightforward markdown templates, it’s likely you will while attempting to integrate external libraries into your template. I’ve already mentioned the issues with importing files from CDN links. Another to add to that list is indentation. My preference (for readability and ease of editing) was to use HTML markup for the necessary bootstrap divs and to nest these divs as I would in a normal HTML file. In my case I found it necessary to compromise on indentation as there existed cases where the indentation either resulted in divs being rendered as code, or even being omitted from the rendered HTML file altogether. A coworker of mine often jokes that programming in R can be both an art and a science. This certainly does seem the case at times when tweaking complex R Markdown files to ensure they knit as expected.
I’m a big believer in using the right tool for the right job. There are times to use and not to use R Markdown. If you find yourself requiring extensive front-end logic to create your desired user-interfaces, you may want to consider an alternative reporting solution to R Markdown. If you do find yourself leveraging R Markdown for a project though, I hope that this blog has helped spark some new ideas for achieving your desired results.
This project’s source code is viewable on github.