ideogram
Version:
Chromosome visualization for the web
201 lines (179 loc) • 5.1 kB
HTML
<html>
<head>
<title>Collinear, tabs and overflow | Ideogram</title>
<style>
body {
font: 14px 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-panel {
margin-left: 15px;
}
.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>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
</head>
<body>
<h1>Collinear, tabs and overflow | Ideogram</h1>
<a href="../">Overview</a> |
<a href="multiple-primates">Previous</a> |
<a href="mouse">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/.html" target="_blank">Source</a>
<p>
Click the 'Ideogram' tab above to see chromosomes. This demonstrates support for collinear ideogram layout
in containers that are initially hidden.
</p>
<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">
d3 = Ideogram.d3;
var 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 legend = [
{
name: 'Expression level',
rows: [
{color: '#88F', name: 'Low'},
{color: '#CCC', name: 'Medium'},
{color: '#F33', name: 'High'}
]
},
{
name: 'Gene type',
rows: [
{color: '#00F', name: 'mRNA'},
{color: '#0AF', name: 'misc_RNA'},
{color: '#AAA', name: 'miRNA'},
{color: '#FA0', name: 'tRNA'},
{color: '#F00', name: 'lncRNA'}
]
}
]
var annotationTracks = [
{id: 'expressionLevelTrack', displayName: 'Expression level'},
{id: 'geneTypeTrack', displayName: 'Gene type'},
];
ideogram = new Ideogram({
container: '#ideogram',
organism: 'human',
assembly: 'GRCh37',
orientation: 'horizontal',
geometry: 'collinear',
chrHeight: 90,
showFullyBanded: false,
// showChromosomeLabels: false,
rotatable: false,
annotationHeight: 40,
annotationsLayout: 'heatmap',
annotationsPath: '../../data/annotations/SRR562646.json',
heatmaps: heatmaps,
annotationTracks: annotationTracks,
legend: legend
});
</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>