Create sketch.js

sketch.js

@@ -0,0 +1,64 @@
+let kmeansModel
+const width = 640;
+const height = 480;
+const colDict = {
+  0: 'skyblue',
+  1: 'coral',
+  2: 'olive',
+  3: 'tan',
+  4: 'grey'
+}
+
+const names = [{name: 'john'}, {name: 'mary'}, {name: 'anne'}, {name: 'paul'}, {name: 'george'}];
+const data = [{ x: 300, y: 4}, { x: 2000, y: 3}, { x: 450, y: 5}, { x: 1500, y: 2}, { x: 850, y: 4}];
+
+
+const options = {
+  k: 2,
+  maxIter: 10,
+  threshold: 2,
+};
+
+
+kmeansModel = ml5.kmeans(data, options, clustersCalculated);
+
+
+function clustersCalculated() {
+  console.log('Points Clustered!');
+  console.log(kmeansModel);
+
+  const dataset = kmeansModel.dataset;
+  
+  //d3.select('svg').remove();
+
+  const svg = d3.select('svg');
+
+  const xScale = d3.scaleLinear()
+    .domain(d3.extent(dataset, d => d[0]))
+    .range([10, width - 100]);
+
+  
+  const yScale = d3.scaleLinear()
+    .domain(d3.extent(dataset, d => d[1]))
+    .range([height - 50, 20]);
+  
+
+  const circle_data = svg.selectAll('circle')
+    .data(dataset)
+    .enter();
+    
+    
+  const circles = circle_data.append('circle')
+    .attr('cx', d => xScale(d[0]))
+    .attr('cy', d => yScale(d[1]))
+    .attr('r', 9)
+    .attr('fill', (d, i) => colDict[dataset[i].centroid]);
+    
+  
+  circle_data.append('text')
+    .attr('dy', d => yScale(d[1]))
+    .attr('dx', d => xScale(d[0]))
+    .data(names)
+    .text(d => d.name);
+  
+}