bhvaleri/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<style>

  svg {
    background-color: steelblue;
  }

  .line {
    stroke: tomato;
    stroke-width: 2px;
  }

  .slider {
    float: right;
  }
</style>

<body>
  <div class='slider'>
    <div>Slope:<span id="slope"></span></div>
    <input type="range" min=0 max=20 step=.1 oninput="updateSlope(this.value)">
  </div>
  <div class='slider'>
    <div>Y-Int:<span id="yInt"></span></div>
    <input type="range" min=0 max=100 oninput="updateYInt(this.value)">
  </div>
</body>

<script>
  var width = 500,
      height = 500;

  var line = d3.svg.line();

  var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

  var path = svg.append('path')

  //y = mx + b

  var m = 1;
  var b = 0;

  updateSlope = function (newSlope) {
    m = newSlope;
    document.getElementById('slope').textContent = newSlope;
    draw();
  };

  updateYInt = function (newYInt) {
    b = newYInt;
    document.getElementById('yInt').textContent = newYInt;
    draw();
  };

  var firstX = 0;
  var secondX = 707;

  yForX = function (x) {
    return -1 * x * m - b + height;
  };

  // lol axis

  draw = function() {
    var point1 = [firstX, yForX(firstX)];
    var point2 = [secondX, yForX(secondX)];

    points = [point1, point2];

    path.datum(points)
      .transition()
      .ease('linear')
      .attr('d', line)
      .attr('class', 'line');
  }

  draw();
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<style>

	svg {
	background-color: steelblue;
	}

	.line {
	stroke: tomato;
	stroke-width: 2px;
	}

	.slider {
	float: right;
	}
	</style>

	<body>
	<div class='slider'>
	<div>Slope:<span id="slope"></span></div>
	<input type="range" min=0 max=20 step=.1 oninput="updateSlope(this.value)">
	</div>
	<div class='slider'>
	<div>Y-Int:<span id="yInt"></span></div>
	<input type="range" min=0 max=100 oninput="updateYInt(this.value)">
	</div>
	</body>

	<script>
	var width = 500,
	height = 500;

	var line = d3.svg.line();

	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);

	var path = svg.append('path')

	//y = mx + b

	var m = 1;
	var b = 0;

	updateSlope = function (newSlope) {
	m = newSlope;
	document.getElementById('slope').textContent = newSlope;
	draw();
	};

	updateYInt = function (newYInt) {
	b = newYInt;
	document.getElementById('yInt').textContent = newYInt;
	draw();
	};

	var firstX = 0;
	var secondX = 707;

	yForX = function (x) {
	return -1 * x * m - b + height;
	};

	// lol axis

	draw = function() {
	var point1 = [firstX, yForX(firstX)];
	var point2 = [secondX, yForX(secondX)];

	points = [point1, point2];

	path.datum(points)
	.transition()
	.ease('linear')
	.attr('d', line)
	.attr('class', 'line');
	}

	draw();
	</script>