ideogram
Version:
Chromosome visualization with D3.js
194 lines (180 loc) • 5.41 kB
HTML
<html>
<head>
<title>Annotations, histogram | Ideogram</title>
<link type="text/css" rel="stylesheet" href="../src/css/ideogram.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script type="text/javascript" src="../src/js/ideogram.js"></script>
<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/ideogram.filter.js"></script>
<style>
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>
<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">
Histogram shows all human genes.
Expression data from NCBI SRA (SRR562645)
via <a href="https://github.com/NCBI-Hackathons/rnaseqview">rnaseqview</a> pipeline.</div>
<script type="text/javascript">
var counts, key, count;
d3.selectAll("input").on("click", function() {
var filterMap,
tmp, facet,
checkedFilter,
checkedFilters,
selections = {},
i, facet, counts, count,
filterID;
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
}
};
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,
annotationsPath: "/ideogram/data/annotations/SRR562646.json",
annotationsLayout: "histogram",
barWidth: 3
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>