Smith5mr/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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="http://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(50).tickSize(10));
	}

	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>
	<!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="http://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(50).tickSize(10));
	}

	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>