cyto-chromosome-vis
Version:
Interactive visual representation/ web visualization tool for chromosome ideograms
81 lines (69 loc) • 1.63 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Interactive Chromosome Representation | Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="cyto-chromosome.js"></script>
<!--<script src="src/chromosome.js"></script>-->
<!--<script src="src/model-loader.js"></script>-->
<!--<script src="src/selector.js"></script>-->
<!--<script src="src/utils.js"></script>-->
<style>
body {
width: 95%;
}
</style>
</head>
<body>
<div id="chrX"></div>
<div id="chrY"></div>
<div id="chr1"></div>
<div id="chr2"></div>
<div id="chr3"></div>
<div id="chr4"></div>
<div id="chr5"></div>
<div id="chr6"></div>
<div id="chr7"></div>
<div id="chr8"></div>
<div id="chr9"></div>
<div id="chr10"></div>
<div id="chr11"></div>
<div id="chr12"></div>
<div id="chr13"></div>
<div id="chr14"></div>
<div id="chr15"></div>
<div id="chr16"></div>
<div id="chr17"></div>
<div id="chr18"></div>
<div id="chr19"></div>
<div id="chr20"></div>
<div id="chr21"></div>
<div id="chr22"></div>
<script>
var chromosomeFactory = cyto_chr.chromosome;
var x = chromosomeFactory()
.segment("X")
.target('#chrX')
.resolution(550)
.showAxis(true)
.render();
var Y = chromosomeFactory()
.segment("Y")
.resolution(550)
.target('#chrY')
.showAxis(true)
.selectionMode('multi')
.render();
for (var i = 1; i < 23; i++) {
var t = "#chr" + i;
chromosomeFactory()
.segment(i)
.resolution(550)
.target('#chr' + i)
.showAxis(true)
.render();
}
</script>
</body>
</html>