Genome Scale

forked from mansfimx's block: Genome Scale

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	body {
		font: 10px sans-serif;
		shape-rendering: crispEdges;
	}
  
	.grid-background {
		fill: #ddd;
	}

.grid line {
		stroke: #fff;
	}

.grid .minor line {
		stroke-opacity: .5;
		stroke: red;
	}

.grid .minor-minor line {
		stroke-opacity: .5;
		stroke: blue;
	}

.grid text {
		display: none;
	}

.axis line {
		stroke: #fff;
	}

.axis text {
		fill: #000;
	}

.axis path,
	.grid path {
		display: none;
	}
</style>
<body>
	<input type="range" min="20" max="1000" value="80" onchange="sliderChange()"/>
	<label></label>
</body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
	function sliderChange() {
		var v = d3.select('input')[0][0].value;

d3.select('label').text(v);

x.domain([1, v]);
		redraw();
	}

function redraw() {
		fakeAxisGroup
				.attr("class", "grid")
				.attr("transform", "translate(0," + height + ")")
				.call(d3.svg.axis().orient('bottom').scale(x).ticks(12))
				.selectAll(".tick")
				.select('line')
				.attr('y1', function (d, i) {
					if ((i + 1) % 4)
						return -25;
					else
						return 0;
				})
				.attr('y2', function (d, i) {
					if ((i + 1) % 2)
						return -18;
					if ((i + 1) % 4)
						return 10;
					else
						return 0;
				});

realAxisGroup
				.attr("class", "axis")
				.attr("transform", "translate(0,0)")
				.call(d3.svg.axis().orient('bottom').scale(x).ticks(4).tickSize(18));
	}

var margin = {top: 0, right: 10, bottom: 25, left: 10},
			width = 960 - margin.right - margin.left,
			height = 50 - margin.top - margin.bottom;

var x = d3.scale.linear()
			.domain([1, d3.select('input')[0][0].value])
			.range([0, width]);

var y = d3.scale.linear()
			.range([0, height]);

var svg = d3.select("body").append("svg")
			.attr("width", width + margin.right + margin.left)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
			.attr("class", "grid-background")
			.attr('y', 0)
			.attr("width", width)
			.attr("height", height + 20);

var fakeAxisGroup = svg.append("g");
	var realAxisGroup = svg.append("g");
	sliderChange();
</script>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js