Analytics Vidhya
Published in

Analytics Vidhya

Emmy Awards — Building my own R Shiny Framework

One of the coolest datasets that TidyTuesday has released lately was the Emmy Awards one.

For the ones that don’t know, the TidyTuesday challenge is about doing a data exploration once per week in R, using datasets or articles that TidyTuesday provides.

This is an awesome way for improving your skills in R, getting feedback and knowing a lot of interesting people in the community.

For this specific challenge, I took advantage of my knowledge as a developer (code efficiency, how to generate a solid file structure, deployment knowledge) and as a data analyst: how to wrangle and present the data correctly. Hence, I created a custom R Shiny Framework for using it in the future as template.

The final dashboard

The User Interface

Before starting coding, my initial thought was to create a dashboard easy to replicate for using it as a template for my future projects. So it should contain:

  • Filters: Multiselect in this case for seeing the data dynamically.
  • Toggling function for the sidebar. The filters need space in the screen that should be optional.
  • CSS for customizing the app: My own colors and font 🎨
  • Delimited spaces for the charts: Usually I try to show no more than 4 charts when it comes to presentation, in order to keep everything clean.

So the user interface in my mind was something like this:

Draft for the R Shiny Template

My custom R shiny framework

Once the UI structure was designed, the next step was to create the file infrastructure, avoiding the cluttering in my files. After have used several frameworks in different code languages (Django, Angular, Laravel…) I think that the best way for dividing my files into is:

Front-end files

  • The ui.R: It contains the whole structure of the app.
  • The front folder: It contains R files related to chart visualization.

A good code-practice would be to split the ui.R into several files if you want to add a lot of elements like filters, charts …etc. in order to keep you code as clean as possible. In this case, there’s no need for it.

Back-end files

  • The server.R: It contains the reactive part of the app: Pulling the data, the ETL, and finally returning the data to the ui.

Let’s make a pause here. It is important to collect the filter parameters from the ui for using them later for filtering our data. In order to do that, we create a reactive element that will perform as a listener in the app.

Our listener for the filter parameters.

After that, we create an observeEvent that will use the listener information.

  • The backend folder: It contains a filters.R file that controls the filters functionality and a dataCharts.R file that filters and mutates the data for using it in visualization.

The notebook.Rmd file: It allows me to create and test charts without activating the app every time I need it. Is a good way for quick-testing and making experiments.

The www folder: It contains the CSS of the app. Also, if you want to add any image for loading into the Shiny app, here is where you put it.

Last but not least, there are other necessary files for generating this particular app:

  • The showsRace.gif. This gif is used as the chart 3 in the app and this is because (as far as I know) for plotting animated charts in R shiny, you need to export it first as a gif.
  • The waffle-master folder. This folder is the library that I used for generating the waffles in the app. I put it here because, as the waffle library is not a CRAN package, you will get an error when you deploy it in R Shiny. The solution for this error is to download the package from its source and load it in the code.
My custom framework for the file infrastructure.

Including a gif into the dashboard

Let’s see a specific example about how all of this works: Let’s generate the animated bar race chart and plot it into the dashboard.

First of all, we need to create an space inside the ui for the chart (in this case, will be the third chart):

We use imageOutput as we need to show here a gif

After that, we need to generate the gif outside the R shiny, here is the code

Bar Race gif in R

The last step is render the image with the following code in the server.R as next:

This will plot our animated chart into the dashboard 👏

Conclusions

After some hours of coding and joining pieces, here is the final dashboard where:

  • Top-left chart: It shows the top 5 shows sorted by more Nominations & Wins all together.
  • Top-right chart: Here you can see with a waffle visualization, the number of Nominations vs Wins of the Top 1 show that is plotted in the previous chart (i.e: The next image represents Nominee vs Winner of Saturday Night Live)
  • Bottom-left chart: Top 10 shows each year with an animated gif.
  • Bottom-right chart: How many “Wins” has each of my favourite distributors over time.

The code is included in:

And that’s all from this Tidy Tuesday. Thanks for reading ! If you have any feedback that’d be really welcomed and appreciated.

Contact info

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan

Juan

Lead Data Scientist 📊 at Bravo Studio. Start-up growth advisor 🚀 He/Him — 🏳️‍⚧️🏳️‍🌈 ally. Opinions are my own