ideogram
Version:
Chromosome visualization for the web
205 lines (190 loc) • 5.91 kB
HTML
<html>
<head>
<title>Annotations, histogram | Ideogram</title>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
<style>
body {font: 14px Arial; line-height: 19.6px; padding: 0 15px;}
a, a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a, a:hover, a:visited, a:active {color: #0366d6;}
</style>
<style>
ul {
list-style: none;
padding-left: 10px;
float: left;
}
li {padding: 2px 0;}
input {margin-right: 5px;}
#gene-type {padding-left: 30px;}
.note {
font-style: italic;
padding-left: 10px;
clear: left;
}
</style>
</head>
<body>
<h1>Annotations, histogram | Ideogram</h1>
<a href="../">Overview</a> |
<a href="annotations-file-url">Previous</a> |
<a href="annotations-animated">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/annotations-histogram.html" target="_blank">Source</a>
<br/><br/>
<div>
Distribution of all human genes throughout the genome.
Filter all 20,000+ genes in < 100 milliseconds below.
For a richer example, see <a href="differential-expression">Differential expression</a>.
</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>