ideogram
Version:
Chromosome visualization with D3.js
76 lines (64 loc) • 2.44 kB
HTML
<html>
<head>
<title>Annotations, track filters | Ideogram</title>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<style>
html, body { height: 100%; font: 12px Arial; line-height: 19.6px; }
ul { float: left; padding-left: 5px}
li { list-style: none; }
#ideogram-container { float: left;}
</style>
</head>
<body>
<h1>Annotations, track filters | Ideogram</h1>
<a href="../">Back to overview</a> |
<a href="homology-interspecies">Previous</a> |
<a href="annotations-overlaid">Next</a>
<p>
Select up to 3 of 9 tracks to display. See also <a href="annotations-tracks">Annotations, tracks</a>.
</p>
<ul id="tracks-to-display">
Tracks to display
<li><label for="filter_1"><input type="checkbox" id="filter_1" checked/>A</label></li>
<li><label for="filter_2"><input type="checkbox" id="filter_2"/>B</label></li>
<li><label for="filter_3"><input type="checkbox" id="filter_3"/>C</label></li>
<li><label for="filter_4"><input type="checkbox" id="filter_4"/>D</label></li>
<li><label for="filter_5"><input type="checkbox" id="filter_5" checked/>E</label></li>
<li><label for="filter_6"><input type="checkbox" id="filter_6"/>F</label></li>
<li><label for="filter_7"><input type="checkbox" id="filter_7"/>G</label></li>
<li><label for="filter_8"><input type="checkbox" id="filter_8"/>H</label></li>
<li><label for="filter_9"><input type="checkbox" id="filter_9" checked/>I</label></li>
</ul>
<div id="ideogram-container"></div>
<script type="text/javascript">
var config, ideogram, inputs;
config = {
organism: 'human',
container: '#ideogram-container',
chrHeight: 400,
annotationsPath: '../../data/annotations/9_tracks_virtual_snvs.json',
annotationsNumTracks: 3,
annotationsDisplayedTracks: [1, 5, 9]
};
ideogram = new Ideogram(config);
inputs = document.querySelectorAll('input');
inputs.forEach(function(input) {
input.addEventListener('click', function() {
updateTracks();
});
});
function updateTracks() {
// Get selected tracks
var selectedTracks = [];
inputs.forEach(function(input) {
var trackIndex = parseInt(input.getAttribute('id').split('_')[1]);
if (input.checked) {
selectedTracks.push(trackIndex);
}
});
ideogram.updateDisplayedTracks(selectedTracks);
}
</script>
</body>
</html>