ideogram
Version:
Chromosome visualization for the web
59 lines (54 loc) • 1.78 kB
HTML
<html>
<head>
<title>Brush | 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>Brush | Ideogram</h1>
<a href="../">Overview</a> |
<a href="layout-tabs">Previous</a> |
<a href="cursor">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/brush.html" target="_blank">Source</a>
<br/><br/>
<div>
Selected region on human chromosome 1:
<div><span id="from"></span>-<span id="to"></span>
(extent: <span id="extent"></span> base pairs)
</div>
</div>
<div class="ideogram-container">
<!-- The ideogram goes here. -->
</div>
<script type="text/javascript">
function writeSelectedRange() {
var r = ideogram.selectedRegion,
from = r.from.toLocaleString(), // Adds thousands-separator
to = r.to.toLocaleString(),
extent = r.extent.toLocaleString();
document.getElementById('from').innerHTML = from;
document.getElementById('to').innerHTML = to;
document.getElementById('extent').innerHTML = extent;
}
var config = {
container: '.ideogram-container',
organism: 'human',
chromosome: '1',
brush: 'chr1:104325484-119977655', // https://www.ncbi.nlm.nih.gov/dbvar/variants/nsv916356
chrHeight: 900,
resolution: 550,
orientation: 'horizontal',
onBrushMove: writeSelectedRange,
onLoad: writeSelectedRange
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>