30:Ta6f,viewof selection = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); var show_colour=true; var show_centroids=true; var cluster_index=stepslider-5; var centroids_index=stepslider-5; var show_text=false; var text=""; if(stepslider==1) { cluster_index=0; centroids_index=0; show_colour=false; show_centroids=false; show_text=true; text="To start with, we have some unlabelled data"; } else if (stepslider==2) { cluster_index=0; centroids_index=0; show_colour=false; show_centroids=true; show_text=true; text="We choose some initial centroids by picking random datapoints"; } else if (stepslider==3) { cluster_index=0; centroids_index=0; show_colour=true; show_centroids=true; show_text=true; text="All the datapoints are allocated to their nearest centroid"; } else if (stepslider==4) { cluster_index=0; centroids_index=1; show_colour=true; show_centroids=true; show_text=true; text="We then move the centroids to the mean of its allocated datapoints"; } else if (stepslider==5) { cluster_index=0; centroids_index=1; show_colour=false; show_centroids=true; show_text=true; text="We then remove the old allocation to make a new one"; } else if (stepslider==6) { cluster_index=1; centroids_index=1; show_colour=true; show_centroids=true; show_text=true; text="The steps of allocating datapoints and moving the centroids are repeated until convergence"; } else if (stepslider==clusters.centroids.length+4) { show_text=true; text="The centroids no longer move and the algorithm has converged"; } const dot = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("g") .data(points) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("stroke", (d, i) => show_colour ? colours[clusters["clusters"][cluster_index][i]] : "gray" ) .attr("r", 3); if(show_centroids) { const cent = svg.append("g") .attr("stroke-width", 1.5) .selectAll("g") .data(clusters["centroids"][centroids_index]) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("fill", (d, i) => colours[i]) .attr("stroke", "black" ) .attr("r", 8); } if(show_text) { const explaination = svg.append("g") .append("text") .attr("x", width/2) .attr("y", height-16) .attr("text-anchor", "middle") .text(text); } return svg.node(); }31:T4d7,clusters = { var clusters_object={}; clusters_object['centroids']=[]; clusters_object['clusters']=[]; var initial_centroids=[]; for(var i=0; idist(p, l[i])) {\n best=i;\n best_dist=dist(p, l[i]);\n }\n }\n \n return best;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"centroid_means = function(l) {\n var sums=[];\n var counts=[];\n var num_centroids=0;\n for(var i=0; inum_centroids-1) {\n num_centroids=l[i]+1;\n }\n }\n \n for(var i=0; i g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(points.x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(points.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"randn_bm = function(random_generator) {\n var u = 0, v = 0;\n while(u === 0) u = random_generator.random(); //Converting [0,1) to (0,1)\n while(v === 0) v = random_generator.random();\n return Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"import {makeRandomGenerator} from \"@forresto/random-seed\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"colours = [\"#1f77b4\", \"#ff7f0e\", \"#2ca02c\", \"#d62728\", \"#9467bd\", \"#8c564b\", \"#e377c2\", \"#7f7f7f\", \"#bcbd22\", \"#17becf\"]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}