ideogram
Version:
Chromosome visualization for the web
52 lines (49 loc) • 1.55 kB
HTML
<html>
<head>
<title>Multiple, trio | Ideogram</title>
<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>
<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>Multiple, trio | Ideogram</h1>
<a href="../">Overview</a> |
<a href="ploidy-recombination">Previous</a> |
<a href="multiple-primates">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/multiple-trio.html" target="_blank">Source</a>
<p>
Three diploid human genomes: a female, a male, and another male.
See also <a href="multiple-trio-sv">Multiple, trio SV</a>.
</p>
<script type="text/javascript">
var config, genomes, id, i, container, sex;
config = {
organism: 'human',
ploidy: 2,
chrHeight: 125,
chrWidth: 8,
resolution: 400,
rotatable: false
};
genomes = [
['mother', 'female'],
['father', 'male'],
['proband', 'male']
];
for (i = 0; i < genomes.length; i++) {
id = genomes[i][0];
container = '<div id="' + id + '"></div>';
document.querySelector('body').innerHTML += container;
config.container = '#' + id;
config.sex = genomes[i][1];
window['ideogram_' + id] = new Ideogram(config);
}
</script>
</body>
</html>