ideogram
Version:
Chromosome visualization for the web
101 lines (93 loc) • 3.06 kB
HTML
<html>
<head>
<title>Multiple, primates | 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 #_ideogram.labeledLeft {
padding-left: 0px;
padding-top: 0;
}
.ideogram-name {
font-style: italic;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>Multiple, primates | Ideogram</h1>
<a href="../">Overview</a> |
<a href="multiple-trio">Previous</a> |
<a href="human">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/multiple-primates.html" target="_blank">Source</a>
<p>
Two genes are annotated on each genome below: APOB (red) and CTLA4 (blue).
Their locations give evidence of ancient chromosome fusions and shared
evolutionary origin.
</p>
<div id="content"></div>
<script type="text/javascript">
var config, orgConfigs, id, i, container, orgConfig, name;
config = {
chrHeight: 250,
chrMargin: 3,
annotationHeight: 4,
orientation: 'horizontal',
showFullyBanded: false
};
orgConfigs = [
{
organism: 'homo-sapiens',
annotations: [
{name: 'APOB', chr: '2', start: 21001429, stop: 21044073, color: '#F00'},
{name: 'CTLA4', chr: '2', start: 203867788, stop: 203873960, color: '#77F', shape: 'circle'}
]
},
{
organism: 'pan-troglodytes',
annotations: [
{name: 'APOB', chr: '2A', start: 21371172, stop: 21413720, color: '#F00'},
{name: 'CTLA4', chr: '2B', start: 94542849, stop: 94550230, color: '#77F', shape: 'circle'}
]
},
{
organism: 'macaca-fascicularis',
annotations: [
{name: 'APOB', chr: '13', start: 89924186, stop: 89966894, color: '#F00'},
{name: 'CTLA4', chr: '12', start: 93412707, stop: 93419132, color: '#77F', shape: 'circle'}
]
}
];
for (i = 0; i < orgConfigs.length; i++) {
orgConfig = orgConfigs[i];
id = orgConfig.organism;
// e.g. homo-sapiens -> Homo sapiens
name = id[0].toUpperCase() + id.slice(1).replace('-', ' ');
container =
'<div class="ideogram-container">' +
'<div class="ideogram-name">' + name + '</div>' +
'<div id="' + id + '"></div>' +
'</div>';
document.querySelector('#content').innerHTML += container;
config.organism = orgConfig.organism
config.container = '#' + id;
config.annotations = orgConfig.annotations;
window['ideogram_' + id.replace('-', '_')] = new Ideogram(config);
}
</script>
</body>
</html>