ideogram
Version:
Chromosome visualization for the web
81 lines (73 loc) • 2.35 kB
HTML
<html>
<head>
<title>Multiple, trio SV | 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>
#content {
margin-top: 30px;
}
.ideogram-container {
float: left;
margin-left: 15px;
}
#content .labeledLeft {
padding-left: 0px;
padding-top: 0;
}
.ideogram-name {
font-style: italic;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>Multiple, trio SV | Ideogram</h1>
<a href="../">Overview</a> |
<a href="multiple-trio">Previous</a> |
<a href="multiple-primates">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/multiple-trio-sv.html" target="_blank">Source</a>
<p>
Structural variations (SVs) annotated in three human samples.
</p>
<div id="content"></div>
<script type="text/javascript">
var config, sampleConfigs, id, i, container, sampleConfig, label;
config = {
organism: 'human',
chrHeight: 250,
chrMargin: 2,
orientation: 'horizontal',
annotationsLayout: 'overlay',
showFullyBanded: false,
showAnnotTooltip: false
};
sampleConfigs = [
{label: 'Sample 1', annotationsPath: '../../data/annotations/10_virtual_cnvs.json'},
{label: 'Sample 2', annotationsPath: '../../data/annotations/10_virtual_cnvs.json'},
{label: 'Sample 3', annotationsPath: '../../data/annotations/10_virtual_cnvs.json'}
];
for (i = 0; i < sampleConfigs.length; i++) {
sampleConfig = sampleConfigs[i];
label = sampleConfig.label;
id = label.toLowerCase().replace(' ', '');
container =
'<div class="ideogram-container">' +
'<div class="ideogram-name">' + label + '</div>' +
'<div id="' + id + '"></div>' +
'</div>';
document.querySelector('#content').innerHTML += container;
config.container = '#' + id;
config.annotationsPath = sampleConfig.annotationsPath;
new Ideogram(config);
}
</script>
</body>
</html>