29:null 2a:["$","title",null,{"children":"Customer Segmentation | ARussell-23 | Observable"}] 2f:T579,# Customer Segmentation ## With K-Means Prototyping for cluster analysis K-Means clustering groups respondents into segments based on similarity across selected variables. Each respondent is assigned to the cluster whose center (centroid) is closest to their values. The algorithm works iteratively: 1. Randomly place k centroids 2. Assign each respondent to the nearest centroid 3. Recalculate centroids as the mean of all assigned respondents 4. Repeat until assignments stop changing **Choosing k:** There is no single correct number of clusters. Start with your hypothesis about how many segments exist, then try different values of k and look for natural groupings in the scatter plot. **Important:** K-Means uses only the two variables selected for plotting. For more robust segmentation across many variables, consider running K-Means in R or Python first and importing cluster assignments. n=100 respondents is a practical minimum for stable clusters. ## How to use this notebook 1. Create your CSV with a respondent_id column and any number of numeric variable columns 2. Click the Upload CSV button below and select your file 3. Use the controls to select which variables to plot and how many clusters to find Please choose colors that are visually accessible, test your colors against each other for differentiation with the following tool: https://projects.susielu.com/viz-palette30:Tcdb,// Creates a reusable k-means clustering function // Takes an array of data points and a number of clusters k // Returns cluster assignments and centroids kmeans = { // the main kmeans function // points is an array of objects with x and y properties // k is the number of clusters // maxIterations is the maximum number of times to update centroids function run(points, k, maxIterations) { // ---- STEP 1: INITIALIZE CENTROIDS ---- // randomly select k points from the dataset as starting centroids // slice() copies the array so we don't modify the original // sort(() => Math.random() - 0.5) shuffles randomly // slice(0, k) takes the first k items const shuffled = points.slice().sort(() => Math.random() - 0.5); let centroids = shuffled.slice(0, k).map(p => ({ x: p.x, y: p.y })); // assignments holds the cluster index for each point // initialized to -1 meaning unassigned let assignments = new Array(points.length).fill(-1); // ---- STEP 2: ITERATE ---- for (let iter = 0; iter < maxIterations; iter++) { // track whether any assignments changed this iteration // if nothing changes we have converged and can stop early let changed = false; // ASSIGN each point to the nearest centroid points.forEach((point, i) => { // calculate distance from this point to each centroid // we use squared euclidean distance — no need for square root since we just compare let minDist = Infinity; let nearest = 0; centroids.forEach((centroid, j) => { // euclidean distance squared = (x2-x1)^2 + (y2-y1)^2 const dist = Math.pow(point.x - centroid.x, 2) + Math.pow(point.y - centroid.y, 2); if (dist < minDist) { minDist = dist; nearest = j; } }); // if this point's assignment changed, note it if (assignments[i] !== nearest) { assignments[i] = nearest; changed = true; } }); // if nothing changed we have converged — stop early if (!changed) break; // UPDATE centroids as the mean x and y of all assigned points centroids = centroids.map((_, j) => { // get all points assigned to this cluster const clusterPoints = points.filter((_, i) => assignments[i] === j); // if no points are assigned to this cluster // keep the centroid where it is to avoid NaN if (clusterPoints.length === 0) return centroids[j]; // mean x and y of all points in this cluster return { x: d3.mean(clusterPoints, p => p.x), y: d3.mean(clusterPoints, p => p.y) }; }); } // ---- STEP 3: CALCULATE WCSS ---- // within-cluster sum of squares measures how tight the clusters are // lower = more compact clusters // used by the elbow chart to find the optimal k const wcss = points.reduce((sum, point, i) => { const centroid = centroids[assignments[i]]; return sum + Math.pow(point.x - centroid.x, 2) + Math.pow(point.y - centroid.y, 2); }, 0); return { assignments, centroids, wcss }; } // return the function so other cells can call it return { run }; }31:T56e,// Creates the elbow chart — runs k-means for k=2 through 6 // and plots the within-cluster sum of squares (WCSS) for each k // the elbow point where WCSS stops dropping sharply is the recommended k elbowData = { // pull the two variables currently selected in settings // if settings aren't loaded yet use the first two numeric columns const cols = data.length > 0 ? Object.keys(data[0]).filter(k => k !== "respondent_id") : []; const xCol = settings?.xVar || cols[0]; const yCol = settings?.yVar || cols[1]; // normalize the data to 0-1 range before clustering // this prevents variables with large ranges (like spend) from dominating // variables with small ranges (like satisfaction) const xVals = data.map(d => d[xCol]); const yVals = data.map(d => d[yCol]); const xMin = d3.min(xVals), xMax = d3.max(xVals); const yMin = d3.min(yVals), yMax = d3.max(yVals); const points = data.map(d => ({ x: (d[xCol] - xMin) / (xMax - xMin), y: (d[yCol] - yMin) / (yMax - yMin) })); // run k-means for each value of k from 2 to 6 // run 3 times per k and take the best result to avoid bad random initialization return d3.range(2, 7).map(k => { const runs = d3.range(3).map(() => kmeans.run(points, k, 100)); const best = runs.reduce((a, b) => a.wcss < b.wcss ? a : b); return { k, wcss: parseFloat(best.wcss.toFixed(2)) }; }); }32:T1053,// Draws the elbow chart as a single SVG // x axis is number of clusters k // y axis is within-cluster sum of squares (WCSS) // look for the point where the line bends — that is the recommended k elbowChart = { const svgWidth = 500; const svgHeight = 320; const marginTop = 40; const marginRight = 40; const marginBottom = 50; const marginLeft = 70; const plotWidth = svgWidth - marginLeft - marginRight; const plotHeight = svgHeight - marginTop - marginBottom; // x scale — maps k values (2-6) to pixel positions const x = k => marginLeft + plotWidth * ((k - 2) / (6 - 2)); // y scale — maps WCSS values to pixel positions const yMin = 0; const yMax = d3.max(elbowData, d => d.wcss) * 1.1; const y = val => marginTop + plotHeight * (1 - val / yMax); const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .style("background", "white") .style("font-family", "sans-serif") .style("font-size", "12px"); // grid lines d3.ticks(yMin, yMax, 5).forEach(val => { svg.append("line") .attr("x1", marginLeft) .attr("x2", marginLeft + plotWidth) .attr("y1", y(val)) .attr("y2", y(val)) .attr("stroke", "#e0e0e0") .attr("stroke-width", 1); }); // y axis svg.append("line") .attr("x1", marginLeft).attr("y1", marginTop) .attr("x2", marginLeft).attr("y2", marginTop + plotHeight) .attr("stroke", "#333") .attr("stroke-width", 1); d3.ticks(yMin, yMax, 5).forEach(val => { svg.append("line") .attr("x1", marginLeft - 5).attr("x2", marginLeft) .attr("y1", y(val)).attr("y2", y(val)) .attr("stroke", "#333").attr("stroke-width", 1); svg.append("text") .attr("x", marginLeft - 8).attr("y", y(val)) .attr("dominant-baseline", "middle") .attr("text-anchor", "end") .attr("fill", "#333") .text(val.toFixed(1)); }); // rotated y axis label svg.append("text") .attr("transform", `rotate(-90) translate(${-(marginTop + plotHeight / 2)}, ${marginLeft - 45})`) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") .text("Within-Cluster Sum of Squares"); // x axis svg.append("line") .attr("x1", marginLeft) .attr("x2", marginLeft + plotWidth) .attr("y1", marginTop + plotHeight) .attr("y2", marginTop + plotHeight) .attr("stroke", "#333") .attr("stroke-width", 1); d3.range(2, 7).forEach(k => { svg.append("line") .attr("x1", x(k)).attr("x2", x(k)) .attr("y1", marginTop + plotHeight) .attr("y2", marginTop + plotHeight + 5) .attr("stroke", "#333").attr("stroke-width", 1); svg.append("text") .attr("x", x(k)) .attr("y", marginTop + plotHeight + 18) .attr("text-anchor", "middle") .attr("fill", "#333") .text(k); }); svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", svgHeight - 8) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") .text("Number of Clusters (k)"); // draw the elbow line connecting all k values const line = d3.line() .x(d => x(d.k)) .y(d => y(d.wcss)) .curve(d3.curveLinear); svg.append("path") .attr("d", line(elbowData)) .attr("fill", "none") .attr("stroke", "#4269d0") .attr("stroke-width", 2.5); // dot at each k value elbowData.forEach(d => { svg.append("circle") .attr("cx", x(d.k)) .attr("cy", y(d.wcss)) .attr("r", 6) .attr("fill", "white") .attr("stroke", "#4269d0") .attr("stroke-width", 2); // WCSS value label above each dot svg.append("text") .attr("x", x(d.k)) .attr("y", y(d.wcss) - 12) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("fill", "#666") .text(d.wcss); }); // chart title svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", marginTop - 15) .attr("text-anchor", "middle") .attr("font-size", "15px") .attr("font-weight", "bold") .attr("fill", "#333") .text("Elbow Chart — Select k Where Curve Bends"); return svg.node(); }33:T83b,// Creates the settings controls for the analysis // variable options are pulled dynamically from the CSV columns // so this works with any dataset viewof settings = Inputs.form({ // chart title title: Inputs.text({ label: "Chart title", value: "Customer Segmentation" }), // number of clusters — user sets this based on the elbow chart above k: Inputs.range([2, 6], { label: "Number of clusters (k)", step: 1, value: 4 }), // which variable to plot on the x axis // options pulled dynamically from CSV columns excluding respondent_id xVar: Inputs.select( data.length > 0 ? Object.keys(data[0]).filter(k => k !== "respondent_id") : [], { label: "X axis variable", value: "spend" } ), // which variable to plot on the y axis yVar: Inputs.select( data.length > 0 ? Object.keys(data[0]).filter(k => k !== "respondent_id") : [], { label: "Y axis variable", value: "frequency" } ), // maximum iterations for the k-means algorithm // more iterations = more accurate but slower maxIterations: Inputs.number({ label: "Max iterations", value: 100, min: 10, max: 500 }), // cluster color pickers — one per maximum possible cluster (6) // only the first k colors will be used depending on the selected k value // defaults are evenly spaced samples from d3.interpolateWarm // users should check colors at https://projects.susielu.com/viz-palette color0: Inputs.color({ label: "Cluster 1 color", value: d3.color(d3.interpolateWarm(0.1)).formatHex() }), color1: Inputs.color({ label: "Cluster 2 color", value: d3.color(d3.interpolateWarm(0.28)).formatHex() }), color2: Inputs.color({ label: "Cluster 3 color", value: d3.color(d3.interpolateWarm(0.46)).formatHex() }), color3: Inputs.color({ label: "Cluster 4 color", value: d3.color(d3.interpolateWarm(0.64)).formatHex() }), color4: Inputs.color({ label: "Cluster 5 color", value: d3.color(d3.interpolateWarm(0.82)).formatHex() }), color5: Inputs.color({ label: "Cluster 6 color", value: d3.color(d3.interpolateWarm(0.99)).formatHex() }) })34:T611,// Creates a variable named 'clustered' — the full dataset with cluster assignments added // runs k-means using the selected variables and k from settings // runs 5 times and keeps the best result to avoid bad random initialization clustered = { // normalize the selected variables to 0-1 range before clustering // this prevents variables with large ranges (like spend) from dominating // variables with small ranges (like satisfaction) const xVals = data.map(d => d[settings.xVar]); const yVals = data.map(d => d[settings.yVar]); const xMin = d3.min(xVals), xMax = d3.max(xVals); const yMin = d3.min(yVals), yMax = d3.max(yVals); // convert each row to a normalized x,y point for the algorithm const points = data.map(d => ({ x: (d[settings.xVar] - xMin) / (xMax - xMin), y: (d[settings.yVar] - yMin) / (yMax - yMin) })); // run k-means 5 times and keep the result with the lowest WCSS // k-means can get stuck in bad local solutions depending on random initialization // running multiple times and keeping the best reduces this risk const runs = d3.range(5).map(() => kmeans.run(points, settings.k, settings.maxIterations) ); const best = runs.reduce((a, b) => a.wcss < b.wcss ? a : b); // add the cluster assignment back to each original data row // cluster numbers start at 1 for human readability return data.map((d, i) => ({ ...d, cluster: best.assignments[i] + 1, // also store the normalized x and y for the scatter plot xNorm: points[i].x, yNorm: points[i].y })); }35:T6e7,// Creates a summary table showing the profile of each cluster // one row per cluster with the mean value of each variable // helps interpret what each cluster represents summaryTable = { // build color array from settings const clusterColors = Array.from( { length: settings.k }, (_, i) => settings[`color${i}`] ); // get all numeric variable names excluding respondent_id and cluster const variables = Object.keys(data[0]).filter(k => k !== "respondent_id" && k !== "cluster" ); // group clustered data by cluster number const clusterGroups = Array.from( d3.group(clustered, d => d.cluster), ([cluster, rows]) => { // build one row per cluster with mean of each variable const row = { cluster, n: rows.length }; // calculate mean for each variable variables.forEach(v => { row[v] = parseFloat(d3.mean(rows, d => d[v]).toFixed(2)); }); return row; } ).sort((a, b) => a.cluster - b.cluster); // display as a table with color coded cluster column return Inputs.table(clusterGroups, { columns: ["cluster", "n", ...variables], header: { cluster: "Cluster", n: "Size", ...Object.fromEntries(variables.map(v => [v, v.charAt(0).toUpperCase() + v.slice(1)])) }, width: { cluster: 80, n: 60, ...Object.fromEntries(variables.map(v => [v, 100])) }, format: { cluster: d => { const color = clusterColors[d - 1] || "#333"; return htl.html`Cluster ${d}`; } } }); }36:T1abe,// Creates the K-Means cluster scatter plot as a single SVG // each dot is one respondent colored by their cluster assignment // centroids are marked with a larger symbol chart = { // ---- STEP 1: FIXED DIMENSIONS ---- const svgWidth = 620; const svgHeight = 560; const marginTop = 50; const marginRight = 40; const marginBottom = 60; const marginLeft = 70; const plotWidth = svgWidth - marginLeft - marginRight; const plotHeight = svgHeight - marginTop - marginBottom; // ---- STEP 2: SCALES ---- // x and y scales convert variable values to pixel positions const xVals = clustered.map(d => d[settings.xVar]); const yVals = clustered.map(d => d[settings.yVar]); // add 5% padding beyond data range so dots don't touch the edges const xPad = (d3.max(xVals) - d3.min(xVals)) * 0.05; const yPad = (d3.max(yVals) - d3.min(yVals)) * 0.05; const xMin = d3.min(xVals) - xPad; const xMax = d3.max(xVals) + xPad; const yMin = d3.min(yVals) - yPad; const yMax = d3.max(yVals) + yPad; const x = val => marginLeft + plotWidth * ((val - xMin) / (xMax - xMin)); const y = val => marginTop + plotHeight * (1 - (val - yMin) / (yMax - yMin)); // ---- STEP 3: COLORS ---- // build color array from settings — one color per cluster const clusterColors = Array.from( { length: settings.k }, (_, i) => settings[`color${i}`] ); // ---- STEP 4: CREATE SVG ---- const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .style("background", "white") .style("font-family", "sans-serif") .style("font-size", "12px"); // ---- STEP 5: DRAW GRID LINES ---- d3.ticks(xMin, xMax, 6).forEach(val => { svg.append("line") .attr("x1", x(val)).attr("x2", x(val)) .attr("y1", marginTop).attr("y2", marginTop + plotHeight) .attr("stroke", "#e0e0e0").attr("stroke-width", 1); }); d3.ticks(yMin, yMax, 6).forEach(val => { svg.append("line") .attr("x1", marginLeft).attr("x2", marginLeft + plotWidth) .attr("y1", y(val)).attr("y2", y(val)) .attr("stroke", "#e0e0e0").attr("stroke-width", 1); }); // ---- STEP 6: DRAW Y AXIS ---- svg.append("line") .attr("x1", marginLeft).attr("y1", marginTop) .attr("x2", marginLeft).attr("y2", marginTop + plotHeight) .attr("stroke", "#333").attr("stroke-width", 1); d3.ticks(yMin, yMax, 6).forEach(val => { svg.append("line") .attr("x1", marginLeft - 5).attr("x2", marginLeft) .attr("y1", y(val)).attr("y2", y(val)) .attr("stroke", "#333").attr("stroke-width", 1); svg.append("text") .attr("x", marginLeft - 8).attr("y", y(val)) .attr("dominant-baseline", "middle") .attr("text-anchor", "end") .attr("fill", "#333") .text(val); }); // rotated y axis label svg.append("text") .attr("transform", `rotate(-90) translate(${-(marginTop + plotHeight / 2)}, ${marginLeft - 45})`) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") // capitalize first letter of variable name for clean display .text(settings.yVar.charAt(0).toUpperCase() + settings.yVar.slice(1)); // ---- STEP 7: DRAW X AXIS ---- svg.append("line") .attr("x1", marginLeft).attr("x2", marginLeft + plotWidth) .attr("y1", marginTop + plotHeight).attr("y2", marginTop + plotHeight) .attr("stroke", "#333").attr("stroke-width", 1); d3.ticks(xMin, xMax, 6).forEach(val => { svg.append("line") .attr("x1", x(val)).attr("x2", x(val)) .attr("y1", marginTop + plotHeight).attr("y2", marginTop + plotHeight + 5) .attr("stroke", "#333").attr("stroke-width", 1); svg.append("text") .attr("x", x(val)).attr("y", marginTop + plotHeight + 18) .attr("text-anchor", "middle") .attr("fill", "#333") .text(val); }); // x axis label svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", svgHeight - 8) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") .text(settings.xVar.charAt(0).toUpperCase() + settings.xVar.slice(1)); // ---- STEP 8: DRAW DATA POINTS ---- // draw all dots first so centroids appear on top clustered.forEach(d => { const color = clusterColors[d.cluster - 1] || "#333"; svg.append("circle") .attr("cx", x(d[settings.xVar])) .attr("cy", y(d[settings.yVar])) .attr("r", 5) .attr("fill", color) .attr("fill-opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 0.5); }); // ---- STEP 9: DRAW CENTROIDS ---- // calculate centroids in original data space (not normalized) // group clustered data by cluster and take the mean of the selected variables const centroids = Array.from( d3.group(clustered, d => d.cluster), ([cluster, rows]) => ({ cluster, x: d3.mean(rows, d => d[settings.xVar]), y: d3.mean(rows, d => d[settings.yVar]) }) ); centroids.forEach(c => { const color = clusterColors[c.cluster - 1] || "#333"; // outer white ring so centroid stands out against dots svg.append("circle") .attr("cx", x(c.x)) .attr("cy", y(c.y)) .attr("r", 12) .attr("fill", "white") .attr("stroke", color) .attr("stroke-width", 2.5); // inner filled circle svg.append("circle") .attr("cx", x(c.x)) .attr("cy", y(c.y)) .attr("r", 8) .attr("fill", color); // cluster label inside the centroid svg.append("text") .attr("x", x(c.x)) .attr("y", y(c.y)) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "white") .text(c.cluster); }); // ---- STEP 10: DRAW LEGEND ---- const legendX = marginLeft + 10; const legendStartY = marginTop + 15; const legendSpacing = 22; Array.from({ length: settings.k }, (_, i) => i + 1).forEach((cluster, i) => { const color = clusterColors[i]; const itemY = legendStartY + i * legendSpacing; // colored dot sample svg.append("circle") .attr("cx", legendX + 6) .attr("cy", itemY) .attr("r", 6) .attr("fill", color) .attr("fill-opacity", 0.8); // label svg.append("text") .attr("x", legendX + 16) .attr("y", itemY) .attr("dominant-baseline", "middle") .attr("font-size", "12px") .attr("fill", "#333") .text(`Cluster ${cluster}`); }); // ---- STEP 11: CHART TITLE ---- svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", marginTop - 20) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#333") .text(settings.title); // ---- STEP 12: RETURN THE SVG ---- return svg.node(); }37:T4c6,// ---- ALT TEXT GENERATOR ---- altText = { // build one sentence per cluster describing size and centroid position const clusterDescriptions = Array.from( d3.group(clustered, d => d.cluster), ([cluster, rows]) => { const xMean = d3.mean(rows, d => d[settings.xVar]).toFixed(1); const yMean = d3.mean(rows, d => d[settings.yVar]).toFixed(1); return `Cluster ${cluster} contains ${rows.length} respondents with a mean ${settings.xVar} of ${xMean} and mean ${settings.yVar} of ${yMean}.`; } ).sort((a, b) => a.localeCompare(b)).join(" "); const text = `Scatter plot showing K-Means customer segmentation with k=${settings.k} clusters. The horizontal axis shows ${settings.xVar} and the vertical axis shows ${settings.yVar}. Each dot represents one respondent and is colored by cluster assignment. Cluster centroids are marked with numbered circles. ${clusterDescriptions}`; return html`

Alt text:

`; }38:[] 2d:{"id":"86b780672f7ebef9","slug":null,"title":"Customer Segmentation","thumbnail":"dfe4a63a712519783ae4a63f9708c1bd3192c2aa751e90408f33918b92b419b8","access_level":"public","create_time":"$D2026-06-26T18:59:28.981Z","update_time":"$D2026-06-27T03:01:19.399Z","view_time":null,"first_public_time":"$D2026-06-27T02:43:35.570Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024"},"version":60,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null}],"members":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null,"role":"editor"},{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Customer Segmentation","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"// Creates a file upload button\nviewof csvFile = Inputs.file({ label: \"Upload CSV\", accept: \".csv\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Creates a variable named 'data' for other cells to reference\n// Reads the uploaded CSV and converts it to a javascript array\ndata = {\n if (csvFile === null) return [];\n const text = await csvFile.text();\n return d3.csvParse(text, d3.autoType);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// Creates a download button for the chart\nDOM.download(\n () => new Blob(\n [new XMLSerializer().serializeToString(chart)],\n { type: \"image/svg+xml\" }\n ),\n \"kmeans_chart.svg\",\n \"Download chart as SVG\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// ---- CAPTION GENERATOR ----\ncaption = {\n\n // build a summary of each cluster from the summary table\n const clusterSummary = Array.from(\n d3.group(clustered, d => d.cluster),\n ([cluster, rows]) => `Cluster ${cluster} (n=${rows.length})`\n ).sort((a, b) => a.localeCompare(b)).join(\", \");\n\n const boldSentence = `K-Means cluster analysis (k=${settings.k}) of ${clustered.length} respondents identifies ${settings.k} distinct segments based on ${settings.xVar} and ${settings.yVar}.`;\n\n const regularSentence = `Each dot represents one respondent colored by cluster assignment. Cluster centroids are marked with numbered circles. ${clusterSummary}. Variables were normalized before clustering to prevent large-range variables from dominating the solution.`;\n\n return html`\n

${boldSentence} ${regularSentence}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2e:"$2d:body"