ideogram
Version:
Chromosome visualization for the web
201 lines (171 loc) • 5.85 kB
HTML
<html>
<title>Annotations, animated | 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;
}
label {
font-weight: normal;
}
.facets input {
margin-right: 3px;
}
.facet-label {
font-weight: 700;
}
</style>
</head>
<body>
<h1>Annotations, animated | Ideogram</h1>
<a href="../">Overview</a> |
<a href="annotations-histogram">Previous</a> |
<a href="annotations-heatmap">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/annotations-animated.html" target="_blank">Source</a>
<p>
See genome-wide transitions in expression over time.
Below, changes in gene expression in mouse lung tissue over two years, in three influenza dosage cohorts.
</p>
<input id="animate-f0" class="animate-button" type="button" value="Animate F0" />
<input id="animate-f10" class="animate-button" type="button" value="Animate F10" />
<input id="animate-f150" class="animate-button" type="button" value="Animate F150" />
<div class="ideogram-container" style="margin-top: 10px; margin-left: 10px; height: 350px;"></div>
<div style="margin-top: 50px"></div>
<div class="facets"></div>
<script>
var d3 = Ideogram.d3;
// e.g. "very-low" -> "Very low"
function desluggify(value) {
return value[0].toUpperCase() + value.substr(1,).replace('-', ' ');
}
function updateFilters() {
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] + '_' + tmp[2] + '_' + tmp[3];
checkedFilter = tmp[tmp.length - 1];
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;
}
}
}
function animateFilters(nodes) {
setTimeout(function() {
var node = nodes.shift(); // remove first element from list, assign it here
d3.selectAll('input').attr('checked', null);
d3.select('#' + node.id).attr('checked', true);
updateFilters();
if (nodes.length > 0) {
return animateFilters(nodes);
}
}, 500);
}
annotsLoaded = false;
seenF10 = false;
seenF150 = false;
filterMap = {};
function onDrawAnnotsCallback() {
if (annotsLoaded === true) {
return;
}
d3.selectAll('.animate-button').on('click', function(d) {
var dosage = this.id.split('-')[1];
var nodes = d3.selectAll('.filter-' + dosage + '-low').nodes();
animateFilters(nodes);
});
var uls = '';
var keysToSkip = {
'name': 1, 'start': 1, 'length': 1,
'trackIndex': 1, 'trackIndexOriginal': 1
};
for (var i = 0; i < ideogram.rawAnnots.keys.length; i++) {
var key = ideogram.rawAnnots.keys[i];
if (key in keysToSkip) {
continue;
}
filterMap[key] = {
"high": 2,
"low": 1
};
var ul = '<ul id="' + key + '" style="float: left">';
var parts = key.split('_');
var month = parts[1];
var dosage = parts[2]; // Influenza dosage
// e.g. expression_04M_F10 -> 04M_F10
var facetLabel = month + '_' + dosage;
ul += '<span class="facet-label">' + facetLabel + '</span>';
var innerKeys = Object.keys(filterMap[key]);
for (var j = 0; j < innerKeys.length; j++) {
var innerKey = innerKeys[j];
var id = 'filter_' + key + '_' + innerKey;
var highOrLow = innerKey.split('_').slice(-1)[0];
var filterClass = 'filter-' + dosage.toLowerCase() + '-' + highOrLow;
ul +=
'<li>' +
'<label for="' + id + '">' +
'<input type="checkbox" id="' + id + '" class="filter-checkbox ' + filterClass + '">' +
desluggify(innerKey) +
'</input>' +
'</label>' +
'</li>';
}
ul += '</ul>';
if (parts[2] == 'F10' && seenF10 === false) {
ul = '<div style="clear: both;"></div>' + ul;
seenF10 = true;
}
if (parts[2] == 'F150' && seenF150 === false) {
ul = '<div style="clear: both;"></div>' + ul;
seenF150 = true;
}
uls += ul;
}
var geaLink = '<a href="https://github.com/NCBI-Hackathons/GeneExpressionAging">GeneExpressionAging</a>';
facetsContainer =
'<div style="font-style: italic;">' +
'Filter by gene expression (high: >= 2, low < 2; edgeR normalized count from ' + geaLink + '):' +
'</div>' +
uls;
d3.select('.facets').html(facetsContainer);
d3.selectAll('.filter-checkbox').on('click', function() {
updateFilters();
});
annotsLoaded = true;
}
var config = {
organism: 'mouse',
annotationsPath: '../../dist/data/annotations/mouse_aging.json',
annotationsLayout: 'histogram',
annotationsColor: 'orangered',
container: '.ideogram-container',
onDrawAnnots: onDrawAnnotsCallback,
filterable: true
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>