Adding Style to Shiny Apps

Making your analytics look great is the envy of a lot of data scientists. Here's a simplified take.

PREAMBLE

Shiny applications have become quite pervasive in the Data Science community. While there are some great options out there for improving the aesthetics of a shiny application (see shinydashboard), sometimes it's nice to create the look yourself using cascading style sheets (or CSS). To explain my process, I am going to take the Word Cloud application from the RStudio Shiny Gallery (below left) and walk you through my thoughts on adjusting the aesthetics to create a more custom look (below right).

BEFORE AND AFTER

before_and_after

Download the code here.


THE UI FILE

For starters, you will need to include a CSS file in your app which Garrett from RStudio has written an excellent post on the subject. My personal favorite is to specify the file in the theme parameter for the fluidPage (pictured below). This keeps with the code style of shiny and saves you from jumping to the code style of CSS within the same file. Later we will create this CSS file and store it in the "www" folder.


Before getting into the CSS, though, I wrap my UI components in a div and specify the class. This enables referencing in the CSS file to adjust things like the background color or font. For better understanding how divs and classes work, w3 schools has some great content to get a good working knowledge of them.

divs


THE EXTRA MEDIA

As text is the vast majority of content on the internet, using impactful fonts will drastically influence the emotional response to your content. I go to Google fonts to find nice fonts for web content. They have a huge selection, rank them by popularity, and even provide markup and CSS for you to use. Roboto is the most popular Sans Serif font so I am going to use that. To use this font for your Shiny app, you only need to specify this in your CSS file (shown below in the CSS file). In the event that you are deploying an application where Google is blocked, there are trivial methods for storing the fonts locally.

For photos and videos, the best option is to work with a designer, photo- grapher, or videographer, If you have none of these are your disposal, the next best option is attribution free media. I like the site Pexels which has a treasure trove of high quality attribution free photos and videos. Wikimedia commons is also a great source. Once you've decided that you'd like to enliven your content with additional media, the next step would be to make sure that the media you select is relevant to the data that you're working with. As this app is working with Shakespeare, I selected a photo that had a book in it. I could've just as easily picked one of a skateboarder but that truly has little if no relation to Shakespeare. Last, once you've selected your media -- it's best to compress it. Photos and videos are often fairly large and will slow down the download of a web page/use up unnecessary data.


THE CSS FILE

Now that you have everything together, you can begin to build your CSS file. Instead of walking you through all the logic involved in constructing a useful CSS file, I've heavily commented the script and presented it below. This file should be saved as "mystyle.css" (create with any text editor) and stored in a "www" folder in the same directory as your ui.R and server.R files.

css

While abrupt and, at times, quick -- I hope that this walk through was useful for people interested in making their shiny applications liven up with some aesthetics components via custom CSS. Again, if you'd like to see code, please download all of it from my github.



Tags: r, r-bloggers, shiny