Putting the Shine in Shiny Apps. Three simple tricks to make your R… | by Kendon Darlington | Jul, 2022
Three simple tricks to make your R Shiny apps go from boring to beautiful
Shiny apps don’t have to be boring. There are some easy things you can do to bring some pizzazz to your apps with just a few lines of code! In this tutorial, we are going to take a simple, informative app about the moons of our solar system, and give it a little shine.
In short, we are going to be turning this plain app into this interesting one. These two apps have the exact same data, but one is a little more professional looking than the other. If you have ever done a Shiny tutorial, your app likely ended up looking like the plain one. By following a few tips, its easy to get from plain to interesting.
Our app is going to be all about the moons of the solar system. The data is simply a table from the List of Natural Satellites Wikipedia page. This page lists all of the known moons in the solar system (219 and counting, woohoo!).
First, let’s have a look at the plain app. The goal is quite simple, you have a dropdown for each planet, and this dropdown shows the selected planets’ moons and a few relevant stats.
You can download the full project for the plain app from GitHub. Simply download the files to your computer and open the R Project. Opening the Rproj file will do the trick if you want to run this app locally.
Here is the code:
There is nothing to fancy here , and it shows. In order of appearance, we have:
- titlePanel: This is the title at the top of the app
- selectInput: This lets you choose a planet to change the table
- tableOutput(‘moons’): This is our table, handed to us by the back end (aka the stuff inside ‘server’).
- df: This is a data frame of our moon data.
- output$moons: This takes our data frame and applies a simple filter to it. The planet chosen in the selectInput is passed into this filter, so if you select ‘Jupiter’, only the moons of Jupiter are returned back to the front end (aka everything inside of ui). The tableOutput(‘moons’) in the code above is just sitting there waiting for output$moons to tell it what to do. What a sheep.
You probably fell asleep reading that, because I fell asleep writing it. It’s boring code that produces a boring app. But what can we do to spice this app up a bit?
The Interesting App
Now we get to the fun stuff, here is the not so plain app. It’s the same data, just displayed slightly differently. You can download the entire R project, including my hand drawn images of the planets from GitHub.
Here is the code for the new app.R:
Now we will discuss what was changed, and how it helps.
Shiny themes are the easiest way to make your entire app look better with one line of code. If you didn’t know, Shiny uses bootstrap by default, which is a collective of html and css that is widely used when developing websites. Instructions for installing the shinythemes package can be found here.
There are quite a few themes to chose from, and you can look through each them here to see the actual color schemes and how they design each different type of object you might put into a Shiny app (e.g. dropdowns, navbars, buttons, tables, and more!). For example, here is the full palette for the Shiny Theme I chose to add to our app; Darkly.
The code that applied this theme to our plain app is:
fluidPage(theme = shinytheme("darkly"),
You add the theme you want inside of a fluidPage. Thats it. Make sure you add the library(shinythemes) to the top of your file.
Bootstrap is the most powerful visual library for HTML around. Bootstrap has carousels, spinners, drop downs, and more! They also have some pretty alternatives to a standard titlePanel, such as the Jumbotron.
Here is the code that implements the Jumbotron:
What is going on here?
- tags$div: This creates a <div>
- class = “jumbotron text-center”: This transforms our div into a jumbotron.
- style: In two separate spots I get rid of the margins above and below html elements. This is optional styling, but I prefer my Jumbotrons to be slightly less Jumbo.
- tags$h2: This is the jumbotron header, AKA the big text. This is the equivalent to the <h2> element.
- p(): This is Shiny’s version of <p>, which is a paragraph element. This is the small text.
The ‘Darkly’ Shiny Theme plus the bootstrap Jumbotron is how we turn this title:
Into this title:
So regular tables in R kind of suck. They are serviceable, but not terribly exciting. R gives us a few nice options for pretty, useful tables, but Reactable is definitely my favorite.
The R Reactable library is an implementation of the excellent JavaScript ‘React Table’ library which is chock full of cool features. Here is a reference for some of the features this library has. The primary features we are after to make our plain app look a little better are styling and pagination.
We want our table to match our ‘Darkly’ bootstrap theme, so we will need some dark tables (the default table our plain app uses is pretty bright).
The second feature we want is pagination, which means we want our table to have a fixed height and allow you to ‘page’ through. The table in our original plain app puts too bright of a contrast against our dark theme.
Here is our old table, which scrolls for days:
And here is our new, paginated table:
And here is the code that made this table:
So what have we done here?
- renderTable() was swapped out for renderReactable()
- options(): This block of code is just for styling our reactable. If this block of code weren’t here, our reactable would still work just fine, it just wouldn’t match our theme.
- reactable(): This turns our data frame into a reactable object.
Just don’t forget to swap your tableOutput() for a reactableOutput in your ui!
I hate to say it, but tables of data can be a bit boring to look at. Adding a relevant image to your app, webpage, or report can make your point come across better while giving your mind something non-boring to look at.
In the case of our app, I put pen to tablet and drawn images of each planet. You don’t have to go this far, a regular old image from the internet will do.
Here is the code that swaps out our planet images based on the dropdown:
This is how this code works:
- planet: this variable holds the value of our select input. When a new planet is selected in our dropdown, that action invalidates this bit of code and a new image is rendered
- picFilePath: We build a file path to the image based on the selected planet (e.g. ‘Earth’ becomes ‘Earth.png’). All of the images are located in the shiny projects’ main folder, and are accessed through relative file paths.
- return(list): This ultimately turns our server code into a <img> element.
- This is all picked up in our ui by a imageOutput()
We don’t have to be constrained with an app that reads from the top down. Shiny provides us with plenty of options for laying our our app. These options include columns, rows, sidebars, navbars, and more!
We take a very simple approach by making transforming our very vertical plain app into a horizontal one that doesn’t require scrolling.
Here is the code:
We just have one row with two columns. The left column is the image and the right column is the reactable. The number next to each column is its size. The total size of a fluidRow is 12, so the image gets 1/3 the total width and the table gets the other 2/3.
Here is the final product:
Not bad!
Three simple tricks to make your R Shiny apps go from boring to beautiful
Shiny apps don’t have to be boring. There are some easy things you can do to bring some pizzazz to your apps with just a few lines of code! In this tutorial, we are going to take a simple, informative app about the moons of our solar system, and give it a little shine.
In short, we are going to be turning this plain app into this interesting one. These two apps have the exact same data, but one is a little more professional looking than the other. If you have ever done a Shiny tutorial, your app likely ended up looking like the plain one. By following a few tips, its easy to get from plain to interesting.
Our app is going to be all about the moons of the solar system. The data is simply a table from the List of Natural Satellites Wikipedia page. This page lists all of the known moons in the solar system (219 and counting, woohoo!).
First, let’s have a look at the plain app. The goal is quite simple, you have a dropdown for each planet, and this dropdown shows the selected planets’ moons and a few relevant stats.
You can download the full project for the plain app from GitHub. Simply download the files to your computer and open the R Project. Opening the Rproj file will do the trick if you want to run this app locally.
Here is the code:
There is nothing to fancy here , and it shows. In order of appearance, we have:
- titlePanel: This is the title at the top of the app
- selectInput: This lets you choose a planet to change the table
- tableOutput(‘moons’): This is our table, handed to us by the back end (aka the stuff inside ‘server’).
- df: This is a data frame of our moon data.
- output$moons: This takes our data frame and applies a simple filter to it. The planet chosen in the selectInput is passed into this filter, so if you select ‘Jupiter’, only the moons of Jupiter are returned back to the front end (aka everything inside of ui). The tableOutput(‘moons’) in the code above is just sitting there waiting for output$moons to tell it what to do. What a sheep.
You probably fell asleep reading that, because I fell asleep writing it. It’s boring code that produces a boring app. But what can we do to spice this app up a bit?
The Interesting App
Now we get to the fun stuff, here is the not so plain app. It’s the same data, just displayed slightly differently. You can download the entire R project, including my hand drawn images of the planets from GitHub.
Here is the code for the new app.R:
Now we will discuss what was changed, and how it helps.
Shiny themes are the easiest way to make your entire app look better with one line of code. If you didn’t know, Shiny uses bootstrap by default, which is a collective of html and css that is widely used when developing websites. Instructions for installing the shinythemes package can be found here.
There are quite a few themes to chose from, and you can look through each them here to see the actual color schemes and how they design each different type of object you might put into a Shiny app (e.g. dropdowns, navbars, buttons, tables, and more!). For example, here is the full palette for the Shiny Theme I chose to add to our app; Darkly.
The code that applied this theme to our plain app is:
fluidPage(theme = shinytheme("darkly"),
You add the theme you want inside of a fluidPage. Thats it. Make sure you add the library(shinythemes) to the top of your file.
Bootstrap is the most powerful visual library for HTML around. Bootstrap has carousels, spinners, drop downs, and more! They also have some pretty alternatives to a standard titlePanel, such as the Jumbotron.
Here is the code that implements the Jumbotron:
What is going on here?
- tags$div: This creates a <div>
- class = “jumbotron text-center”: This transforms our div into a jumbotron.
- style: In two separate spots I get rid of the margins above and below html elements. This is optional styling, but I prefer my Jumbotrons to be slightly less Jumbo.
- tags$h2: This is the jumbotron header, AKA the big text. This is the equivalent to the <h2> element.
- p(): This is Shiny’s version of <p>, which is a paragraph element. This is the small text.
The ‘Darkly’ Shiny Theme plus the bootstrap Jumbotron is how we turn this title:
Into this title:
So regular tables in R kind of suck. They are serviceable, but not terribly exciting. R gives us a few nice options for pretty, useful tables, but Reactable is definitely my favorite.
The R Reactable library is an implementation of the excellent JavaScript ‘React Table’ library which is chock full of cool features. Here is a reference for some of the features this library has. The primary features we are after to make our plain app look a little better are styling and pagination.
We want our table to match our ‘Darkly’ bootstrap theme, so we will need some dark tables (the default table our plain app uses is pretty bright).
The second feature we want is pagination, which means we want our table to have a fixed height and allow you to ‘page’ through. The table in our original plain app puts too bright of a contrast against our dark theme.
Here is our old table, which scrolls for days:
And here is our new, paginated table:
And here is the code that made this table:
So what have we done here?
- renderTable() was swapped out for renderReactable()
- options(): This block of code is just for styling our reactable. If this block of code weren’t here, our reactable would still work just fine, it just wouldn’t match our theme.
- reactable(): This turns our data frame into a reactable object.
Just don’t forget to swap your tableOutput() for a reactableOutput in your ui!
I hate to say it, but tables of data can be a bit boring to look at. Adding a relevant image to your app, webpage, or report can make your point come across better while giving your mind something non-boring to look at.
In the case of our app, I put pen to tablet and drawn images of each planet. You don’t have to go this far, a regular old image from the internet will do.
Here is the code that swaps out our planet images based on the dropdown:
This is how this code works:
- planet: this variable holds the value of our select input. When a new planet is selected in our dropdown, that action invalidates this bit of code and a new image is rendered
- picFilePath: We build a file path to the image based on the selected planet (e.g. ‘Earth’ becomes ‘Earth.png’). All of the images are located in the shiny projects’ main folder, and are accessed through relative file paths.
- return(list): This ultimately turns our server code into a <img> element.
- This is all picked up in our ui by a imageOutput()
We don’t have to be constrained with an app that reads from the top down. Shiny provides us with plenty of options for laying our our app. These options include columns, rows, sidebars, navbars, and more!
We take a very simple approach by making transforming our very vertical plain app into a horizontal one that doesn’t require scrolling.
Here is the code:
We just have one row with two columns. The left column is the image and the right column is the reactable. The number next to each column is its size. The total size of a fluidRow is 12, so the image gets 1/3 the total width and the table gets the other 2/3.
Here is the final product:
Not bad!
Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.