Code for interactive web-based chromosome ideogram viewer?

Question

[paulparsons]

Does anyone know if there is any available code for an interactive web-based ideogram viewer? It would likely be written in javascript. I want to show an ideogram that dynamically displays some annotations (genes related to a phenotype search, for example).

I have found this ideogram viewer, but it is under copyright and the code has not been made available. There is also Phenogram, which looks nice, but is unfortunately only static images. I want to integrate this into a tool I'm building, so existing web-based genome browsers that have ideograms are not sufficient.

Thanks.

[YOT]

The 2 links you provides are very cool. Specially the second one, is nice. Me too, I was lookign for somethink like that. My project is to create a database to group everything in genomic field related to dental science. If you find some the second one open source, please, let me know. If not we can develop in JS together.

Answer 1

[paulparsons]

I just came across this, and got it up and running quite easily:

https://www.ebi.ac.uk/Tools/biojs/registry/Biojs.Chromosome.html

Pretty much exactly what I was looking for in my original question.

[paulparsons]

Update

The code that I posted above is being hosted here now, in the new biojs registry. For a number of reasons, it is not suitable for the project that I'm working on. A student that I'm supervising has rewritten the code to add some functionality and use vector graphics (d3.js). You can see the code here and a demo here.

I've since taken his code and expanded and modified it for Angular.js. I've written a chromosome directive, which can easily be inserted anywhere into an Angular app. The code is here, and the documentation page with some demos is here. This version has much added functionality compared to the biojs version.

Maybe these will be useful for some others who are looking for this type of functionality.

Answer 2

[Alex Reynolds]

Circos spits out SVG, and d3.js could be used to make the SVG-formatted ideograms interactive.

However, on cursory examination of some example SVG outputs from Circos, some patching would be needed, either of Circos or its output. The id values of g (group) and other SVG element primitives do not appear to have a useful naming scheme applied to them (if even present). If they were named in a reliable way, that would make it a lot easier to write a d3.js-based web application to make the SVG interactive (triggering hiding or showing of annotations on mouseover or mouseout events on specific UI or ideogram elements, etc.).

If the naming issue can be resolved, you'd probably have a web service running on a server somewhere that generates Circos figures on demand, based on whatever parameters the end user sets in the request. The response contains (compressed) SVG, d3.js event handlers are attached to elements within the SVG, and the SVG is poured into a container div somewhere in your web tool.

---

Update

Looks like there is functionality in a recent version of Circos to append identifier and other attributes to the SVG output:

From the CHANGES file:

Most data SVG elements can now have attributes for their SVG tags by adding svg\ parameters to the data point track. Any parameter that starts with svg (e.g. svgNNN) will be turned into an attribute whose name is derived from the parameter by stripping the leading "svg" out (e.g. NNNN). (e.g. svgid -> id, svgclass -> class).*

• hs1 100 200 0.5 svgid=123,svgclass=abc -> <circle ... id="123" class="abc"/>
• Ideograms now accept SVG attributes using svg* parameters in <ideogram> block. These can be eval()'ed

<ideogram>
 ...
 svgclass = eval(var(chr))
 svgid = eval(sprintf("chrid%s",var(label)))

[paulparsons]

Excellent. That looks like a viable option. I downloaded and played with Circos a bit, but will have to investigate it more throughly. The solution that I posted is much easier to get up and running. This is probably still a great option if one wants a circular ideogram.

Answer 3

[DCGenomics]

This might be worth checking out!

https://github.com/NCBI-Hackathons/rnaseqview