ideogram
Version:
Chromosome visualization with D3.js
50 lines (45 loc) • 1.39 kB
HTML
<html>
<head>
<title>Brush | Ideogram</title>
<link type="text/css" rel="stylesheet" href="../src/css/ideogram.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script type="text/javascript" src="../src/js/ideogram.js"></script>
</head>
<body>
<h1>Brush | Ideogram</h1>
<a href=".">Back to overview</a>
<br/><br/>
<div>
Selected region on human chromosome 19:
<div><span id="from"></span>-<span id="to"></span>
(extent: <span id="extent"></span> base pairs)
</div>
</div>
<div class="small-ideogram">
<!-- 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: ".small-ideogram",
organism: "human",
chromosome: "19",
brush: true,
chrHeight: 900,
orientation: "horizontal",
onBrushMove: writeSelectedRange,
onLoad: writeSelectedRange
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>