Introducing shiny.semantic::grid() - Build Your Shiny Dashboard Layout in Seconds

Reading time:

time

min

January 18, 2021

<h2>shiny.semantic::grid()</h2> 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. <blockquote>Want to learn Shiny from the ground up? <a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-masterclass-rstudio-global-2021/" target="_blank" rel="noopener noreferrer">Register for our free 90-minute workshop on the 20th of January, 2021</a>.</blockquote> At Appsilon, we've developed the <code>shiny.semantic</code> 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: <ul><li><a href="#what">What is Grid?</a></li><li><a href="#create">Create Your First Grid Layout</a></li><li><a href="#action">Grid in Action</a></li></ul> Note: presented functionality is available from shiny.semantic 0.4.2 <img class="size-full wp-image-6456" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c04ec1e575073dcf841_1.webp" alt="Image 1 - CSS positioning meme" width="267" height="448" /> Credit: <a href="https://xkcd.com/" target="_blank" rel="noopener noreferrer">XKCD</a> <h2 id="what">What is Grid?</h2> <a class="editor-rtfLink" href="https://en.wikipedia.org/wiki/CSS_grid_layout" target="_blank" rel="noopener noreferrer">CSS Grid system</a> is a modern approach for complex responsive web layouts. Appsilon's <code>shiny.semantic</code> <a class="editor-rtfLink" href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">package</a> gives you two grid functions: <ol><li><code>grid_template()</code> - for defining how your layout should be displayed on desktop and mobile</li><li><code>grid()</code> - for rendering a layout template in your Shiny UI</li></ol> The key to the grid are grid template areas. They allow you to define a layout like this (in raw CSS): <img class="size-medium wp-image-6457" src="https://wordpress.appsilon.com/wp-content/uploads/2021/01/2-3-600x161.png" alt="Image 2 - CSS grid template areas example" width="600" height="161" /> Image 2 - CSS grid template areas example The code displayed in the previous image results in this layout: <img class="wp-image-6458 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d5884fb9673e42312172_30ba9109_3-3.webp" alt="Image 3 - Example CSS grid layout (code from Image 2)" width="639" height="255" /> Image 3 - Example CSS grid layout (code from Image 2) Let's explore how to build a simple grid-powered layout next. <h2 id="create">Create Your First Grid Layout</h2> The <code>shiny.semantic</code> package simplifies low-level CSS and gives you a convenient <code>grid_template()</code> function. You provide the desired desktop and mobile layout inside it. Area names will be used later as keys in the <code>grid()</code> function upon providing area content (inner HTML). <script src="https://gist.github.com/darioappsilon/0c3f5103bcbf5354433d1e5a5f5cf898.js"></script> And here is how you render it in Shiny: <script src="https://gist.github.com/darioappsilon/d07c02aacef12234677e0a04b9abd716.js"></script> For debugging your template, use the <code>display_grid()</code> function, which lets you view your current layout and try it out: <script src="https://gist.github.com/darioappsilon/123a48b7102e06c777eccec8fcf59cf6.js"></script> The corresponding results are shown in the image below: <img class="size-full wp-image-6477" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b020da6bb6e6a6629d4195_ezgif-1-c65f576e0621.gif" alt="Image 4 - Displaying the CSS grid in Shiny app" width="716" height="430" /> Image 4 - Displaying the CSS grid in Shiny app <h2 id="action">Grid in Action</h2> Here is an example Shiny POC dashboard built in a couple of hours using <code>shiny.semantic</code> package and grid layout: <ul><li>Application - <a class="editor-rtfLink" href="https://demo.appsilon.ai/apps/polluter/" target="_blank" rel="noopener noreferrer">https://demo.appsilon.ai/apps/polluter/</a></li><li>Source code - <a class="editor-rtfLink" href="https://github.com/Appsilon/shiny.semantic-hackathon-2020" target="_blank" rel="noopener noreferrer">https://github.com/Appsilon/shiny.semantic-hackathon-2020</a> </li></ul> <img class="wp-image-6459 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d589842ddef80cb85fa8_eb4760a7_5-3.webp" alt="Image 5 - Polluter Alert - an application built with Shiny and Grid" width="1290" height="836" /> 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 <a class="editor-rtfLink" href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">repository</a>. <h2>Learn More</h2><ul><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/leaflet-geomaps/" target="_blank" rel="noopener noreferrer">How to Make Stunning Geomaps in R: A Complete Guide with Leaflet</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/impressive-dashboards-with-semantic-dashboard/" target="_blank" rel="noopener noreferrer">How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-router-020/" target="_blank" rel="noopener noreferrer">Basic Multipage Routing Tutorial for Shiny Apps: shiny.router</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/rapid-internationalization-of-shiny-apps-shiny-i18n-version-0-2/" target="_blank" rel="noopener noreferrer">Rapid Internationalization of Shiny Apps: shiny.i18n</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-worker-package/" target="_blank" rel="noopener noreferrer">shiny.worker: Speed Up R Shiny Apps by Offloading Heavy Calculations</a></li></ul> <a href="https://appsilon.com/careers/" target="_blank" rel="noopener noreferrer"><img class="size-large wp-image-5940 aligncenter" src="https://wordpress.appsilon.com/wp-content/uploads/2020/11/appsilon.hiring0-1024x576.jpg" alt="" width="1024" height="576" /></a> Appsilon is hiring for remote roles! See our <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/" target="_blank" rel="noopener noreferrer">Careers</a> page for all open positions, including <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#r-shiny-developer" target="_blank" rel="noopener noreferrer">R Shiny Developers</a>, <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#fullstack-software-engineer-tech-lead" target="_blank" rel="noopener noreferrer">Fullstack Engineers</a>, <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#frontend-engineer" target="_blank" rel="noopener noreferrer">Frontend Engineers</a>, a <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#senior-infrastructure-engineer" target="_blank" rel="noopener noreferrer">Senior Infrastructure Engineer</a>, and a <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#community-manager" target="_blank" rel="noopener noreferrer">Community Manager</a>. Join Appsilon and work on groundbreaking projects with the world's most influential Fortune 500 companies.

Have questions or insights?

Engage with experts, share ideas and take your data journey to the next level!

Is Your Software GxP Compliant?

Download a checklist designed for clinical managers in data departments to make sure that software meets requirements for FDA and EMA submissions.

Get the Checklist