Creating multi-tab reports with R and jQuery UI

By David Smith

by Matt Parker, Data Scientist at Microsoft

One of the great advantages of R’s openness is its extensibility. R’s abundant
packages are the most conspicuous example of that extensibility, and
Revolution R Enterprise is a powerful example of how far it can stretch.

But R is also part of an entire ecosystem of open tools that can be linked
together. For example,
Markdown,
Pandoc, and
knitr
combine to make R an incredible tool for dynamic reporting and reproducible
research. If your chosen output format is HTML, you’ve linked into yet another
open ecosystem with countless further extensions.

One of those extensions – and the focus of this post – is
jQuery UI.
jQuery UI makes a set of JavaScript’s most useful moves available to developers
as a robust, easy-to-implement toolkit ideal for adding a bit of interactivity
to your knitr reports.

Tabs

For example: it’s easy to use
jQuery UI’s Tabs widget
to split a long report across several tabs of a webpage. Tabs are great for
splitting complex reports up by topic, or for providing different types of
users with customized views of the results.

To get a sense of what this conversion might look like, here’s
a simple R-Markdown report without tabs
(Rmd source):

… and the same report with tabs
(source):

Here’s how I added tabs to the report.

1) First, I downloaded jQuery UI. Picking the right place to store the library
can be tricky, but as long as the jQuery UI files are accessible to knitr when
it’s building the report, you’ll be okay. For this demo report, I just unzipped
the files right next to the .rmd source.

2) Next, I added a few lines to the element of the report. Every
webpage has a element. knitr would typically build this for you, but
in this case we need to write it manually to be sure that the jQuery UI scripts
and CSS are linked in the HTML output.