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

<h2><span data-preserver-spaces="true">shiny.semantic::grid()</span></h2> <span data-preserver-spaces="true">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. </span> <blockquote><strong>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>.</strong></blockquote> <span data-preserver-spaces="true">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 </span><strong><span data-preserver-spaces="true">grid</span></strong><span data-preserver-spaces="true">, enabling you to build any layout in seconds, not hours or days.</span> <span data-preserver-spaces="true">Navigate to a section:</span> <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> <strong><em><span data-preserver-spaces="true">Note</span></em></strong><span data-preserver-spaces="true">: </span><em><span data-preserver-spaces="true">presented functionality is available from shiny.semantic 0.4.2</span></em> <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" /> <em>Credit: <a href="https://xkcd.com/" target="_blank" rel="noopener noreferrer">XKCD</a></em> <h2 id="what"><span data-preserver-spaces="true">What is Grid?</span></h2> <a class="editor-rtfLink" href="https://en.wikipedia.org/wiki/CSS_grid_layout" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">CSS Grid system</span></a><span data-preserver-spaces="true"> is a modern approach for complex responsive web layouts. Appsilon's <code>shiny.semantic</code> </span><a class="editor-rtfLink" href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">package</span></a><span data-preserver-spaces="true"> gives you two grid functions:</span> <ol><li><span data-preserver-spaces="true"><code>grid_template()</code> - for defining how your layout should be displayed on desktop and mobile</span></li><li><span data-preserver-spaces="true"><code>grid()</code> - for rendering a layout template in your Shiny UI</span></li></ol> <span data-preserver-spaces="true">The key to the grid are grid template areas. They allow you to define a layout like this (in raw CSS):</span> <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 <span data-preserver-spaces="true">The code displayed in the previous image results in this layout:</span> <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) <span data-preserver-spaces="true">Let's explore how to build a simple grid-powered layout next.</span> <h2 id="create"><span data-preserver-spaces="true">Create Your First Grid Layout</span></h2> <span data-preserver-spaces="true">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).</span> <script src="https://gist.github.com/darioappsilon/0c3f5103bcbf5354433d1e5a5f5cf898.js"></script> <span data-preserver-spaces="true">And here is how you render it in Shiny:</span> <script src="https://gist.github.com/darioappsilon/d07c02aacef12234677e0a04b9abd716.js"></script> <span data-preserver-spaces="true">For debugging your template, use the <code>display_grid()</code> function, which lets you view your current layout and try it out:</span> <script src="https://gist.github.com/darioappsilon/123a48b7102e06c777eccec8fcf59cf6.js"></script> <span data-preserver-spaces="true">The corresponding results are shown in the image below:</span> <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"><span data-preserver-spaces="true">Grid in Action</span></h2> <span data-preserver-spaces="true">Here is an example Shiny POC dashboard built in a couple of hours using <code>shiny.semantic</code> package and grid layout: </span> <ul><li><span data-preserver-spaces="true">Application - </span><a class="editor-rtfLink" href="https://demo.appsilon.ai/apps/polluter/" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">https://demo.appsilon.ai/apps/polluter/</span></a></li><li><span data-preserver-spaces="true">Source code - </span><a class="editor-rtfLink" href="https://github.com/Appsilon/shiny.semantic-hackathon-2020" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">https://github.com/Appsilon/shiny.semantic-hackathon-2020</span></a><span data-preserver-spaces="true"> </span></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" /> <em>Polluter Alert: an application built in under 24 hours of development time with shiny.semantic and Grid</em> <span data-preserver-spaces="true">If you like the package and want more functionalities like this, don't forget to ⭐ the </span><a class="editor-rtfLink" href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">repository</span></a><span data-preserver-spaces="true">. </span> <h2><span data-preserver-spaces="true">Learn More</span></h2><ul><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/leaflet-geomaps/" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">How to Make Stunning Geomaps in R: A Complete Guide with Leaflet</span></a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/impressive-dashboards-with-semantic-dashboard/" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard</span></a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-router-020/" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">Basic Multipage Routing Tutorial for Shiny Apps: shiny.router</span></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"><span data-preserver-spaces="true">Rapid Internationalization of Shiny Apps: shiny.i18n</span></a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-worker-package/" target="_blank" rel="noopener noreferrer"><span data-preserver-spaces="true">shiny.worker: Speed Up R Shiny Apps by Offloading Heavy Calculations</span></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> <p style="text-align: center;"><strong><span data-preserver-spaces="true">Appsilon is hiring for remote roles! See our </span></strong><a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/" target="_blank" rel="noopener noreferrer"><strong><span data-preserver-spaces="true">Careers</span></strong></a><strong><span data-preserver-spaces="true"> page for all open positions, including </span></strong><a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#r-shiny-developer" target="_blank" rel="noopener noreferrer"><strong><span data-preserver-spaces="true">R Shiny Developers</span></strong></a><strong><span data-preserver-spaces="true">, </span></strong><a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#fullstack-software-engineer-tech-lead" target="_blank" rel="noopener noreferrer"><strong><span data-preserver-spaces="true">Fullstack Engineers</span></strong></a><strong><span data-preserver-spaces="true">, </span></strong><a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#frontend-engineer" target="_blank" rel="noopener noreferrer"><strong><span data-preserver-spaces="true">Frontend Engineers</span></strong></a><strong><span data-preserver-spaces="true">, a </span></strong><a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#senior-infrastructure-engineer" target="_blank" rel="noopener noreferrer"><strong><span data-preserver-spaces="true">Senior Infrastructure Engineer</span></strong></a><strong><span data-preserver-spaces="true">, and a </span></strong><a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#community-manager" target="_blank" rel="noopener noreferrer"><strong><span data-preserver-spaces="true">Community Manager</span></strong></a><strong><span data-preserver-spaces="true">. Join Appsilon and work on groundbreaking projects with the world's most influential Fortune 500 companies.</span></strong></p>