search

eweitz / ideogram

Chromosome visualization for the web
https://eweitz.github.io/ideogram
Other
287 stars 72 forks source link

Request: overlaying multiple colored annotations on one ideogram #112

Open ejblom opened 5 years ago

ejblom commented 5 years ago

Hi

Your ideogram visualization looks very neat. I am looking into visualizations for genetic genealogy purposes. For that reason it would be very useful to color segments from multiple persons, for instance for similar regions:

https://famresearch.files.wordpress.com/2016/02/familytreedna-3-close-relatives-cf-to-kf.jpg?w=455

If multiple people match each other and share a segment of DNA on the same location (after checking that it is on the same side) they could have a common ancestor.

Best

EJ Blom

eweitz commented 5 years ago

@ejblom, this is possible in Ideogram.js, albeit not precisely as depicted in your linked graphic.

Your graphic:

family_finder_chromosome_browser

https://famresearch.files.wordpress.com/2016/02/familytreedna-3-close-relatives-cf-to-kf.jpg?w=455

Your graphic shows three tracks of overlaid, ranged annotations. Ideogram.js supports single tracks of overlaid, ranged annotations. For example:

One person:

ideogram_overlaid_annotations

https://eweitz.github.io/ideogram/annotations-overlaid

Similar example for three people: https://eweitz.github.io/ideogram/multiple-trio-sv.

Those examples show structural variants, but the same principle would apply to showing ancestry composition. Simply click on those links and "View source" to see how you can create similar ideograms.

I could foresee wanting to see multiple tracks of ranged annotations to depict ancestry relationships between multiple people. Ideogram does not yet support that, but I've been considering implementing it for use cases in cancer genomics. Would something like that be useful for your genetic genealogy use case?

ejblom commented 5 years ago

@eweitz , thanks for your quick reply. I only found the d3.js gallery and blown away with the very nice and different visualizations. If I continue with d3.js system I will most definitely be very interested in using your ideograms if they support multiple tracks. I would then only the segments that show some overlap (otherwise if you visualize all segments the picture gets very messy). Would be interesting to see how many people could be integrated and still have a picture that can be visualized. After a while the picture becomes to busy and you run out of different colors...