K-Means in 2D

<style>

div {
      position: absolute;
    }

line {
      stroke-width: .4px;
    }

#stats-table {
      width: 460px;
      border: none;
      left: 0px;
    }

</style>
</head>
<body>

<div id="controls">
  <button onclick="step();">Step</button>
  <button onclick="changeK(1);">Increase K</button>
  <button onclick="changeK(-1);">Decrease K</button>

var ranges = [ [0,10], [0,10] ];
  var points = kmeans.generateRandomPoints(ranges, 1000);
  var means = [];

var assignments = kmeans.assignPointsToMeans(points, means);

var svg = d3.select('#graph').append('svg').attr('width',960).attr('height',500);

var graph = svg.append('g').attr('transform', 'translate(460,0)');
  var meanLayer = graph.append('g');

var xScale = d3.scale.linear().domain([0,10]).range([0,500]);
  var yScale = d3.scale.linear().domain([0,10]).range([0,500]);

var color = d3.scale.category10();

function redraw() {

var pointDots = graph.selectAll('.pointDots').data(points);
    pointDots.enter().append('circle').attr('class','pointDots')
      .attr('r', 2)
      .attr('cx',function(d){ return xScale(d[0]); })
      .attr('cy',function(d){ return yScale(d[1]); });

assignmentLines.transition().duration(500)
      .attr('x2',function(d, i){ return xScale(means[d][0]); })
      .attr('y2',function(d, i){ return yScale(means[d][1]); })
      .attr('stroke', function(d) { return color(d); });

}

changeK(5);
  redraw();

function step() {

oldAssignments = assignments;

kmeans.moveMeansToCenters(points, assignments, means);

assignments = kmeans.assignPointsToMeans(points, means);

var changeCount = kmeans.countChangedAssignments(assignments, oldAssignments);

var aveDistance = kmeans.findAverageDistancePointToMean(points, means, assignments);
    var aveMeanSeparation = kmeans.findAverageMeanSeparation(means);
    var sse = kmeans.sumSquaredError(points, means, assignments);

var row = d3.select('#stats-table').append('tr');
    row.append('td').html(changeCount);
    row.append('td').html(sse);

redraw();
  }

function changeK(amt) {
    if (amt > 0) {
      while (amt--) {
        var i = Math.floor(Math.random() * points.length);

var p = points[i];
        var newPoint = p.slice(0);
console.log("adding new point "+newPoint);
        means.push(newPoint);
      }
    }
    else while (amt < 0) {
      means.pop();
      amt++;
    }
    assignments = kmeans.assignPointsToMeans(points, means);
    redraw();
  }

</script>
</body>
</html>

Modified http://code.jquery.com/jquery-1.4.3.min.js to a secure url

Updated missing url https://rawgithub.com/yannickulrich/presenter/master/lib/jqMath/jqmath-etc-0.4.0.min.js to https://rawgithub.com/yannickulrich/presenter/master/lib/jqmath/jqmath-etc-0.4.0.min.js

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://code.jquery.com/jquery-1.4.3.min.js

https://rawgithub.com/yannickulrich/presenter/master/lib/jqMath/jqmath-etc-0.4.0.min.js

https://mbostock.github.com/d3/d3.js