// source http://jsbin.com/takixe/1

index.html

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://wzrd.in/bundle/biojs-vis-chromosome@latest"></script>


<link rel="stylesheet" href="https://raw.githubusercontent.com/4ndr01d3/js-components/master/util-area_selector/css/area_selector.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/4ndr01d3/js-components/master/biojs-vis-chromosome/css/chromosome.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">


<div id='yourDiv'></div>

jsbin.takixe.js

var visChromosome = require("biojs-vis-chromosome");
var selector = "#yourDiv";
var chromosomes = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","X","Y"];

jQuery( document ).ready(function( $ ) {
		inst=[];
		for (var i in chromosomes){
			var chr=chromosomes[i];
			$(selector).append("<h3>Chromosome "+chr+"</h3><div id='holder_"+chr+"' style=''></div><br/>");
			//var instance1 = 

			var chromosome = new visChromosome();
			inst[i]= chromosome.init({
			     target: "holder_"+chr,
			     dasSource: "http://www.ensembl.org/das/Homo_sapiens.GRCh38.karyotype",
			     dasSegment: chr
			});
 			inst[i].on("onModelLoaded",modelEvent);
		}
});

function modelEvent(objEvent) {				$("#holder_"+objEvent.model.id).data("size",1*objEvent.model.stop);
				adjustSizes(1*objEvent.model.stop);
}

var maxSize=0;
var adjustSizes= function(size){
	if (maxSize<size)
		maxSize=size;
	for (var i in chromosomes){
		var chr=chromosomes[i];
		if($("#holder_"+chr).data("size")!== undefined){
		  var chrSize=$("#holder_"+chr).data("size");
		  $("#holder_"+chr).width((chrSize/maxSize)*100 +"%");
	    }
	}
};