The Hotshots Racing Dashboard!
Authors: Eric Nantz
Abstract: A completely over-the-top dashboard summarizing the Wimpy's World Hotshot Racing 2021 spring virtual racing league. This dashboard contains interactive tables powered by {reactable} and interactive visualizations from {echarts4r} and {plotly}!
Full Description: ## The Hotshots Racing Dashboard!
This dashboard is part of a very fun stack of open-source software created for the Official Wimpy's World of Linux Gaming Most Official Unofficial Hotshot Racing League Spring Championship (WWOLGMOUHRLSC) competition that took place in early 2021. A group of friends from Martin Wimpress' Wimpy's World discord channel who just so happen to really enjoy racing games decided to have a little competition using the retro-style racing game called Hotshot Racing. On top of the immense fun we had, I thought it was a great time to collect our own real-time data for each race and summarize it all with the power of R and Shiny!
Want to see the replays of each season's grand prix session? They are all available on Martin's YouTube channel!
- Grand Prix 1: The Tour
- Grand Prix 2: Pro Circuit
- Grand Prix 3: Racing Elite
- Grand Prix 4: HotShot!
- Grand Prix 5: Boss Level
Nice Paint Job
Inspired by many sports websites that serve racing statistics and the recent advancements in the user-experience space of the Shiny community, I wanted to add some real-time sports statistics flair to our racing season by displaying custom tables and visualizations of the metrics collected from the races. After all, as the resident statistician/data scientist of our group, it was a given I would bring R and Shiny to the track! After the loading screen completes, the welcome page with high-level statistics are presented with widgets that would be right at home on any racing statistics site. But the part that will likely garner the most attention is the animated racing chart to show the progression of key statistics like total amount of points throughout the season!
The remaining tabs contain interactive tables that dive deeper into the analytics of individual player statistics. Each of the players used the same randomly-selected car as a means to even out the playing field. Each car can have wildly different strengths (for instance, some cars can accelerate quickly but with low top speed, etc). Each of the tables allow you to drill down and get a preview of how factors like the in-game drivers, tracks, and more factored in the overall results.
Under the Hood
If you would like a more visual/audio explanation of my development thought process and how I constructed the app, check out one of my previous Shiny Developer Series livestreams on YouTube!
Here's a brief summary of the packages and other tools that fueled this dashboard. I am very grateful to the brilliant authors that give me the ability to mix and match these ingredients to make this app a reality!
The application is structured as a full R package using {golem} authored by Colin Fay and the team at ThinkR. I've been on record multiple times with this simple fact: Once you go {golem}, you never go back! Check out my awesome conversation with Colin in episode 2 of the Shiny Developer Series to hear the motivation and benefits straight from the author.
The package dependencies are managed by {renv} authored by RStudio's own Kevin Ushey, to ensure that I control the versions of packages for this app and keep the library self-contained from my other R projects. Hear more from Kevin on the adventures of developing {renv} while taking lessons learned from {packrat} in episode 32 of my R-Podcast.
To style the dashboard with a theme similar to the Hotshot Racing game's aesthetics, I turned to my favorite dashboard package {bs4DFash} by David Granjon, which recently gained excellent integration with the {fresh} package by Victor Perrier & Fanny Meyer from dreamRs. As someone who is still learning the ropes on the lower-level styling of applications via CSS, I'm so impressed with how easy it was to actually incorporate custom fonts and colors in this app! You can learn more about the recent improvements in {bs4Dash} as well as David's new book Outstanding User Interfaces with Shiny in episode 20 of the Shiny Developer Series.
I definitely wanted some eye-catching graphics for this dashboard, and once I discovered the wealth of plots and widgets available on John Coene's {echarts4r} I was sold! Each box plot was able to have a custom theme applied that matched the look & feel of the rest of the app, plus the fun guages in the first part of the app just give it that extra polish. You can hear more of John's take on improvement the user experience of Shiny apps in episode 10 of the Shiny Developer Series. The animated race chart is made possible by the standard-bearer {plotly} by RStudio's Carson Sievert. The fact that I could not only customize the appearance, but also get an animated chart with fairly low effort is a testament to the power of this package! You'll be hearing more from Carson in a future Shiny Developer Series episode.
All of the interactive tables are powered by one of my favorite new packages {reactable} authored by RStudio's Greg Lin. There are so many great features available, and I use the concept of expandable details to give additional drill-down capabilities to a few of the tables.
Acknowledgements
On top of the brilliant authors above, I am also very thankful to my racing friends from Wimpy's World that continually give me some much-needed entertainment and have taught me so much with supercharging my media production skills and who now enjoy learning about R!
- Martin Wimpress: Leader of the Ubuntu Mate linux distribution and co-host of the Ubuntu Podcast. He streams on Twitch and YouTube
- Yannick Murray: Software developer and contributor to Ubuntu Mate. It seemed that he and I were in another competition of sorts to see who could make the most tech for this virtual league! Yannick is a co-host of the Tea, Earl Grey, Hot Star Trek fan podcast. and he streams about his tech projects on YouTube and Twitch
- Monica Ayhens-Madon: Ubuntu community representative at Canonical and one of the nicest people I've virtually met online! Monica has recently begun streaming on Twitch
Keywords: golem, dashboard, data, gaming, theme
Shiny app: https://rpodcast.shinyapps.io/hotshot_dashboard
Repo: GitHub - rpodcast/hotshots.dashboard: A Shiny-powered dashboard summarizing virtual racing league stats!
RStudio Cloud: Posit Cloud
Thumbnail:
Full image: