cyto-chromosome-vis
Version:
Interactive visual representation/ web visualization tool for chromosome ideograms
62 lines (54 loc) • 1.31 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="node_modules/d3/d3.min.js"></script>
<style>
#container {
border: 1px dotted #8d99a8;
/*width: 100%;*/
}
</style>
</head>
<body>
<div id="container">
<div id="test"></div>
</div>
<script>
cyto_chr = {};
</script>
<input type="button" onclick="btnClick()" value="TEST">
<input type="button" onclick="btnClick2()" value="RESET">
<script src="src/utils.js"></script>
<script src="src/model-loader.js"></script>
<script src="src/selector.js"></script>
<script src="src/chromosome.js"></script>
<script>
var bodysize = d3.select("body").node().getBoundingClientRect();
console.log(bodysize)
var s = cyto_chr.chromosome()
.config('segment', "1")
.config('target', '#test')
//.config('resolution', 550) //400, 550, or 850
.resolution(400)
//.config('width', 1000)
.config('height', 17)
.config('useRelative', false)
.config('showAxis', true)
.config('selectionMode', 'single')
.render();
s.on('selectorchange', function (d) {
console.log(d);
})
function btnClick() {
var t = s.getSelections()
console.log(t)
s.render([t[0].start, t[0].stop])
}
function btnClick2() {
s.render();
}
</script>
</body>
</html>