How to Replicate JBrowse Plot

Question

[serodyc]

Hi everyone,

I am a junior bioinformatician who is relatively new to genome browsers. I have recently been unsuccessfully attempting to create a graphic similar to the one below but for a different dataset. I am especially interested in how I could replicate the bottom part of the figure, with the 3-D plots that stack on each other. This graphic was produced using FlyBase's JBrowse genome browser, so hopefully someone here has made this type of graph with this browser before, and it would be fantastic if you could tell me how it was done.

[serodyc]

Answer 1

[cmdcolin]

Hi @serodc. That visualization track for jbrowse is a custom thing that flybase made. I think they used code that they made for gbrowse and pre-rendered png tiles to create it. I have worked on jbrowse 1 plugin for similar multi-bigwig type rendering but did not try to replicate their code exactly. My approaches in jbrowse 1 culminated in making the multibigwig plugin (https://github.com/elsiklab/multibigwig). There is also wigglehighlighter which could replicate the little red boxes outlining the "peaks" https://github.com/cmdcolin/wigglehighlighter

JBrowse 1 development with plugins has gotten a little hard over the years, see https://jbrowse.org/docs/faq.html#how-do-i-use-plugins-with-jbrowse and make sure to use nodejs less than 14 e.g. just use 12 when running the setup.sh script.

You could also consider JBrowse 2, we have multibigwig (aka multiquantitativetracks) built-in https://jbrowse.org/jb2/docs/config_guides/multiquantitative_track/ so don't need to install any plugins

Disclaimer: I'm a jbrowse dev and wrote all the above jbrowse 1 plugins and jbrowse 2 code

[cmdcolin]

note: if you are adventurous and really want the 3-D look, you could likely modify the code at https://github.com/elsiklab/multibigwig to accomplish this