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:

• What is Grid?
• Create Your First Grid Layout
• Grid in Action

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:

1. grid_template() – for defining how your layout should be displayed on desktop and mobile
2. grid() – 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.