linear relationship with slope

_.md

[ Launch: linear relationship with slope ] 6098369 by petesmaluck
[ Launch: linear relationship ] 5942087 by enjalot

config.json

{"description":"linear relationship with slope","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":true,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/Zqopweq.png"}

inlet.js

var svg = d3.select("svg");

var ymin = 0;
var ymax = 25;

var xmin = 0;
var xmax = 40;

var hx = xmax;
var hy = ymax;
var hsx, hsy;

var xval = 23;

var format = d3.format(".3s")

function y(x) {
  return x*(hy/hx)
}

var xscale = d3.scale.linear()
.range([137, 567])

var yscale = d3.scale.linear()
.range([400, 100])

var xAxis = d3.svg.axis()
.scale(xscale)
.orient("bottom")
var yAxis = d3.svg.axis()
.scale(yscale)
.orient("left")

tributary.init = function(g) {
  xscale.domain([xmin, xmax])
  yscale.domain([ymin, ymax])
  hsx = xscale(hx);
  hsy = yscale(hy);
  hxval = xscale(xval);
  
  g.append("g").classed("x-axis", true)
  g.append("g").classed("y-axis", true)
  
  var dragHandle = d3.behavior.drag()
  .on("drag", function(d,i) {
    hsx += d3.event.dx;
    hx = xscale.invert(hsx);
    hsy += d3.event.dy;
    hy = yscale.invert(hsy);
    tributary.run(g, 0)
  })
  g.append("circle").classed("handle", true)
  .call(dragHandle);
  
  g.append("circle").classed("point", true)
  
  var dragXHandle = d3.behavior.drag()
  .on("drag", function(d,i) {
    hxval += d3.event.dx;
    xval = xscale.invert(hxval);
    tributary.run(g, 0)
  })
  g.append("rect").classed("x-handle", true)
  .call(dragXHandle)
  
  
  g.append("line").classed("x-marker", true)
  g.append("text").classed("x-text", true)
  g.append("line").classed("y-marker", true)
  g.append("text").classed("y-text", true)
  g.append("line").classed("m-marker", true)
  g.append("text").classed("m-text", true)
  
  g.append("line").classed("relationship", true)
  
}

tributary.run = function(g,t) {
  xscale.domain([xmin, xmax])
  yscale.domain([ymin, ymax])
  hsx = xscale(hx);
  hsy = yscale(hy);
  
  g.select("g.x-axis").call(xAxis)
  .attr("transform", "translate(" + [0, yscale.range()[0]] + ")")
  g.select("g.y-axis").call(yAxis)
  .attr("transform", "translate(" + [xscale.range()[0], 0] + ")")  
  
  g.select("line.relationship")
  .attr({
    x1: xscale(0),
    y1: yscale(0),
    x2: xscale(hx),
    y2: yscale(hy)
  })
  
  g.select("line.x-marker")
  .attr({
    x1: xscale(xval),
    y1: yscale(0),
    x2: xscale(xval),
    y2: yscale(y(xval))
  })
  g.select("text.x-text")
  .attr("transform", "translate(" + [xscale(xval) + 5, yscale(ymin)-5] + ")")
  .text("x = " + format(xval))
  
  g.select("line.y-marker")
  .attr({
    x1: xscale(0),
    y1: yscale(y(xval)),
    x2: xscale(xval),
    y2: yscale(y(xval))
  })
  g.select("text.y-text")
  .attr("transform", "translate(" + [xscale(xmin) + 5, yscale(y(xval))-5] + ")")
  .text("y = " + format(y(xval)))
  
  g.select("line.m-marker")
  .attr({
    x1: xscale(0),
    y1: yscale(y(xval)),
    x2: xscale(xval),
    y2: yscale(y(xval))
  })
  g.select("text.m-text")
  .attr("transform", "translate(" + [400, yscale(20)] + ")")
  .text("m = " + format(y(xval)/(xval)))
  
  g.select("circle.handle")
  .attr({
    cx: xscale(hx),
    cy: yscale(hy),
    r: 8
  })
  
  g.select("circle.point")
  .attr({
    cx: xscale(xval),
    cy: yscale(y(xval)),
    r: 5
  })
  
  var xw = 8;
  g.select("rect.x-handle")
  .attr({
    x: xscale(xval) - xw/2,
    y: yscale(ymin),
    width: xw,
    height: 52
  })
}

style.css

.x-axis path, .y-axis path {
  fill: none;
  stroke: #000
}
.x-axis line, .y-axis line {
  fill: none;
  stroke: #000
}

.relationship {
  fill: none;
  stroke: #000;
}

.x-marker {
  fill: none;
  stroke: #000;
  stroke-dasharray: 2 2;
}
.y-marker {
  fill: none;
  stroke: #000;
  stroke-dasharray: 2 2;
}

.handle {
  fill: #D51212;
  fill-opacity: 0.1;
  stroke: #000;

}
.x-handle {
  fill: #D51212;
  fill-opacity: 0.1;
  stroke: #000;
}