31:T87e,{ const myDiv = html`

`; const xyData = oldFaithful.map(d => [d.waiting, d.eruptions]); const nClusters = 2; //const xyData = iris.map(d => [d.sepal_length, d.sepal_width]); //const nClusters = 3; const { clusters, clusterCenters } = computeKmeanCluster(nClusters, xyData); const colors = ["steelblue", "chocolate"]; // differnt color for each cluster const data = clusters.map((cluster, i) => { // generate Trace data for the clusters return { x: cluster.map(d => d[0]), y: cluster.map(d => d[1]), mode: 'markers', marker: { size: 4, color: colors[i] } }; }); const layout = { showlegend: false, autosize: false, width: 800, height: 550, margin: { t: 50 }, hovermode: 'closest', xaxis: { title: 'Waiting Time (minutes)', range: [30, 100], showgrid: false, zeroline: false }, yaxis: { title: 'Eruption Duration (minutes)', range: [1, 6], showgrid: false, zeroline: false } }; layout.shapes = clusters.map((cluster, i) => { const convexHull = d3.polygonHull(cluster); if (clusterOutlineShape == "polygon") { const path = d3.line().curve(d3.curveCatmullRomClosed)(convexHull); return { type: 'path', path: path, fillcolor: 'rgba(128, 128, 128, 0.4)', line: { color: "black" } }; } else { const deltaX = 0.6 * d3.max(convexHull.map(p => Math.abs(p[0] - clusterCenters[i][0]))); const deltaY = 0.6 * d3.max(convexHull.map(p => Math.abs(p[1] - clusterCenters[i][1]))); return { type: 'circle', xref: 'x', yref: 'y', x0: clusterCenters[i][0] - deltaX, y0: clusterCenters[i][1] - deltaY, x1: clusterCenters[i][0] + deltaX, y1: clusterCenters[i][1] + deltaY, //opacity: 0.2, fillcolor: 'rgba(128, 128, 128, 0.4)', line: { color: 'black' } }; } }); Plotly.newPlot(myDiv, data, layout, { staticPlot: true }); return myDiv; }32:Tb33,{ const myDiv = html`

`; const XY = oldFaithful.map(d => [d.waiting, d.eruptions]); const k = 2; //const { clusters, clusterCenters } = computeKmeanCluster(nClusters, xyData); let clusterCenters = initializeClusterCenters( k, XY, clusterIntitializationMethod1 ); let clusters; const colors = ["steelblue", "chocolate"]; // differnt color for each cluster for (let i = 0; i < nIterations; i++) { // Associate data points to cluster clusters = clusterCenters.map(_ => []); XY.forEach(d => { const distanceToClusterCenters = clusterCenters.map(c => squaredDistance(c, d) ); // Choose the closest center clusters[d3.minIndex(distanceToClusterCenters)].push(d); }); // Compute New Cluster center for (let j = 0; j < k; j++) clusterCenters[j] = updateClusterCenter(clusterCenters[j], clusters[j]); const data = clusters.map((cluster, i) => { // generate Trace data for the clusters return { x: cluster.map(d => d[0]), y: cluster.map(d => d[1]), mode: 'markers', marker: { size: 4, color: colors[i] } }; }); const layout = { showlegend: false, autosize: false, width: 800, height: 550, margin: { t: 50 }, hovermode: 'closest', xaxis: { title: 'Waiting Time (minutes)', range: [30, 100], showgrid: false, zeroline: false }, yaxis: { title: 'Eruption Duration (minutes)', range: [1, 6], showgrid: false, zeroline: false } }; layout.shapes = clusters.map((cluster, i) => { const convexHull = d3.polygonHull(cluster); if (clusterOutlineShape1 == "polygon") { const path = d3.line().curve(d3.curveCatmullRomClosed)(convexHull); return { type: 'path', path: path, fillcolor: 'rgba(128, 128, 128, 0.4)', line: { color: "black" } }; } else { const deltaX = 0.6 * d3.max(convexHull.map(p => Math.abs(p[0] - clusterCenters[i][0]))); const deltaY = 0.6 * d3.max(convexHull.map(p => Math.abs(p[1] - clusterCenters[i][1]))); return { type: 'circle', xref: 'x', yref: 'y', x0: clusterCenters[i][0] - deltaX, y0: clusterCenters[i][1] - deltaY, x1: clusterCenters[i][0] + deltaX, y1: clusterCenters[i][1] + deltaY, //opacity: 0.2, fillcolor: 'rgba(128, 128, 128, 0.4)', line: { color: 'black' } }; } }); Plotly.newPlot(myDiv, data, layout, { staticPlot: true }); await Promises.delay(1000); yield myDiv; } }33:Tb53,initializeClusterCenters = (k, XY, method) => { const N = XY.length; if (k == 0 || k > N) return null; const clusterCenters = XY.slice(0, k).slice(); switch (method) { case "Random": const dim = XY[0].length; for (let j = 0; j < k; j++) { for (let i = 0; i < dim; i++) clusterCenters[j][i] = d3.randomUniform( ...d3.extent(XY, d => d[i]) )(); } break; case "Forgy": // Choose k distinct items from XY array using Reservoir Sampler. // See algorithm: https://www.geeksforgeeks.org/reservoir-sampling1) // Step I: copy first k items of data to clusterCenters. for (let i = k; i < N; i++) { // a) Generate a random number from 0 to i where i is index of current item in data. // Let the generated random number is j. const j = d3.randomInt(i + 1)(); // b) If j is in range 0 to k-1, replace reservoir[j] with arr[i] if (j < k) clusterCenters[j] = XY[i].slice(); } break; case "Random Partition": // Randomly assign a partition to each element of XY. const clusterIndices = XY.map(_ => d3.randomInt(k)()); const lengths = [0, 0]; for (let j = 0; j < k; j++) { const cluster = clusterIndices .filter(index => index == j) .map(index => XY[index]); if (cluster.length > 0) clusterCenters[j] = updateClusterCenter(clusterCenters[j], cluster); } break; case "K-Mean++": //Randomly select the first cluster Center from the data points. clusterCenters[0] = XY[d3.randomInt(k)()].slice(); for (let j = 1; j < k; j++) { //For each data point compute its distance from the nearest, previously chosen centroid. const nearestDistances = XY.map(xy => d3.min( d3 .range(j) .map(index => Math.sqrt(squaredDistance(xy, clusterCenters[index])) ) ) ); const sumNearestDistances = d3.sum(nearestDistances); const probabilities = nearestDistances.map( d => d / sumNearestDistances ); const cumProbabilities = probabilities.slice(); for (let i = 1; i < N; i++) cumProbabilities[i] += cumProbabilities[i - 1]; // Select the next centers from the data points such that the probability of choosing a point as centroid is // directly proportional to its distance from the nearest, previously chosen centroid. // the point having maximum distance from the nearest centroid is most likely to be selected next as a centroid const x = Math.random(); const sampleIndex = d3.bisect(cumProbabilities, x); mutable feedback = sampleIndex; clusterCenters[j] = XY[sampleIndex].slice(); } break; } return clusterCenters; }34:[] 2f:{"title":"Visual Cluster Analysis","cells":[{"id":0,"value":"md`# Visual Cluster Analysis\nUses [K-mean algorithm](https://en.wikipedia.org/wiki/K-means_clustering) and for a user defined *k*. \nThe convex hull/ellipse of the clusters is shown.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`### Scatter Plot: Old FaithFul Data`","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n const myDiv = html`

`;\n const xData = oldFaithful.map(d => d.waiting);\n const yData = oldFaithful.map(d => d.eruptions);\n\n const trace1 = {\n x: xData,\n y: yData,\n mode: 'markers',\n marker: {\n size: 4\n }\n };\n const layout = {\n showlegend: false,\n autosize: false,\n width: 800,\n height: 550,\n margin: { t: 50 },\n hovermode: 'closest',\n xaxis: {\n title: 'Waiting Time (minutes)',\n showgrid: false,\n zeroline: false\n },\n yaxis: {\n title: 'Eruption Duration (minutes)',\n showgrid: false,\n zeroline: false\n }\n };\n const data = [trace1];\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"nIterations = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"feedback","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`### Visual Cluster Analysis: Old FaithFul Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof clusterIntitializationMethod = radio({\n options: [\"Random\",\"Forgy\", \"Random Partition\", \"K-Mean++\"],\n value: \"Forgy\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"viewof clusterOutlineShape = radio({\n options: [\"polygon\",\"ellipse\"],\n value: \"polygon\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"mutable feedback = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"computeKmeanCluster = (k, XY) => {\n let clusterCenters = initializeClusterCenters(\n k,\n XY,\n clusterIntitializationMethod\n );\n let clusters;\n for (let i = 0; i < nIterations; i++) {\n // Associate data points to cluster\n clusters = clusterCenters.map(_ => []);\n XY.forEach(d => {\n const distanceToClusterCenters = clusterCenters.map(c =>\n squaredDistance(c, d)\n );\n // Choose the closest center\n clusters[d3.minIndex(distanceToClusterCenters)].push(d);\n });\n // Compute New Cluster center\n for (let j = 0; j < k; j++)\n clusterCenters[j] = updateClusterCenter(clusterCenters[j], clusters[j]);\n }\n return {clusterCenters,clusters};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"viewof clusterIntitializationMethod1 = radio({\n options: [\"Random\",\"Forgy\", \"Random Partition\", \"K-Mean++\"],\n value: \"Forgy\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof clusterOutlineShape1 = radio({\n options: [\"polygon\", \"ellipse\"],\n value: \"polygon\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"squaredDistance = (p, q) =>\n d3.sum(p.map((_, i) => (p[i] - q[i]) * (p[i] - q[i])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"updateClusterCenter = (center, cluster) => {\n for (let i = 0; i < center.length; i++)\n center[i] = d3.mean(cluster, d => d[i]);\n return center;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"feedback","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"d3.randomUniform(...[1, 5])()","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"d3.range(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"d3.randomInt(4 + 1)()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Data`","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"oldFaithful = d3.tsv(\n \"https://gist.githubusercontent.com/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9/raw/dcb23e8f6eefdbc4ada97d6eda22b2a4f256c263/faithful.tsv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"iris = d3.csv(\n \"https://raw.githubusercontent.com/plotly/datasets/master/iris-id.csv\", //\"https://datahub.io/machine-learning/iris/r/iris.csv\"\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## External Libraries and Imports`","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"import { radio, select, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"Plotly = require(\"plotly.js-dist\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3= require (\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}