31:T668,{ const div = DOM.element('div'); const data = []; data.push({ x: irisSpeciesGrouped.get('Graduation').map(d => d[selectDropDown.x]), y: irisSpeciesGrouped.get('Graduation').map(d => d[selectDropDown.y]), mode: 'markers', marker: { size: 4, }, name: 'Graduation' }); data.push({ x: irisSpeciesGrouped.get("PhD").map(d => d[selectDropDown.x]), y: irisSpeciesGrouped.get("PhD").map(d => d[selectDropDown.y]), mode: 'markers', marker: { size: 4, }, name: 'PhD' }); data.push({ x: irisSpeciesGrouped.get("Master").map(d => d[selectDropDown.x]), y: irisSpeciesGrouped.get("Master").map(d => d[selectDropDown.y]), mode: 'markers', marker: { size: 4, }, name: 'Master' }); data.push({ x: irisSpeciesGrouped.get("Basic").map(d => d[selectDropDown.x]), y: irisSpeciesGrouped.get("Basic").map(d => d[selectDropDown.y]), mode: 'markers', marker: { size: 4, }, name: 'Basic' }); data.push({ x: irisSpeciesGrouped.get("2n Cycle").map(d => d[selectDropDown.x]), y: irisSpeciesGrouped.get("2n Cycle").map(d => d[selectDropDown.y]), mode: 'markers', marker: { size: 4, }, name: '2n Cycle' }); const layout = { title: `Scatter Plot of Attribute ${selectDropDown.x} vs ${selectDropDown.y} `, xaxis: { autorange: true, title: `${selectDropDown.x}` }, yaxis: { autorange: true, title: `${selectDropDown.y}` } }; Plotly.newPlot(div, data, layout); return div; }32:Tb00,{ const myDiv = html`

`; const XY = iris.map(d => [d.year_birth, d.income]); const k = 5; //const { clusters, clusterCenters } = computeKmeanCluster(nClusters, xyData); let clusterCenters = initializeClusterCenters( k, XY, clusterIntitializationMethod ); 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: 'year_birth', showgrid: false, zeroline: false }, yaxis: { title: 'income', 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: 'rgba(51, 51, 51, 0.2)', width: 1, } }; } 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":"Customer Personality Analysis","cells":[{"id":0,"value":"md`# Customer Personality Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"## Cluster Analysis","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"viewof selectDropDown = columns({\n x: select({\n options: irisDims,\n value: 'year_birth'\n }),\n y: select({\n options: irisDims,\n value: 'marital_status'\n }),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof clusterIntitializationMethod = radio({\n options: [\"Random\",\"Forgy\", \"Random Partition\", \"K-Mean++\"],\n value: \"Forgy\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof clusterOutlineShape = radio({\n options: [\"polygon\",\"ellipse\"],\n value: \"polygon\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@6\", \"d3-regression@1.3.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"Plotly = require(\"plotly.js-dist\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import { radio, select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Load the Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"iris = d3.csvParse(\n await (await soFetch(\n //\"https://raw.githubusercontent.com/plotly/datasets/master/iris-id.csv\"\n // \"https://gist.githubusercontent.com/dsibi/249e947f1acba2bd4cc53bb0d3a7a870/raw/cpa.csv\"\n \"https://gist.githubusercontent.com/dsibi/249e947f1acba2bd4cc53bb0d3a7a870/raw/cpa_raw.csv\"\n )).text(),\n d3.autoType\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"irisSpecies = [...new Set(iris.map(d => d.education))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"irisDims = iris.columns.slice(0,6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"irisSpeciesGrouped = d3.group(iris, d => d['education']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"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":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"squaredDistance = (p, q) =>\n d3.sum(p.map((_, i) => (p[i] - q[i]) * (p[i] - q[i])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"mutable feedback = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"nIterations = 5","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}