Chromosome Band Interactive Javascript Viewer?

Question

[projectprogramamark]

Hello,

I've been trying to set up an interactive view for viewing chromosome bands, and where insertions take place in them. I have found this but there is no documentation, it hasn't been updated in years and doesn't seem to be working anymore. It requires a way to be able to zoom into the graph to see at exactly what coordinates the insertion/chromosome is. I've also looked at this ideogram and it seems close to what I want, but I need more interactivity and ability to scroll and see exact coordinates. I've contemplated just using a regular JS chart library and fitting it to my own needs but that seems inefficient. I'm quite new to bioinformatics, so if I'm missing out on any important details feel free to ask.

Thanks in advance.

Answer 1

[Eric Weitz]

Genome browsers support much of the use case you describe. Examples include:

• NCBI Genome Data Viewer
• IGV.js
• UCSC Genome Browser

You can set up the main part of NCBI's genome browsers using the Sequence Viewer Embedding API. Sequence Viewer (SV) provides a great way to view single chromosomes in detail. In addition to official examples, source code and a third-party demo using the SV Embedding API are available on GitHub.

An ideogram component like the Ideogram.js example you note could be integrated with NCBI Sequence Viewer -- or other SV-like components. Such an integration could support switching between a summary whole-genome view and a detailed single-chromosome view, which would have novel and useful applications. If you are looking for a bioinformatics project that involves JavaScript and viewing chromosomes, integrating Ideogram.js with a component like Sequence Viewer is worth considering!

I wrote Ideogram.js and collaborate closely with the NCBI Sequence Viewer team, so let me know of any questions about those components.

[projectprogramamark]

Thanks a ton! I will look into this and get back to you on this thread in case I have any questions.

Edit: I'm trying to use the Sequence Viewer in order to display chromosomes from plasmodium, but I'm not finding any support for it. Is there any way to have it support this organism?

[Eric Weitz]

Here's example code showing how to embed a minimal display for chromosome 1 of Plasmodium:

To view multiple chromosomes in addition to that single chromosome detail, you'll need an ideogram component. Ideogram.js currently only supports human and mouse, but support for many more organisms will be the next major feature I implement. You can get notified of progress on that by subscribing to https://github.com/eweitz/ideogram/issues/45 on GitHub.

[projectprogramamark]

The code isn't working. I believe there are some broken links in sviewer.js?

[Eric Weitz]

Odd, the code works for me. I copied and pasted the code above into a new static HTML file on localhost, and everything looks good to me on Chrome, Firefox and Safari. My localhost is running on the Apache web server bundled with Mac OS X El Capitan.

You should see something like https://goo.gl/fKwKgO. What do you see? Do you see the Sequence Viewer toolbar, or only the static <h1> content ("NCBI Sequence Viewer: Plasmodium...")?

Assuming you have a local web server running, try this:

1. In your terminal, cd <your web server document root>
2. curl -O https://gist.githubusercontent.com/eweitz/630a05ea9b5979514ffe1c2c64257099/raw/ca87b614cba63615d216796b676a2671f643e72b/ncbi_sequence_viewer_plasmodium.html
3. In Chrome, navigate to http://localhost/ncbi_sequence_viewer_plasmodium.html
4. If you don't see a Sequence Viewer instance like https://goo.gl/fKwKgO, open Chrome Developer Tools.
   • In the Console tab, are there any messages?
   • In the Network tab, do any requests have a status other than "200" or "304"?
   • In the Network tab, do you see requests for seqconfig.cgi, seqgraphic.cgi and ncfetch.cgi?