{"id":1796,"date":"2020-07-21T16:47:16","date_gmt":"2020-07-21T16:47:16","guid":{"rendered":"http:\/\/optimumsportsperformance.com\/blog\/?p=1796"},"modified":"2020-07-21T17:04:17","modified_gmt":"2020-07-21T17:04:17","slug":"r-tips-tricks-building-a-shiny-training-load-dashboard","status":"publish","type":"post","link":"https:\/\/optimumsportsperformance.com\/blog\/r-tips-tricks-building-a-shiny-training-load-dashboard\/","title":{"rendered":"R Tips & Tricks: Building a Shiny Training Load Dashboard"},"content":{"rendered":"

In TidyX Episode 19<\/a><\/strong><\/span> we discussed a way of building a dashboard with the {formattable<\/strong><\/span>} package. The dashboard included both a data table and a small visual using {sparkline<\/strong><\/span>}. Such a table is great when you need to make a report for a presentation but there are times when you might want to have something that is more interactive and flowing. In the sports science setting, this often comes in the form of evaluating athlete training loads. As such, I decided to spin up a quick {shiny<\/strong><\/span>} web app to show how easy it is to create whatever you want without sinking a ton of money into an athlete management system.<\/p>\n

The code is available on my GITHUB<\/a><\/span><\/strong> page.<\/p>\n

Packages & Custom Functions<\/strong><\/span><\/p>\n

Before doing anything, always start by loading the packages you will need for your work. In this tutorial, we will using the {tidyverse<\/strong><\/span>} and {shiny<\/strong><\/span>} packages, so be sure to install them if you haven’t already. I also like to set my plot theme to classic so that I get rid of grid lines for the {ggplot2<\/strong><\/span>} figures that I create.<\/p>\n

Finally, I also wrote a custom function for calculating a z-score. This will come in handy when we go to visualize our data.<\/p>\n

\r\n# custom function for calculating z-score\r\nz_score <- function(x){\r\n  z = (x - mean(x, na.rm = T)) \/ sd(x, na.rm = T)\r\n  return(z)\r\n}\r\n<\/pre>\n
 <\/p>\n
Data<\/strong><\/span><\/p>\n
Next we simulate a bunch of fake data for a basketball team so that we have something to build our {shiny<\/strong><\/span>} app against. We will simulate total weekly training loads for 10 athletes across three different positions (fwd, guard, center), for a 3 week pre-season and a 15 week in-season.<\/p>\n
 <\/p>\n
\r\nset.seed(55)\r\nathlete <- rep(LETTERS[1:10], each = 15)\r\nposition <- rep(c("fwd", "fwd", "fwd", "fwd", "guard", "guard", "guard", "center", "center", "center"), each = 15)\r\nweek <- rep(c("pre_1", "pre_2", "pre_3", 1:12), times = 10)\r\ntraining_load <- round(rnorm(n = length(athlete), mean = 1500, sd = 350), 1)\r\n\r\ndf <- data.frame(athlete, position, week, training_load)\r\ndf$flag <- factor(df$flag, levels = c("high", "normal", "low"))\r\ndf$week <- factor(df$week, levels = c("pre_1", "pre_2", "pre_3", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")) \r\n\r\ndf %>% head()\r\n<\/pre>\n
The first few rows of the data look like this:<\/p>\n
\"\"<\/a><\/p>\n
Shiny App<\/strong><\/span><\/p>\n
There are two components to building a {shiny<\/strong><\/span>} app:<\/p>\n
1) The user interface, which defines the input that the user specifies on the web app.
\n2) The server, which reacts to what the user does and then produces the output that the user sees.<\/p>\n
The user interface I will define as tl_ui<\/strong><\/span> (training load user interface). I start by creating a fluid page (since the user is going to be defining what they want). I set the parameters of what the user can control. Here, I provide them with the ability to select the position group of interest and then the week(s) of training they would like to see in their table and plot.<\/p>\n
\"\"<\/a><\/p>\n
The server, which I call tl_server<\/strong><\/span> (training load server), is a little more involved as we need to have it take an input from the user interface , get the correct data from our stored data frame, and then produce an output. This part can be a bit involved. Below you can see the code and I’ll try and articulate a few of the main things that are taking place.<\/p>\n
1) First, I get the data for the visualization the user wants. I’m using our simulated data and I calculate the z-score for each individual athlete, using the custom function I wrote. After that I create my flag (\u00b11 SD from the individual athlete’s mean) and then I finally filter the data specific to the inputs provided in the user interface. This last part is critical. If I filter before applying my z-score and flags, then the mean and SD used to calculate the z-score will only be relative to the data that has been filtered down. This probably isn’t what we want. Rather, we will want to calculate our z-score using all data, season-to-date. So we retain everything and perform our calculation and then we filter the data.<\/p>\n
2) After getting the data, I build my plot using {ggplot2<\/strong><\/span>}.<\/p>\n
3) Then I create another data set specific to the table weeks of training selected by the user. This time, we will retain the raw values (non-standardized) for each athlete as the user may want to see raw values in a table. Notice that I also pivot that data using the pivot_wider()<\/span> <\/strong>function as the data is currently stored in a long format with each row representing a new week for the athlete. Instead, I’d like the user to see this data across their screen, with each week representing a new column. As the user selects new weeks of data to visualize our server will tell {shiny<\/strong><\/span>} to populate the next column for that athlete.<\/p>\n
4) Once I have the data we need, I simply render the table.<\/p>\n
Those 2 steps complete the building of our {shiny<\/strong><\/span>} app!<\/p>\n
\"\"<\/a><\/p>\n
Finally, the last step is to run the {shiny<\/strong><\/span>} app using the shinyApp()<\/strong><\/span> function which takes two arguments, the name of your user interface (tl_ui<\/strong><\/span>) and the name of your server (tl_server<\/strong><\/span>). This will open up a shiny app in a new window within R Studio that you can then open in your browser.<\/p>\n
Visually, you can see what the app looks like below. If you want to see it in action, aside from getting my code and running it yourself, I put together this short video >> R Tips & Tricks – Training Load Dashboard<\/span><\/strong><\/a><\/p>\n
\"\"<\/a><\/p>\n
Conclusion<\/strong><\/span><\/p>\n
As you can tell, it is pretty easy to build and customize your own {shiny<\/strong><\/span>} app. I’ll admit, the syntax for {shiny<\/strong><\/span>} can get a bit frustrating but once you get the hang of it, like most things, it isn’t that bad. Also, unless you are doing really complex tasks, most of the syntax for something as simple as a training load dashboard wont be too challenging. Finally, such a quick and easy method not only allows you to customize things exactly as you want them, but it also saves you money from having to purchase an expensive athlete management system.<\/p>\n
As always, you can obtain the code for this tutorial on my GITHUB<\/a><\/strong><\/span> page.<\/p>\n","protected":false},"excerpt":{"rendered":"
In TidyX Episode 19 we discussed a way of building a dashboard with the {formattable} package. The dashboard included both a data table and a small visual using {sparkline}. Such a table is great when you need to make a report for a presentation but there are times when you might want to have something […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45,42],"tags":[],"class_list":["post-1796","post","type-post","status-publish","format-standard","hentry","category-r-tips-tricks","category-sports-science"],"_links":{"self":[{"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/posts\/1796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/comments?post=1796"}],"version-history":[{"count":4,"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/posts\/1796\/revisions"}],"predecessor-version":[{"id":1805,"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/posts\/1796\/revisions\/1805"}],"wp:attachment":[{"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/media?parent=1796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/categories?post=1796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/optimumsportsperformance.com\/blog\/wp-json\/wp\/v2\/tags?post=1796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}