KmeansCluster

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>

body { 
  margin:0;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0; 
}

.input{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #64d7f1;
    border-radius: 4px;
    box-sizing: border-box;
}

.input{
    width: 100%;
    background-color: #ffffff;
    color: black;
    padding: 14px 20px;
    margin: 10px 0;
    border: 2;
    border-radius: 4px;
}
.button {
    position: relative;
    background-color: #32b0ea;
    border: none;
    font-size: 14px;
    border-radius: 6px;
    color: #FFFFFF;
    padding: 10px;
    width: 120px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

</style>
</head>

<body>

<div id="kmeans">
  <div>
    <svg>
    </svg>
  </div>
  
<div><button class=button id="step">Iterate</button> 

<button class=button id="reset">Start Over</button></div>

</div>
  
<fieldset style="display: inline; margin: .8em 0 1em 0; border: 1px solid #ffffff; padding: .5em">
  
<div>
<label for="N">N (the number of node):</label>
<input class=input type="number" id="N" min="2" max="1000" value="500"></div>
  
<div>
<label for="K">K (the number of cluster):</label>
<input class=input type="number" id="K" min="2" max="50" value="5">
</div>
</fieldset>

d3.selectAll("#kmeans button")
  .style('padding', '.5em .8em');

d3.selectAll("#kmeans label")
  .style('display', 'inline-block')
  .style('width', '15em');

var groups = [], dots = [];

function step() {
  d3.select("#restart").attr("disabled", null);
  if (flag) {
    moveCenter();
    draw();
  } else {
    updateGroups();
    draw();
  }
  flag = !flag;
}

function init() {
  d3.select("#restart").attr("disabled", "disabled");

dots = [];
  flag = false;
  for (i = 0; i < N; i++) {
    var dot ={
      x: Math.random() * WIDTH,
      y: Math.random() * HEIGHT,
      group: undefined
    };
    dot.init = {
      x: dot.x,
      y: dot.y,
      group: dot.group
    };
    dots.push(dot);
  }
}

function restart() {
  flag = false;
  d3.select("#restart").attr("disabled", "disabled");

groups.forEach(function(g) {
    g.dots = [];
    g.center.x = g.init.center.x;
    g.center.y = g.init.center.y;
  });

for (var i = 0; i < dots.length; i++) {
    var dot = dots[i];
    dots[i] = {
      x: dot.init.x,
      y: dot.init.y,
      group: undefined,
      init: dot.init
    };
  }
}

if (dots[0].group) {
    var l = lineg.selectAll('line')
      .data(dots);
    var updateLine = function(lines) {
      lines
        .attr('x1', function(d) { return d.x; })
        .attr('y1', function(d) { return d.y; })
        .attr('x2', function(d) { return d.group.center.x; })
        .attr('y2', function(d) { return d.group.center.y; })
        .attr('stroke', function(d) { return d.group.color; });
    };
    updateLine(l.enter().append('line'));
    updateLine(l.transition().duration(500));
    l.exit().remove();
  } else {
    lineg.selectAll('line').remove();
  }

function moveCenter() {
  groups.forEach(function(group, i) {
    if (group.dots.length == 0) return;

// get center of gravity
    var x = 0, y = 0;
    group.dots.forEach(function(dot) {
      x += dot.x;
      y += dot.y;
    });

group.center = {
      x: x / group.dots.length,
      y: y / group.dots.length
    };
  });
  
}

// update group
    group.dots.push(dot);
    dot.group = group;
  });
}

init(); draw();

</script>
</body>

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