GenoPro Home
GenoPro Home  |  Get Started With My Genealogy Tree  |  Buy  |  Login  |  Privacy  |  Search  |  Site Map
 

GenoPro Support Forum




Is there a way to integrate Ideogram.js in GenoPro?

Click to view RSS...
Author
Posted Thursday, January 22, 2026 - Post #47526
Famous Writer

Famous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous Writer

Customers
FamilyTrees.GenoPro.com
GenoPro version: 3.1.0.1

Last Login: 2 days ago @ 3:01 PM
Posts: 267, Visits: 1,770
Forgive my lack of JavaScript knowledge.

A while back, I stumbled across a JavaScript Library for Chromosome Visualization called ideogram.js

I'm wondering if it can be integrated into GenoPro somehow, either on individual profiles or to display on certain GenoMaps?

Here's a link to the github repository: https://github.com/eweitz/ideogram

"Ideogram.js is a JavaScript library for chromosome visualization.

Ideogram supports drawing and animating genome-wide datasets for humanmouse, and many other eukaryotes. The Ideogram API for annotations supports histogramsheatmapsoverlays, and points of arbitrary shape and color layered in tracks. The Ideogram API also supports spanning annotations alone, or with heatmaps and histograms. Ideogram can depict haploid, diploid or higher ploidy genomes (e.g. plants), as well as aneuploidy, genetic recombination, and homologous features between chromosomes.

Ideogram can be embedded as a reusable component in any web page or application, and leverages D3.js and SVG to achieve fast, crisp client-side rendering. You can also integrate Ideogram with JavaScript frameworks like AngularReact, and Vue, as well as data science platforms like R and Jupyter Notebook." 

Here is a chart package re: ideogram: https://speakerdeck.com/eweitz/ideogramjs-chromosome-visualization-with-javascript

I'm specifically looking at the page titled "Visualize Genome Alignments"

https://support.genopro.com/Uploads/Images/407d13fb-7c12-4116-946e-7807.png 


Would it be possible to display an image like this either on individual pages or a GenoMap?

For example, if you had a pair of descendants of a set of Great Grandparents that shared DNA, you would show the Great Grandparents at the top, their 2 children, the 2 grandchildren, and the 2 great-children, and then the lines between each generation showing which DNA Segments were transmitted from one generation to the next.

Posted Friday, January 23, 2026 - Post #47528
Famous Writer

Famous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous WriterFamous Writer

Customers
FamilyTrees.GenoPro.com
GenoPro version: 3.1.0.1

Last Login: 2 days ago @ 3:01 PM
Posts: 267, Visits: 1,770
Here's a mock up of what I'm trying to describe in the last paragraph.

Two great grandchildren realize they share DNA on Chromosome 7.  The red line shows how those segments were passed down to them from their Great Grandparents to their Grandparents to their Parents, and finally to them.

There might be multiple lines drawn showing how DNA was passed down through generations.

https://support.genopro.com/Uploads/Images/080842ec-cb93-441b-a98c-20ba.png
Posted 2 days ago @ 12:29 PM - Post #47529
Legendary Master

Legendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary Master

Administrators
Customers
Important Contributors
FamilyTrees.GenoPro.com
GenoPro version: 3.1.0.1

Last Login: 11 minutes ago
Posts: 3,474, Visits: 26,997
Well, my knowledge of genetics could be written on a postage stamp and so I do not really understand what ideogram.js is trying to achieve.

I believe the example in your opening post compares DNA of human beings and a house mouse, i.e. two different species. So I am not sure what it would achieve using ideogram.js in this way with two related individuals, would there not be some many lines marking similarities that it would be impossible to see the wood from the trees?

Anyway, as to integrating this library into GenoPro or its Report Generator would not be feasible or necessary.  

Not feasible because GenoPro uses an ancient Microsoft javascript engine, JScript, that is not compatible with modern Javascript libraries that use Google's V8 engine, and so the code in ideogram.js would need modification.  

Not necessary because a similar result could be obtained by generating the graphs external to GenoPro and importing the graph images into GenoMaps or as Pictures on Individuals.

The web page 'genome-alignment.html' used in the ideogram.js example can be easily converted into a free standing 'app' to accept dna details of two individuals and produce the graph as a web page from which the image could be saved. However DNA data needs to be presented in a particular way in a 'Tab Separated Variable', or .tsv, file with side by side DNA ifo.

The first few lines of the sample file homo_sapiens-mus_musculus-synteny-v73.tsv look like

#Species1: homo_sapiens
#Assembly: GRCh37
#Species2: mus_musculus
#Assembly: GRCm38
# eweitz: Using GRCh38 instead of GRCh37.  TODO: Support `assemblies` in multi-organism Ideogram.
# eweitz: Provenance: http://webclu.bio.wzw.tum.de/cgi-bin/syntenymapper/get-species-list.py
#ID Chromosome_spec1 Start_spec1 End_spec1 Chromosome_spec2 Start_spec2 End_spec2 Dir
44632 chr2 190506076 196592789 chr1 46812285 53360818 -1
44533 chr15 22833222 23396962 chr7 55793904 56188883 -1
44532 chr14 58666612 106375879 chr12 70937761 113525420 1
44535 chr15 28815855 28927409 chr7 56049949 56188883 1

I do not understand what these data represent or how they are derived. I attach the actual file but renamed as .txt instead of .tsv due to forum restrictions on file types.


'lego audio video erro ergo disco' or "I read, I listen, I watch, I make mistakes, therefore I learn"


homo_sapiens-mus_musculus-synteny-v73.txt (2 views, 21.32 KB)


Similar Topics

Click to view RSS...
Expand / Collapse

Reading This Topic

Expand / Collapse