ideogram
Version:
Chromosome visualization for the web
102 lines (87 loc) • 2.36 kB
HTML
<html>
<head>
<title>Homology, advanced | 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>Homology, advanced | Ideogram</h1>
<a href="../">Overview</a> |
<a href="homology-basic">Previous</a> |
<a href="annotations-basic">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/homology-advanced.html" target="_blank">Source</a>
<p>
Large-scale insertions, deletions, and inversions are represented below.
Focus on a particular large variation by clicking or hovering over a colored region.
</p>
<script type="text/javascript">
function onIdeogramLoad() {
var chrs = ideogram.chromosomes,
chr1 = chrs['10090']['1'],
chr2 = chrs['10090']['2'],
r1Band = chr1['bands'][8],
r2Band = chr2['bands'][18],
range1, range2, range3, range4, range5, range6,
syntenicRegions = [];
range1 = {
chr: chr1,
start: r1Band.bp.start,
stop: r1Band.bp.stop
};
for (var i = 1; i < 20; i++) {
range2 = {
chr: chr2,
start: 6000000 * i,
stop: 6500000 * i
};
syntenicRegions.push({'r1': range1, 'r2': range2, 'color': '#F55'});
}
var range3 = {
chr: chr1,
start: 125000000,
stop: 126000000
};
range4 = {
chr: chr2,
start: 1500000 * i,
stop: 3600000 * i
};
syntenicRegions.push({'r1': range3, 'r2': range4, 'opacity': 0.7});
var range6 = {
chr: chr2,
start: r2Band.bp.start,
stop: r2Band.bp.stop
};
for (var i = 1; i < 6; i++) {
range5 = {
chr: chr1,
start: 120000000 + (12000000 * i),
stop: 120000000 + (8000000 * i)
};
color = '#AAF';
if (i == 5) {
color = '#DDD';
}
syntenicRegions.push({'r1': range5, 'r2': range6, 'color': color});
}
ideogram.drawSynteny(syntenicRegions);
}
var config = {
organism: 'mouse',
chromosomes: ['1', '2'],
chrMargin: 200,
showBandLabels: true,
perspective: 'comparative',
onLoad: onIdeogramLoad
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>