ideogram
Version:
Chromosome visualization for the web
259 lines (244 loc) • 6.92 kB
HTML
<html>
<head>
<title>AncestryDNA analysis | Ideogram</title>
<script type="text/javascript" src="../bands/native/homo-sapiens-GCF_000001405.13-850.js"></script>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="../../src/js/filter.js"></script>
<style>
body {font: 14px Arial; line-height: 19.6px;}
ul {
list-style: none;
padding-left: 10px;
float: left;
}
#gene-type {
padding-left: 30px;
}
.note {
font-style: italic;
padding-left: 10px;
clear: left;
}
</style>
</head>
<body>
<h1>AncestryDNA analysis | Ideogram</h1>
<a href="ancestry-tracks">View same data in tracks</a>
<div id="container"></div>
<ul id="clinsig">
Clinical significance
<li>
<label for="filter_clinsig_pathogenic">
<input type="checkbox" id="filter_clinsig_pathogenic">Pathogenic</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_clinsig_likely-pathogenic">
<input type="checkbox" id="filter_clinsig_likely-pathogenic">Likely pathogenic</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_clinsig_likely-benign">
<input type="checkbox" id="filter_clinsig_likely-benign">Likely benign</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_clinsig_benign">
<input type="checkbox" id="filter_clinsig_benign">Benign</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_clinsig_uncertain-significance">
<input type="checkbox" id="filter_clinsig_uncertain-significance">Uncertain</input>
<span class="count"></span>
</label>
</li>
<!--
<li>
<label for="filter_clinsig_not-provided">
<input type="checkbox" id="filter_clinsig_not-provided">Not provided</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_clinsig_other">
<input type="checkbox" id="filter_clinsig_other">Other</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_clinsig_not-in-clinsig">
<input type="checkbox" id="filter_clinsig_not-in-clinvar">Not in ClinVar</input>
<span class="count"></span>
</label>
</li>
-->
</ul>
<ul id="homozygous">
Homozygous
<li>
<label for="filter_homozygous_yes">
<input type="checkbox" id="filter_homozygous_yes">Yes</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_homozygous_no">
<input type="checkbox" id="filter_homozygous_no">No</input>
<span class="count"></span>
</label>
</li>
</ul>
<ul id="allele1">
Allele 1
<li>
<label for="filter_allele1_a">
<input type="checkbox" id="filter_allele1_a">A</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele1_t">
<input type="checkbox" id="filter_allele1_t">T</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele1_c">
<input type="checkbox" id="filter_allele1_c">C</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele1_g">
<input type="checkbox" id="filter_allele1_g">G</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele1_0">
<input type="checkbox" id="filter_allele1_0">0</input>
<span class="count"></span>
</label>
</li>
</ul>
<ul id="allele2">
Allele 2
<li>
<label for="filter_allele2_a">
<input type="checkbox" id="filter_allele2_a">A</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele2_t">
<input type="checkbox" id="filter_allele2_t">T</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele2_c">
<input type="checkbox" id="filter_allele2_c">C</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele2_g">
<input type="checkbox" id="filter_allele2_g">G</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_allele2_0">
<input type="checkbox" id="filter_allele2_0">0</input>
<span class="count"></span>
</label>
</li>
</ul>
<div class="note">Histogram shows real human variant data</div>
<script type="text/javascript">
var counts, key, count,
d3 = Ideogram.d3;
d3.selectAll("input").on("click", function() {
var filterMap,
tmp, facet,
checkedFilter,
checkedFilters,
selections = {},
i, facet, counts, count,
filterID;
filterMap = {
"homozygous": {
"yes": 1,
"no": 0
},
"allele1": {
"a": 0,
"t": 1,
"c": 2,
"g": 3,
"0": 4
},
"allele2": {
"a": 0,
"t": 1,
"c": 2,
"g": 3,
"0": 4
},
"clinsig": {
"not-in-clinvar": -1,
"uncertain-significance": 0,
"not-provided": 1,
"benign": 2,
"likely-benign": 3,
"likely-pathogenic": 4,
"pathogenic": 5,
"drug-response": 6,
"histocompatibility": 7,
"other": 255,
}
};
checkedFilters = d3.selectAll("input:checked").nodes();
for (i = 0; i < checkedFilters.length; i++) {
tmp = checkedFilters[i].id.split("_");
facet = tmp[1];
checkedFilter = tmp[2];
filterID = filterMap[facet][checkedFilter];
if (facet in selections == false) {
selections[facet] = {};
}
selections[facet][filterID] = 1;
}
counts = ideogram.filterAnnots(selections);
for (facet in counts) {
for (i = 0; i < counts[facet].length; i++) {
count = counts[facet][i];
key = count.key - 1;
value = "(" + count.value + ")";
// document.querySelectorAll("#" + facet + " .count")[key].innerHTML = value;
}
}
});
var config = {
container: '#container',
organism: 'human',
assembly: 'GRCh37',
chrHeight: 300,
// Annotations generated by ideogram/scripts/analyze_ancestrydna.py
annotationsPath: '/ideogram/data/analysis/ancestrydna.json',
annotationsLayout: 'histogram',
// histogramScaling: 'absolute',
barWidth: 3
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>