ideogram
Version:
Chromosome visualization with D3.js
200 lines (185 loc) • 5.49 kB
HTML
<html>
<head>
<title>Annotations, histogram | Ideogram</title>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<style>
body {
font: 12px 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>Annotations, histogram | Ideogram</h1>
<a href="../">Back to overview</a> |
<a href="annotations-file-url">Previous</a> |
<a href="annotations-heatmap">Next</a>
<br/><br/>
<div>
This ideogram shows the distribution of all human genes throughout the genome.
You can filter all 20,000+ genes in < 100 milliseconds by clicking the boxes below.
</div>
<div id="container"></div>
<ul id="expression-level">
Expression level
<li>
<label for="filter_expression-level_extremely-high">
<input type="checkbox" id="filter_expression-level_extremely-high">Extremely high</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_expression-level_very-high">
<input type="checkbox" id="filter_expression-level_very-high">Very high</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_expression-level_high">
<input type="checkbox" id="filter_expression-level_high">High</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_expression-level_moderately-high">
<input type="checkbox" id="filter_expression-level_moderately-high">Moderately high</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_expression-level_moderate">
<input type="checkbox" id="filter_expression-level_moderate">Moderate</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_expression-level_low">
<input type="checkbox" id="filter_expression-level_low">Low</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_expression-level_very-low">
<input type="checkbox" id="filter_expression-level_very-low">Very low</input>
<span class="count"></span>
</label>
</li>
</ul>
<ul id="gene-type">
Gene type
<li>
<label for="filter_gene-type_mrna">
<input type="checkbox" id="filter_gene-type_mrna">mRNA</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_gene-type_misc-rna">
<input type="checkbox" id="filter_gene-type_misc-rna">misc_RNA</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_gene-type_mirna">
<input type="checkbox" id="filter_gene-type_mirna">miRNA</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_gene-type_trna">
<input type="checkbox" id="filter_gene-type_trna">tRNA</input>
<span class="count"></span>
</label>
</li>
<li>
<label for="filter_gene-type_lncrna">
<input type="checkbox" id="filter_gene-type_lncrna">lncRNA</input>
<span class="count"></span>
</label>
</li>
</ul>
<div class="note">
Expression data from NCBI SRA and GEO (<a href="https://trace.ncbi.nlm.nih.gov/Traces/sra/?run=SRR562645">SRR562645</a>, <a href="https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSE40705">GSE40705</a>)
via <a href="https://github.com/NCBI-Hackathons/rnaseqview#rnaseqview">rnaseqview</a> pipeline.
</div>
<script type="text/javascript">
var d3 = Ideogram.d3;
var filterMap = {
'expression-level': {
'extremely-high': 7,
'very-high': 6,
'high': 5,
'moderately-high': 4,
'moderate': 3,
'low': 2,
'very-low': 1
},
'gene-type': {
'mrna': 1,
'misc-rna': 2,
'mirna': 3,
'trna': 4,
'lncrna': 5
},
'tissue-type': {
'cerebral-cortex': 1,
'heart': 2,
'liver': 3,
'skin': 4,
'skeletal-muscle': 5
}
};
d3.selectAll('input').on('click', function() {
var tmp, checkedFilter, checkedFilters, i, facet, counts, count,
filterID, key,
selections = {};
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',
orientation: 'vertical',
organism: 'human',
assembly: 'GRCh37',
chrHeight: 275,
annotationsPath: '../../data/annotations/SRR562646.json',
annotationsLayout: 'histogram',
barWidth: 3,
filterable: true
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>