Gedmatch graphical segment calculator

(Last updated 20 May 2023)

• This tool generates a tiny HTML table to create a color bar similar to what Gedmatch creates that can be inserted into a larger table.
• DNA segments of  7 cM (centimorgans) in length are only 50% reliable matches.  Smaller matches even less so and should probably be ignored.
• Chromosome Browser and/or detailed segment data?  Ancestry (NO), FTDNA (Yes), 23 and Me (Yes), Gedmatch (Yes), My Heritage (Yes).
• Keep in mind segment data from a "Build 38" test could have significant segment positions differences from a "Build 36" and "Build 37" test especially on chromosomes 1, 15, 17 and 19 (!).  So in some cases where there is an actual DNA match between two people using different builds the segments data may not even overlap so keep that in mind. 
• Your DNA Guide
• Scratch text area to hold copied text from spreadsheet.  Commas are automatically stripped out.  
   

Pressing "Generate" with no numbers inputted shows a test bar.      

Chr	Highest positions from Gedmatches	Segment Start	Segment End	Generate color bar	Start pixel	End pixel	HTML code (td widths should add up to 200)	Example
1	249,222,527
2	242,737,341
3	196,351,215
4	190,915,650
5	178,640,760
6	170,919,470
7	158,811,958
8	143,145,442
9	140,145,149
10	131,941,265
11	134,934,063
12	133,777,645
13	115,103,150
14	106,020,366
15	102,398,631
16	90,149,922
17	81,041,077
18	78,015,180
19	59,087,479
20	62,912,463
21	48,090,629
22	51,211,392
23	155,092,794

CSS code used:

Here is the CSS code needed to make segments colors (arbitrary) and set minimal padding (mandatory).  Gradients could also be replaced with a background image.

Website used to generate color stripe code.

<style> table.segment {border-width: 1px; border-collapse: collapse; width: 200px; height: 20px; padding: 0px} td.ends {padding: 0px; background-color: black;} td.seg1 {padding: 0px; background-color: red;} td.seg2 {padding: 0px; background-color: orange;} td.seg3 {padding: 0px; background-color: yellow;} td.seg4 {padding: 0px; background-color: aqua;} td.seg5 {padding: 0px; background-color: yellowgreen;} td.seg6 {padding: 0px; background-color: #3333ff;} td.seg7 {padding: 0px; background-color: magenta;} td.seg8 {padding: 0px; background-color: #ffffff;} td.seg9 {padding: 0px; background-image: linear-gradient(45deg, #fff 8.33%, red 8.33%, red 50%, #fff 50%, #fff 58.33%, red 58.33%, red 100%); background-size: 25.46px 25.46px;} td.seg10 {padding: 0px; background-image: linear-gradient(45deg, #fff 8.33%, orange 8.33%, orange 50%, #fff 50%, #fff 58.33%, orange 58.33%, orange 100%); background-size: 25.46px 25.46px;} td.seg11 {padding: 0px; background-image: linear-gradient(45deg, red 8.33%, yellow 8.33%, yellow 50%, red 50%, red 58.33%, yellow 58.33%, yellow 100%); background-size: 25.46px 25.46px;} td.seg12 {padding: 0px; background-image: linear-gradient(45deg, #fff 8.33%, aqua 8.33%, aqua 50%, #fff 50%, #fff 58.33%, aqua 58.33%, aqua 100%); background-size: 25.46px 25.46px;} td.seg13 {padding: 0px; background-image: linear-gradient(45deg, #fff 8.33%, yellowgreen 8.33%, yellowgreen 50%, #fff 50%, #fff 58.33%, yellowgreen 58.33%, yellowgreen 100%); background-size: 25.46px 25.46px;} td.seg14 {padding: 0px; background-image: linear-gradient(45deg, #fff 8.33%, blue 8.33%, blue 50%, #fff 50%, #fff 58.33%, blue 58.33%, blue 100%); background-size: 25.46px 25.46px;} td.seg15 {padding: 0px; background-image: linear-gradient(45deg, #fff 8.33%, magenta 8.33%, magenta 50%, #fff 50%, #fff 58.33%, magenta 58.33%, magenta 100%); background-size: 25.46px 25.46px;} td.seg16 {padding: 0px; background-image: linear-gradient(45deg, white 8.33%, gray 8.33%, gray 50%, white 50%, white 58.33%, gray 58.33%, gray 100%); background-size: 25.46px 25.46px;} td.seg17 {padding: 0px; background-image: repeating-linear-gradient(135deg, white, white 5px, red 5px, red 10px);} td.seg18 {padding: 0px; background-image: repeating-linear-gradient(135deg, white, white 5px, orange 5px, orange 10px);} td.seg19 {padding: 0px; background-image: repeating-linear-gradient(135deg, white, white 5px, aqua 5px, aqua 10px);} td.seg20 {padding: 0px; background-image: repeating-linear-gradient(135deg, white, white 5px, green 5px, green 10px);} td.seg21 {padding: 0px; background-image: repeating-linear-gradient(135deg, white, white 5px, blue 5px, blue 10px);} td.seg22 {padding: 0px; background-image: repeating-linear-gradient(135deg, white, white 5px, magenta 5px, magenta 10px);} td.seg23 {padding: 0px; background-image: linear-gradient(135deg, red 25%, gold 25%, gold 50%, red 50%, red 75%, gold 75%, gold 100%);} </style> td.seg24 {padding: 0px; background: linear-gradient(red, orange, yellow, green);} td.seg25 {padding: 0px; background-color: #fff; background-image: linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%), linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%); background-size: 9px 9px; background-position: 0 0, 4.5px 4.5px;}

How the color bars are calculated:

Lowest and highest chromosome match positions used are found in my and other's Gedmatches.  The actual calculations assume the starting position of 1.   A starting position of 1 or 100,000 makes little or no difference in the color bar generated anyways.  It's not known if Gedmatch calculates starting with 1 or a larger number.  Assuming the Gedmatch bars represent absolute positions along the chromosomes it would make sense to start at position 1.  The chromosome tips may or may not be used in matching.  The highest position is the most important.

The process is take the highest value (total chromosome length), divide by 200 (desired color bar pixel length) to get the value it was divided by to shrink down to 200.  Use that new number and divide that into the matching segment start position and the matching segment end position to approximate scaled down pixel lengths.  Then generate the HTML code to produce a small color bar (in a table row) that can be dropped into other pages.  Each chromosome requires a different division number because the lengths are different.  Calculated segments lengths in pixels are either exact or within 1 pixel of what Gedmatch calculates.

Chrom- osome.	Lowest position in Gedmatches.	Highest position in Gedmatches.	Estimated divider used in Javascript to shrink to 200 pixels.
1	72,017	249,222,527	1246112
2	18,856	242,737,341	1213686
3	63,411	196,351,215	981756
4	74,983	190,915,650	954578
5	48,534	178,640,760	893203
6	148,878	170,919,470	854597
7	140,018	158,811,958	794059
8	714,648	143,145,442	715727
9	36,587	140,145,149	700725
10	135,708	131,941,265	659706
11	202,856	134,934,063	674670
12	197,841	133,777,645	668888
13	21,546,144	115,103,150	575515
14	20,426,742	106,020,366	530101
15	22,427,966	102,398,631	511993
16	101,263	90,149,922	450749
17	8,547	81,041,077	405205
18	132,301	78,015,180	390075
19	276,245	59,087,479	295437
20	63,799	62,912,463	314562
21	14,670,124	48,090,629	240453
22	17,075,353	51,211,392	256056
23	1,370,495	155,092,794	775463

Highest position calculated from highest matching segment position of DNA matches for Lance Hall and others.  Total lengths may be slightly higher with other people.  Highest 5, 13, 16, 17, and 23 from Phyllis.  Highest 6 from Kimberly Pr*****.

Calculations example:
Chromosome 5 Mathew Ad*** Gedmatch <td> lengths are 142 pixels (1-143), 34 pixels (145-176), and 24 pixels (177-200) // 128336024 (start) - 159270713 (end)
178640760 / 200 = 893203.8 //
128336024 / 893203.8  = 143.68 // 159270713 / 893203.8  = 178.31

Chromosome 4 Mannon match is 55 px, 22 px, 123 px (200 pixels total) // 52,784,678 (start) 73,781,518 (end)
190915650 \ 200 = 95457  |  52784678 / 56th px = 942583 | 73781518 / 78th px = 945916

Chromosome 9 Tammy Ba** match <td> is 35, 77, and 88px // Values are 24746335 (start) and 78645045 (stop)