Introducing shiny.semantic::grid() – Build Your Shiny Dashboard Layout in Seconds
This article is originally published at https://appsilon.com
shiny.semantic::grid()
The main job of a data scientist is to provide meaningful insights, mostly through data visualizations and dashboards. More often than not, data science professionals struggle with HTML and CSS, which makes building an aesthetically-pleasing layout near to impossible. And they are not to blame – that’s a job for frontend developers. Still, there’s a simple solution available.
Want to learn Shiny from the ground up? Register for our free 90-minute workshop on the 20th of January, 2021.
At Appsilon, we’ve developed the shiny.semantic package, which comes with predefined components for your dashboard. One of these components is the grid, enabling you to build any layout in seconds, not hours or days.
Navigate to a section:
Note: presented functionality is available from shiny.semantic 0.4.2
Credit: XKCD
What is Grid?
CSS Grid system is a modern approach for complex responsive web layouts. Appsilon’s shiny.semantic package gives you two grid functions:
grid_template()– for defining how your layout should be displayed on desktop and mobilegrid()– for rendering a layout template in your Shiny UI
The key to the grid are grid template areas. They allow you to define a layout like this (in raw CSS):
Image 2 – CSS grid template areas example
The code displayed in the previous image results in this layout:
Image 3 – Example CSS grid layout (code from Image 2)
Let’s explore how to build a simple grid-powered layout next.
Create Your First Grid Layout
The shiny.semantic package simplifies low-level CSS and gives you a convenient grid_template() function. You provide the desired desktop and mobile layout inside it. Area names will be used later as keys in the grid() function upon providing area content (inner HTML).
And here is how you render it in Shiny:
For debugging your template, use the display_grid() function, which lets you view your current layout and try it out:
The corresponding results are shown in the image below:
Image 4 – Displaying the CSS grid in Shiny app
Grid in Action
Here is an example Shiny POC dashboard built in a couple of hours using shiny.semantic package and grid layout:
- Application – https://demo.appsilon.ai/apps/polluter/
- Source code – https://github.com/Appsilon/shiny.semantic-hackathon-2020
Polluter Alert: an application built in under 24 hours of development time with shiny.semantic and Grid
If you like the package and want more functionalities like this, don’t forget to 
the repository.
Learn More
- How to Make Stunning Geomaps in R: A Complete Guide with Leaflet
- How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard
- Basic Multipage Routing Tutorial for Shiny Apps: shiny.router
- Rapid Internationalization of Shiny Apps: shiny.i18n
- shiny.worker: Speed Up R Shiny Apps by Offloading Heavy Calculations
Appsilon is hiring for remote roles! See our Careers page for all open positions, including R Shiny Developers, Fullstack Engineers, Frontend Engineers, a Senior Infrastructure Engineer, and a Community Manager. Join Appsilon and work on groundbreaking projects with the world’s most influential Fortune 500 companies.
Article Introducing shiny.semantic::grid() – Build Your Shiny Dashboard Layout in Seconds comes from Appsilon | End to End Data Science Solutions.
Thanks for visiting r-craft.org
This article is originally published at https://appsilon.com
Please visit source website for post related comments.
