Gosling: Interactive Genomics Charts in R Shiny

<strong>Visualizing genomics data</strong> is not as straightforward as you would think. The whole industry is extremely complex and suffers from a major problem - specialization creep. There are so many niches in genomics, meaning one library or service can't cover the entire <a href="https://connect.appsilon.com/shiny-gosling/" target="_blank" rel="noopener">spectrum of genomics data visualization</a> needs. That is, until now. Because today you'll learn how <a href="http://gosling-lang.org" target="_blank" rel="nofollow noopener">Gosling</a> works, what is it exactly, and how to leverage the Gosling R Shiny package to include a genomics chart in your favorite web development package. <blockquote>Want to visualize spatial data in R? <a href="https://appsilon.com/r-ggmap/" target="_blank" rel="noopener">Read our in-depth introduction to R ggmap</a>.</blockquote> Table of contents: <ul><li><a href="#why-gosling">Why Gosling for Genomics Data Visualization</a></li><li><a href="#gosling-intro">Testing the Waters: Your First shiny.gosling Data Visualization</a></li><li><a href="#deeper">Going Deeper with Gosling and R Shiny</a></li><li><a href="#summary">Gosling and R Shiny Summary</a></li></ul> <hr /> <h2 id="why-gosling">Why Gosling for Genomics Data Visualization</h2> So, what is Gosling exactly? It's an acronym that stands for <i>Grammar Of Scalable Linked Interactive Nucleotide Graphics</i>. It's quite a mouthful, so we won't give you a hard time for not remembering it. <img class="size-full wp-image-16901" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d2dc5b4ea85830a2fc48_7b822946_1-1.webp" alt="Image 1 - Gosling homepage" width="3150" height="2316" /> Image 1 - Gosling homepage The whole thing is still relatively new, so we recommend visiting the <a href="http://gosling-lang.org/about/" target="_blank" rel="nofollow noopener">homepage</a> through our link since a Google search turns out a bunch of results for <i>Ryan Gosling</i>. Both are cool, but couldn't be more different. In fact, <i>Gosling</i> was named after <i>Raymond Gosling</i> (not Ryan), who was the first to come up with the double helix structure of the DNA that we have come to know. His magnum opus was <i>Photo 51</i> which he developed with Rosalind Franklin. It also serves as the namesake for Gosling.js. Gosling visualization package is a grammar for interactive and scalable genomics data visualization. It balances the expressiveness of multi-scale genomics data visualizations with accessibility for domain scientists. It's powered by Gosling.js, which is a JavaScript toolkit that provides scalable and interactive rendering. Learn more about Gosling on the <a href="http://gosling-lang.org/about/">official website</a>. <h2 id="gosling-intro">Testing the Waters: Creating A shiny.gosling Data Visualization in R</h2> Gosling breaks data visualizations into several components and Appsilon's <a href="https://github.com/Appsilon/shiny.gosling" target="_blank" rel="noopener">shiny.gosling</a> package reflects that. These are: <ul><li><b>Tracks:</b> Atomic units that define the data, layout, height, width, aesthetics, and other items.</li><li><b>Views:</b> A combination of tracks.</li><li><b>Plots:</b> A combination of views.</li></ul> In R, <code>shiny.gosling</code> depends on another Appsilon's package - <code>shiny.react</code>. You'll have to install both from GitHub if you want to use Gosling in R Shiny: <pre><code class="language-r">remotes::install_github("Appsilon/shiny.react") remotes::install_github("Appsilon/shiny.gosling")</code></pre> For the first example, we'll grab a portion of the <a href="https://github.com/Appsilon/shiny.gosling/blob/main/inst/examples/app.R" target="_blank" rel="noopener">official example</a>. The following snippet renders an 800x180 bar chart based on the data listed on the URL: <pre><code class="language-r">library(shiny) library(shiny.react) library(shiny.gosling) <br> spec1 = '{  "title": "Basic Marks: bar",  "subtitle": "Tutorial Examples",  "tracks": [    {      "layout": "linear",      "width": 800,      "height": 180,      "data": {        "url": "https://resgen.io/api/v1/tileset_info/?d=UvVPeLHuRDiYA3qwFlm7xQ",        "type": "multivec",        "row": "sample",        "column": "position",        "value": "peak",        "categories": ["sample 1"],        "binSize": 5      },      "mark": "bar",      "x": {"field": "start", "type": "genomic", "axis": "bottom"},      "xe": {"field": "end", "type": "genomic"},      "y": {"field": "peak", "type": "quantitative", "axis": "right"},      "size": {"value": 5}    }  ] }' <br>shinyApp(  ui = tagList(    GoslingComponent(spec = JS(spec1))  ),  server = function(input, output) {} )</code></pre> As you can see, you need to create tracks and combine them into views and plots (wrapped in JSON), and then use <code>GoslingComponent()</code> function to output it in the app. Here's what the app looks like: <img class="size-full wp-image-16903" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d2ddd16df45f371e6292_45a01231_2.gif" alt="Image 2 - Shiny gosling app rendering a single chart" width="1456" height="834" /> Image 2 - Shiny gosling app rendering a single chart You can take the dashboard a step further by examining the second plot from the <a href="https://github.com/Appsilon/shiny.gosling/blob/main/inst/examples/app.R" target="_blank" rel="noopener">official example</a>. It outputs an additional chart below the first one that is controlled by brushes: <img class="size-full wp-image-16905" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d2de9781259e9854de04_9e0f0e74_3.gif" alt="Image 3 - R Shiny app showing 2 sets of Gosling charts" width="1060" height="834" /> Image 3 - R Shiny app showing 2 sets of Gosling charts If you want to get an entire example gallery, simply clone the entire <a href="https://github.com/Appsilon/shiny.gosling" target="_blank" rel="noopener">Appsilon shiny.gosling</a> repo and run the Shiny app under <code>inst/examples/dashboard/app.R</code>. You'll need an additional dependency - <code>shiny.fluent</code>, so install it with the following command: <pre><code class="language-r">remotes::install_github("Appsilon/shiny.fluent")</code></pre> Once up and running, you'll have access to many other charts and examples: <img class="size-full wp-image-16907" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d2dffb53ada9a639e67b_4f04177e_4.gif" alt="Image 4 - Shiny dashboard showcasing Gosling use cases and examples" width="1464" height="1048" /> Image 4 - Shiny dashboard showcasing Gosling use cases and examples Let's dive a bit deeper into Gosling R Shiny by checking the most current features which haven't been released yet. <h2 id="deeper">Going Deeper with Gosling and R Shiny for Genomics Data Dashboards</h2> Gosling in R Shiny looks good so far but offers no customization. As it turns out, you can control each level by using a list of functions <code>shiny.gosling</code> offers. For this part, we'll actually install the package from the <code>dev</code> branch: <pre><code class="language-r">remotes::install_github("https://github.com/Appsilon/shiny.gosling/", ref = "dev")</code></pre> Once installed, you can clone the contents of the <a href="https://github.com/Appsilon/shiny.gosling/tree/dev" target="_blank" rel="noopener">dev</a> branch to get access to more examples and additional functionality. Let's take a look at the example under <code>inst/examples/multiTrackApp</code> with R Shiny reactivity and options to download the plots or reset their zoom: <img class="size-full wp-image-16909" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d2e0b9100faa4a29a441_3f34dcff_5.gif" alt="Image 5 - Multi Track Gosling Shiny app" width="1482" height="1026" /> Image 5 - Multi-Track Gosling Shiny app Overall, there are 7 complete dashboard examples you can take a peek at. From a developer's perspective, things are much more interesting here. You can now use helper functions and completely avoid the use of quote-wrapped JSON. Here are some you must know: <ul><li><code>add_single_track()</code> - Constructs a single track from the inputs. The inputs can be id, data, mark, and so on.</li><li><code>add_multiple_track()</code> - Used to combine multiple single tracks.</li><li><code>export_png() / export_pdf()</code> - Exports your data visualization as PNG/PDF.</li><li><code>build_json()</code> - Builds a Gosling spec from an R list. Useful when you want to take things outside of R.</li></ul> You don't need to explore these functions on your own. Here's an example screenshot from an R file showcasing how much the current development version of <code>shiny.gosling</code> makes the workflow cleaner and developer-friendly: <img class="size-full wp-image-16911" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d2e06778869364e92254_7e0baee1_6-1.webp" alt="Image 6 - A new way of coding Gosling visualizations" width="2624" height="2080" /> Image 6 - A new way of coding Gosling visualizations From the previous example, you can see the <code>add_single_track()</code> function in action. It translates messy and hard-to-debug string-wrapped JSON into a first-class R function with a whole lot of properties you can change and tweak. <blockquote>Want to design better dashboards? Follow <a href="https://appsilon.com/ux-design-of-shiny-apps-7-steps-to-design-dashboards-people-love/" target="_blank" rel="noopener">Anna's 7 steps to design dashboards people will love</a>.</blockquote> That's all we'll explore today, so let's make a short recap next. <hr /> <h2 id="summary">Summarizing Gosling and R Shiny for Genomics Charts and Visualizations</h2> Interactive data visualization in genomics has a promising future thanks to the Gosling JavaScript toolkit. R Shiny takes it a step further by offering a complete package to work with Gosling from R - <code>shiny.gosling</code>. The R package is still in active development, and you can expect improvements and additional functionality soon. Stay tuned to the <a href="https://appsilon.com/blog/" target="_blank" rel="noopener">Appsilon blog</a> for any updates regarding Gosling R Shiny, as well as for the other articles and tech tutorials. <i>What are your thoughts on Gosling for genomic data visualization? Have you tried our R Shiny wrapper for Gosling?</i> Make sure to let us know about your favorite features in the comment section below. Also, don't hesitate to reach out to us on Twitter - <a href="http://twitter.com/appsilon" target="_blank" rel="nofollow noopener">@appsilon</a>. We'd love to hear from you. <blockquote>Looking for a dashboard inspiration? <a href="https://appsilon.com/r-shiny-in-life-sciences-examples/" target="_blank" rel="noopener">Take a look at our top 7 curated R Shiny apps in Life Sciences</a>.</blockquote> <hr /> This article was co-authored by Appsilon Data Storyteller, <a href="https://appsilon.com/author/dario/" target="_blank" rel="noopener">Dario Radečić</a>.