ideogram
Version:
Chromosome visualization with D3.js
151 lines (133 loc) • 4.12 kB
HTML
<html>
<head>
<title>Annotations, heatmap complex container | Ideogram</title>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<style>
body {
font: 12px Arial;
line-height: 19.6px;
}
ul {
width: 600px;
list-style: none;
border-bottom: 1px solid #CCC;
box-sizing: border-box;
margin-bottom: 0;
padding-left: 0;
}
.nav:before, .nav:after {
content: " ";
display: table;
clear: both;
}
li {
float: left;
margin-right: 2px;
display: block;
margin-bottom: -1px;
}
li > a {
padding: 10px 15px;
text-decoration: none;
border-radius: 4px 4px 0 0;
display: block;
position: relative;
}
li.active > a {
border: 1px solid #CCC;
border-bottom: none;
background-color: white;
}
.tab-content {
width: 600px;
}
.tab-content > div {
display: none;
padding-top: 20px;
clear: both;
}
.tab-content > div.active {
display: block;
border: 1px solid #CCC;
border-top: none;
}
.note {
font-style: italic;
padding-left: 10px;
clear: left;
}
</style>
</head>
<body>
<h1>Annotations, heatmap complex container | Ideogram</h1>
<a href="../">Back to overview</a> |
<a href="annotations-histogram">Previous</a> |
<a href="annotations-animated">Next</a>
<br/><br/>
<div class="tab-panel">
<ul class="nav">
<li class="active"><a href="#summary">Summary</a></li>
<li><a href="#ideogram">Ideogram</a></li>
</ul>
<div class="tab-content">
<div id="summary" class="active">
Click the 'Ideogram' tab above to see chromosomes. This demonstrates support for ideogram layout
in containers that are initially hidden.
</div>
<div id="ideogram">
<!-- Ideogram goes here. -->
<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>
</div>
</div>
</div>
<script type="text/javascript">
var annotationTracks = [
{id: 'expressionLevelTrack', displayName: 'Expression level'},
{id: 'geneTypeTrack', displayName: 'Gene type'}
];
var config = {
container: '#ideogram',
organism: 'human',
assembly: 'GRCh37',
chrHeight: 400,
annotationsPath: '../../data/annotations/SRR562646.json',
annotationTracks: annotationTracks,
annotationsLayout: 'heatmap',
heatmaps: [
{
key: 'expression-level',
thresholds: [['2', '#88F'], ['4', '#CCC'], ['+', '#F33']]
},
{
key: 'gene-type',
thresholds: [['0', '#00F'], ['1', '#0AF'], ['2', '#AAA'], ['3', '#FA0'], ['4', '#F00']]
}
]
};
var ideogram = new Ideogram(config);
</script>
<script>
var links = document.querySelectorAll('li > a');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
var targetLink = event.target,
targetId;
// Deactivate all tabs
links.forEach(function(link2) {
link2.parentElement.classList.remove('active');
});
document.querySelectorAll('.tab-content > div').forEach(function(div) {
div.classList.remove('active')
});
// Active selected tab
targetLink.parentElement.classList += 'active';
targetId = targetLink.href.split('#')[1];
document.getElementById(targetId).classList += 'active';
});
});
</script>
</body>
</html>