{"spec_id":"elbow-curve","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// elbow-curve: Elbow Curve for K-Means Clustering\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 95/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Customer segmentation: K-means clustering on annual spend + visit frequency,\n// inertia (within-cluster sum of squares) across candidate cluster counts.\nconst kValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst inertia = [8420, 4180, 2350, 1580, 1310, 1120, 980, 870, 790, 730];\nconst elbowK = 4;\n\nconst seriesData = kValues.map((k, i) =>\n  k === elbowK\n    ? { x: k, y: inertia[i], marker: { radius: 11, lineWidth: 3, lineColor: t.ink } }\n    : [k, inertia[i]]\n);\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: { type: \"areaspline\", backgroundColor: \"transparent\", animation: false,\n           style: { fontFamily: \"inherit\" } },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: { text: \"elbow-curve · javascript · highcharts · anyplot.ai\",\n           style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" } },\n  xAxis: { title: { text: \"Number of Clusters (k)\",\n                     style: { color: t.inkSoft, fontSize: \"16px\" } },\n           min: 1, max: 10, tickInterval: 1,\n           lineColor: t.inkSoft, tickColor: t.inkSoft, gridLineColor: t.grid,\n           labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n           plotLines: [{\n             value: elbowK, color: t.inkSoft, dashStyle: \"Dash\", width: 1.5, zIndex: 3,\n             label: { text: `Optimal k = ${elbowK}`, style: { color: t.inkSoft, fontSize: \"14px\" },\n                      align: \"left\", x: 8, y: 16 },\n           }] },\n  yAxis: { title: { text: \"Inertia (within-cluster sum of squares)\",\n                     style: { color: t.inkSoft, fontSize: \"16px\" } },\n           gridLineColor: t.grid,\n           labels: { style: { color: t.inkSoft, fontSize: \"14px\" } } },\n  legend: { enabled: false },\n  tooltip: { enabled: true, backgroundColor: t.elevatedBg, borderColor: t.grid,\n             style: { color: t.ink, fontSize: \"13px\" },\n             formatter() {\n               return `k = ${this.x}<br/>Inertia: ${this.y.toLocaleString()}`;\n             } },\n  plotOptions: { series: { animation: false, lineWidth: 3,\n                            fillOpacity: 0.12,\n                            marker: { radius: 7, fillColor: t.palette[0], lineWidth: 0 } } },\n  series: [{ name: \"Inertia\", data: seriesData, color: t.palette[0] }],\n});\n"}