ideogram
Version:
Chromosome visualization for the web
165 lines (145 loc) • 4.69 kB
HTML
<html>
<head>
<title>Annotations, tabs and overflow | 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>
.tab-panel ul {
width: 600px;
list-style: none;
border-bottom: 1px solid #CCC;
box-sizing: border-box;
margin-bottom: 0;
padding-left: 0;
}
.tab-panel .nav:before, .tab-panel .nav:after {
content: " ";
display: table;
clear: both;
}
.tab-panel li {
float: left;
margin-right: 2px;
display: block;
margin-bottom: -1px;
}
.tab-panel li > a {
padding: 10px 15px;
text-decoration: none;
border-radius: 4px 4px 0 0;
display: block;
position: relative;
}
.tab-panel li.active > a {
border: 1px solid #CCC;
border-bottom: none;
background-color: white;
}
.tab-panel {
margin-left: 15px;
}
.tab-panel .tab-content {
width: 600px;
}
.tab-panel .tab-content > div {
display: none;
padding-top: 20px;
clear: both;
}
.tab-panel .tab-content > div:first-child {
padding: 20px 10px 5px 10px;
}
.tab-panel .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>Layout, tabs and overflow | Ideogram</h1>
<a href="../">Overview</a> |
<a href="layout-small">Previous</a> |
<a href="brush">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/layout-tabs.html" target="_blank">Source</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,
chrMargin: 18,
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>