xxxxxxxxxx
<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>
<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>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js