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.