Analytics dashboards are a popular way to explore data or to communicate insights.
So it's good to know how to build one.
Here's how you do that with R in no time. 🧵 #rstats #shiny
1 // Data
First, you need data.
It's always fun to work with your personal data, so I will use my the last three months of my Twitter analytics data. You can download yours at analytics.twitter.com
You could also download the public metrics with {rtweet} instead.
2 // Data cleaning
Next, do a bit of data cleaning. In my case, I just have to clean the column names and select a few columns.
{janitor} and {dplyr} make that easy.
3 // Set up dashboard
Now, we can already start building the dashboard.
Use {shiny} and {bs4Dash} to set up the dashboard. The UI elements from {bs4Dash} make that really simple
3b // UI elements from {bs4Dash}
Basically what you need are the modular dashboardXYZ() functions and bs4Cards().
4 // Fill sidebars
Now you can include your data in your app.
Use it to fill the sidebars with sliders.
The easiest way is to write a wrapper around the sliderInput() and use it to fill the sidebar.
5 // Add table
The sliders will be used to filter our data. Once it is filtered, we can put it into a table with {reactable}.
This is a 3-step process:
1️⃣ Add reactableOutput() to the UI
2️⃣ Create a reactive for the filtered data
3️⃣ Render table with renderReactable()
5b // Table formatting
The table columns could use some formatting. You can do that within the reactable() function.
If you're not familiar with {reactable}, you can just follow along the *many* examples in the excellent docs at glin.github.io/reactable/arti…
6 // Add a box
Adding boxes works on both the UI and the server side.
In the UI, use bs4ValueBoxOutput().
In the server, do two things:
1️⃣ Compute metric summary
2️⃣ Render Value box
6b // Repeat for more boxes
You can repeat the same procedure to include more boxes.
The best way to do that is with modules. Since they are best explained in a separate example, I'll just leave this here:
7 // Add interactive plots
Finally, we can add interactive plots with {plotly} using plotlyOutput() + renderPlotly().
And the best part: You don't need to know how {plotly} works. Just make a ggplot and convert it with ggplotly().
7b // Repeat for more plots
Once again, you can repeat the same logic to include more plots with or without modules. The choice is yours.
8 // Reactivity to dark theme
Finally, we need to make sure that the table and the plots react to the dashboard's dark theme toggle.
For the plot, load {thematic} and activate it with thematic_shiny().
For the table, follow the instructions from the docs glin.github.io/reactable/arti…
Yay! 🥳 We've successfully built an analytics dashboard.
Need more details? You can check out the micro-course I've set up for this project.
It comes with code for the completed app and a full video walk-through. You can get it at courses.albert-rapp.de/l/shiny-analyt…
That's a wrap! 🙌
I hope you've found this thread helpful. If you want to see more content like this, follow @rappa753 for more. ☺️
Also, don't forget to Like/Retweet the first tweet below if you can.
See you next time! 👋
If you liked this post, you may enjoy my 3-minute newsletter too.
Every week, my newsletter shares insights on
- dataviz,
- Shiny web apps
- stats
Reading time: 3 minutes or less
You can join at
alberts-newsletter.beehiiv.com/subscribe
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.