Skip to content

Commit cfddf08

Browse files
eweitzeweitz
authored
Merge pull request #73 from eweitz/enhance-ploidy
Ploidy enhancements: Sex chromosomes, vertical orientation, simplified settings
2 parents 18a84fc + c171a7d commit cfddf08

14 files changed

Lines changed: 585 additions & 128 deletions

‎dist/js/ideogram.js‎

Lines changed: 243 additions & 45 deletions
Large diffs are not rendered by default.

‎dist/js/ideogram.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/ideogram.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h1>Overview | Ideogram</h1>
3232
<li><a href="annotations_histogram.html">Annotations, histogram</a>. Dense feature distributions on chromosomes.</li>
3333
<li><a href="layout_small.html">Layout, small</a>. Chromosomes surrounded by other content.</li>
3434
<li><a href="brush.html">Brush</a>. Move and resize a slider-like widget to change genomic coordinates in focus.</li>
35-
<li><a href="ploidy_basic.html">Ploidy, basic</a>. Triploid chromosomes (3n).</li>
35+
<li><a href="ploidy_basic.html">Ploidy, basic</a>. Diploid genome of a human female.</li>
3636
<li><a href="ploidy_rearrangements.html">Ploidy, rearrangements</a>. Loss and gain of cytogenetic arms and chromatids.</li>
3737
<li><a href="ploidy_recombination.html">Ploidy, recombination</a>. Gene conversion and double chromosome crossover among chromatids.</li>
3838
<li><a href="multiple_trio.html">Multiple, trio</a>. Three human genomes.</li>

‎examples/multiple_trio.html‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,38 @@
44
<title>Multiple, trio | Ideogram</title>
55
<link type="text/css" rel="stylesheet" href="../dist/css/ideogram.css"/>
66
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
7-
<script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
7+
<script type="text/javascript" src="../dist/js/ideogram.js"></script>
88
</head>
99
<body>
1010
<h1>Multiple, trio | Ideogram</h1>
1111
<a href=".">Back to overview</a>
1212
<p>
13-
A minimal example of three human genomes.
13+
Three diploid human genomes: a female, a male, and another male.
1414
See also <a href="multiple_trio_sv.html">Multiple, trio SV</a>.
1515
</p>
1616
<script type="text/javascript">
17-
var config, containerIDs, id, i, container;
17+
var config, genomes, id, i, container, sex;
1818

1919
config = {
2020
organism: "human",
21+
ploidy: 2,
2122
chrHeight: 125,
23+
chrWidth: 8,
2224
resolution: 400,
2325
orientation: "vertical"
2426
};
2527

26-
containerIDs = ["mother", "father", "proband"];
27-
for (i = 0; i < containerIDs.length; i++) {
28-
id = containerIDs[i];
28+
genomes = [
29+
["mother", "female"],
30+
["father", "male"],
31+
["proband", "male"]
32+
];
33+
for (i = 0; i < genomes.length; i++) {
34+
id = genomes[i][0];
2935
container = '<div id="' + id + '"></div>';
3036
document.querySelector("body").innerHTML += container;
3137
config.container = "#" + id;
38+
config.sex = genomes[i][1];
3239
new Ideogram(config);
3340
}
3441
</script>

‎examples/ploidy_basic.html‎

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,22 @@
66
<link type="text/css" rel="stylesheet" href="../dist/css/ideogram.css"/>
77
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
88
<script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
9-
<script type="text/javascript" src="../data/bands/native/banana.js"></script>
109
</head>
1110
<body>
12-
<h1>Ploidy, basic | Ideogram</h1>
11+
<h1>Ploidy, basic | Ideogram</h1>
1312
<a href=".">Back to overview</a>
1413
<p>
15-
This triploid banana genome is a hybrid of
16-
<i>Musa acuminata</i> ("A") and <i>Musa balbisiana</i> ("B").
14+
This diploid genome shows maternal ("M") and paternal ("P") chromosomes of
15+
a normal human female (46,XX).
1716
</p>
1817
<script type="text/javascript">
1918

2019
var config = {
21-
organism: "banana",
22-
// armColors: ["#D00", "#CCC"],
23-
// armColors: ["#fff", "#fff"],
24-
// armColors: ["#dea673", "#7396be"],
25-
orientation: "horizontal",
26-
ploidy: 3,
27-
ancestors: {
28-
"A": "#dea673",
29-
"B": "#7396be"
30-
},
31-
ploidyDesc: [
32-
'AAB',
33-
'AAB',
34-
'BAB',
35-
'AAB',
36-
'AAB',
37-
'BBB',
38-
'AAB',
39-
'AAB',
40-
'AAB',
41-
'AAB',
42-
'AAB'
43-
]
20+
organism: "human",
21+
sex: "female",
22+
chrHeight: 300,
23+
chrWidth: 8,
24+
ploidy: 2
4425
};
4526

4627
var ideogram = new Ideogram(config);

‎examples/ploidy_recombination.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta charset="utf-8">
77
<link type="text/css" rel="stylesheet" href="../dist/css/ideogram.css"/>
88
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
9-
<script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
9+
<script type="text/javascript" src="../dist/js/ideogram.js"></script>
1010
<script type="text/javascript" src="../data/bands/native/banana.js"></script>
1111
</head>
1212
<body>
@@ -31,6 +31,7 @@ <h1>Ploidy, recombination | Ideogram</h1>
3131
// armColors: ["#dea673", "#7396be"],
3232
orientation: "horizontal",
3333
ploidy: 3,
34+
chrMargin: 10,
3435
ancestors: {
3536
"A": "#dea673",
3637
"B": "#7396be"

0 commit comments

Comments
 (0)