var margin = {top: 20, right: 100, bottom: 30, left: 100},

    width = 960 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom;

​

var xScale = d3.scale.linear()

    .domain([0, 20])

    .range([0, width]);

​

var yScale = d3.scale.linear()

    .domain([0, 20])

    .range([height, 0]);

​

// math polyfills

Math.approx = function(d){ return Math.round(d*100)/100; };

Math.midpoint = function(a, b) {

  return {x: ((a.x + b.x) / 2), y: ((a.y + b.y) / 2)};

};

​

Math.gradient = function(a, b) {  

  var changeInY = b.y - a.y;

  var changeInX = b.x - a.x;

​

  return {changeInY: changeInY, changeInX: changeInX};

};

​

Math.perpendicularGradient = function (a, b) {

  var gradient = Math.gradient(a, b);

  var inverse = function(num) {

    return -Math.abs(num);

  };

  var changeInY = inverse(gradient.changeInX),

      changeInX = inverse(gradient.changeInY),

      ret = {changeInY: changeInY, changeInX: changeInX};

​

  return ret;

};

​

convertPoint = function(point) {

  return {x: xScale.invert(point.x), y: yScale.invert(point.y)};

};

​

var xAxis = d3.svg.axis()

    .scale(xScale)

    .orient("bottom");

​

var yAxis = d3.svg.axis()

    .scale(yScale)

    .orient("left");

​

var svg = d3.select("body").append("svg")

    .attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

    .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

​

var triangleFunctions = ['Perpendicular Bisector', 'Median', 'Altitude'],

    selected = 0;

​

var form = svg.append("foreignObject").attr("width", "400")

    .attr("height", "50").append("xhtml:body").append('form');

​

var labelEnter = form.selectAll('span')

                     .data(triangleFunctions)

                     .enter().append('span');

​

labelEnter.append('input').attr({

  type: 'radio',

  class: 'shape',

  name: 'mode',

  value: function(d, i) {return i;}

});

​

labelEnter.append("label").text(function(d) {return d;});

​

svg.append('g')

    .attr('class', 'x axis')

    .attr("transform", "translate(0," + height + ")")

    .call(xAxis);

​

svg.append('g')

    .attr('class', 'y axis')

    .call(yAxis);

​

var a = {x: xScale(1), y: yScale(0)},

    b = {x: xScale(6), y: yScale(18)},

    c = {x: xScale(14), y: yScale(6)};

​

svg.append('path')

    .attr('d', function(d) { 

      return 'M ' + a.x +' '+ a.y + 

             ' L' + b.x + ' ' + b.y + 

             ' L' + c.x + ' ' + c.y + 

             ' z';

    })

    .style('stroke', 'blue');

​

svg.append('circle')

   .attr('cx', b.x)

   .attr('cy', b.y)

   .attr('r', 10)

   .style('fill', 'red');

​

function perpendicularBisector(pointA, pointB) {

  var midPoint = Math.midpoint(pointA, pointB),

      gradient = Math.perpendicularGradient(pointA, pointB),

      x2 = midPoint.x + gradient.changeInX,

      y2 = midPoint.y + gradient.changeInY;

  svg.append('line')

     .style('stroke', 'red')

     .attr('class', 'line')

     .attr('x1', xScale(midPoint.x))

     .attr('y1', yScale(midPoint.y))

     .attr('x2', xScale(x2))

     .attr('y2', yScale(y2));

}

​

perpendicularBisector(convertPoint(b), convertPoint(c));

​

​

//perpendicularBisector(b, a, c);

//perpendicularBisector(c, a, b);

/*

var trianglePoints = startX + ' ' + startY + ', ' + xScale(1) + ' ' + yScale(0) + ', ' + xScale(12) + ' ' + yScale(3) + ' ' + xScale(12) + ', ' + yScale(3) + ' ' + startX + ' ' + startY;

​

console.log(trianglePoints);

​

svg.append('polyline')

    .attr('points', trianglePoints)

    .style('stroke', 'blue');

​

​

*/

​

​