Shiny.gosling Examples and How to Run Them: Genomics Visualizations in R Shiny

<strong>Genomics visualizations</strong> can be tricky to set up. With <strong>shiny.gosling</strong>, we make it easier for you to access the grammar of <strong>Gosling.js in R/Shiny</strong>. We also have a hidden feature for you to play around with and explore the package to get a taste of what it can do. If you followed our previous <a href="https://appsilon.com/gosling-r-shiny/" target="_blank" rel="noopener">tutorial on shiny.gosling</a>, you already have it set up. If not, we recommend going through it and getting the package installed and ready. Once things are in motion, all you have to do is use the <code>shiny.gosling::run_example()</code> function! <h2>Examples of shiny.gosling Genomics Visualizations</h2> At the time of writing, the following examples are available: <ul><li><a href="#circularbrush">circularLinearWithBrush</a></li><li><a href="#circularencode">circularVisualEncoding</a></li><li><a href="#multi">multiTrackApp</a></li><li><a href="#sars">sarsCov2</a></li><li><a href="#static">staticCircularBar</a></li><li><a href="#structural">structuralVariant</a></li><li><a href="#annotation">textAnnotation</a></li></ul> <hr /> In this article, we will go through each example one at a time, adding context along the way. If an example your looking for isn't present, reach out and let us know. <h3 id="circularbrush">circularLinearWithBrush</h3> <img class="alignnone wp-image-17938" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01bd787923e0adc15fea6_circularLinear-genomics-visualization-with-brush-using-shiny.gosling.gif" alt="circularLinear genomics visualization with brush using shiny.gosling" width="600" height="600" /> <code>shiny.gosling::run_example(“circularLinearWithBrush”)</code> In this example, we have a circular overview of different chromosomes, which can be selected from the dropdown or selected via the brush. It has two draggable brushes, that choose and determine the areas to expand in the detailed view so that they can be compared with each other. It also lets us download the view in pdf or png. <h3 id="circularencode">circularVisualEncoding</h3> <img class="alignnone wp-image-17944" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01bd7a7c6956a1697930a_singleTrack-visualizaiton-with-a-linear-layout-in-shiny.gosling.gif" alt="singleTrack visualizaiton with a linear layout in shiny.gosling" width="600" height="600" /> <code>shiny.gosling::run_example(“circularVisualEncoding”)</code> This is a simple example of visualizing a circular encoding of genes. Hovering over the specific areas shows you the Start Position, End Position, and Value. We can also zoom in and out of certain parts of the plot with the scroll of a mouse. From the perspective of gosling, this is a simple single-track genomics visualization. You can also easily export the plot to pdf. <h3 id="multi">multiTrackApp</h3> <img class="alignnone wp-image-17940" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01bd9832c47d6731031ed_multiTrackApp-in-r-with-shiny.gosling.gif" alt="multiTrackApp in r with shiny.gosling" width="900" height="450" /> <code>shiny.gosling::run_example(“multiTrackApp”)</code> Here, we have a multi-track application that shows you how you can use a tabbed UI to switch between different genomics visualizations. In the multi-track tab, we can see the standard Gosling.js example of a <a href="https://gosling.js.org/#Applications_Breast%20Cancer%20Variant%20(Staaf%20et%20al.%202019)" target="_blank" rel="noopener">Breast Cancer Variant (Staaf et al. 2019)</a>; the example is based on genome sequencing from data on 254 triple-negative breast cancers (TNBCs) collected through the Sweden Cancerome Analysis Network–Breast (SCAN-B) project. Apart from being able to download in pdf and png, we can choose a chromosome from the drop-down to quickly view it. We can also zoom out to the entire sequence by clicking on the “Reset Zoom” button. <h3 id="sars">sarsCov2</h3> <img class="alignnone wp-image-17942" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01bd944295a0f3321847d_sarsCov2-genome-browser-in-r-with-shiny.gosling.gif" alt="sarsCov2 genome browser in r with shiny.gosling" width="900" height="450" /> <code>shiny.gosling::run_example(“sarsCov2”)</code> This example replicates the <a href="https://gosling.js.org/#Applications_SARS-CoV-2" target="_blank" rel="noopener">SARS-CoV-2</a> visualization from the Gosling gallery. This is based on the WashU Virus Genome Browser, NCBI, GISAID. The idea for these examples is to help you show how easy it is to build an equivalent genomics visualization in R/Shiny using shiny.gosling. While the run_example() function shows you the visualization itself, you can go into the package code and check the process of building the viz itself. In this plot, all the segments are in sync with each other. We can use the brush to zoom into a certain portion and all the segments will also zoom in as well. If we zoom in on all, it's possible to see the exact sequence of the gene. If the brush is moved, other segment views will move in tandem. <h3 id="static">staticCircularBar</h3> <code>shiny.gosling::run_example(“staticCircularBar”)</code> This example shows the simplest visualization you can make with Gosling.js and shiny.gosling. Here, we have a static bar plot in the circular layout. It is non-interactive. This is the best format to create visualizations that you can embed into .rmd or Quarto reports. <h3 id="structural">structureVariant</h3> <img class="alignnone wp-image-17946" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01bdaf072657ad6831a8f_structuralVariant-genomics-visualization-in-r-with-shiny.gosling.gif" alt="structuralVariant genomics visualization in r with shiny.gosling" width="600" height="600" /> <code>shiny.gosling::run_example(“structuralVariant”)</code> This is an example of a simple Circos plot that lets you zoom in and interact with it as you’d expect. There is also a legend for each class that you can refer to and understand the mapping between the chromosomes. This shows how to build simple layers and visualizations without too much complexity. <h3 id="annotation">textAnnotation</h3> <img class="alignnone wp-image-17948" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01bdce4bb5dd953257e7a_textAnnotation-genomics-data-visualization-with-shiny.gosling.gif" alt="textAnnotation genomics data visualization with shiny.gosling" width="900" height="225" /> <code>shiny.gosling::run_example(“textAnnotation”)</code> The example above shows a text-annotated visualization of the WashU Virus Genome Browser. If you zoom into the plot, you can actually see that each of the ACGT is labeled. Gosling.js has all of these functionalities built-in but shiny.gosling makes them much easier to tap into to augment your genomics visualizations. <h2>How to Get Started with Genomics in R Shiny with shiny.gosling</h2> With shiny.gosling, we are trying to bring the grammar of Gosling.js straight into R/Shiny. Hopefully, the examples above have proved to be a valid demonstration of how easy it is to use and how diverse shiny.gosling is; furthermore we hope to showcase how it is evolving! We are actively working on making it better, and adding support for more of Gosling.js grammar. Shiny.gosling as the eventual go-to package for Gosling.js and genomics visualizations in R/Shiny. If you'd like to get started be sure to explore our <a href="https://appsilon.github.io/shiny.gosling/articles/intro.html">shiny.gosling intro tutorial</a> or read more about the theory and a <a href="https://appsilon.com/gosling-r-shiny/" target="_blank" rel="noopener">practical example of shiny.gosling for a genomics data dashboard</a>.