<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/jquery-ui.min.css">

<script src="lib/d3.v3.min.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>

<script src="js/AliTV.js"></script>

<script type="text/javascript">
	var wga;
	$(document).ready(function() {
		var svg = $('#wgaCanvas');
		wga = new AliTV(svg);
		$.getJSON('data/data.json', function(data) {
			wga.setData(data);
			$.getJSON('data/filters.json', function(filters) {
				wga.setFilters(filters);
				wga.drawLinear();
			});
		});
	});
</script>
</head>

<body>
<svg id='wgaCanvas'></svg>
<button type="button" onclick="wga.drawCircular();">Draw Circular</button> 
<button type="button" onclick="wga.drawLinear();">Draw Linear</button> 
</body>
</html>

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/jquery-ui.min.css">

<script src="lib/d3.v3.min.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>

<script src="js/AliTV.js"></script>

<script type="text/javascript">
	var wga;
	$(document).ready(function() {
		var svg = $('#wgaCanvas');
		wga = new AliTV(svg);
		$.getJSON('data/data.json', function(data) {
			wga.setData(data);
			$.getJSON('data/filters.json', function(filters) {
				wga.setFilters(filters);
				wga.drawLinear();
			});
		});
	});
</script>
</head>

<body>
<svg id='wgaCanvas'></svg>
<button type="button" onclick="wga.drawCircular();">Draw Circular</button> 
<button type="button" onclick="wga.drawLinear();">Draw Linear</button> 
</body>
 <form>
Spacer between chromsomes in the linear Layout:<br>
<input type="text" id="linearSpacer" onblur="wga.getLinearSpacer(); wga.setLinearSpacer();">
<br>
</form> 
</html>

Add input field to the HTML page
Add input field to the HTML page
