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
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):
The code displayed in the previous image results in this layout:
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:
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
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.