y=mx+b

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://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>

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>

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

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