Gosling: Interactive Genomics Charts in R Shiny

Estimated time:

<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>.

Contact us!
Damian's Avatar
Damian Rodziewicz
Head of Sales
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Have questions or insights?
Engage with experts, share ideas and take your data journey to the next level!
Join Slack
Explore Possibilities

Take Your Business Further with Custom Data Solutions

Unlock the full potential of your enterprise with our data services, tailored to the unique needs of Fortune 500 companies. Elevate your strategy—connect with us today!

Estimate Project
shiny dashboards