{"spec_id":"elbow-curve","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// elbow-curve: Elbow Curve for K-Means Clustering\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 93/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Customer segmentation: K-means inertia across k=1..10 on behavioral features\n// (purchase frequency, average order value, recency).\nconst kValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst inertia = [980, 560, 340, 230, 205, 188, 174, 163, 154, 147];\nconst optimalK = 4;\n\n// --- Mount -------------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart -------------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"line\",\n  data: {\n    labels: kValues,\n    datasets: [\n      {\n        label: \"Inertia\",\n        data: inertia,\n        borderColor: t.palette[0],\n        backgroundColor: t.palette[0],\n        pointBackgroundColor: t.palette[0],\n        pointBorderColor: t.pageBg,\n        pointBorderWidth: 2,\n        pointRadius: 7,\n        pointHoverRadius: 9,\n        borderWidth: 3,\n        cubicInterpolationMode: \"monotone\",\n        tension: 0.3,\n        fill: false,\n        segment: {\n          // De-emphasize the post-elbow segments (dashed + muted) to visually\n          // reinforce the \"diminishing returns\" story beyond the highlighted marker.\n          borderDash: (ctx) => (ctx.p0DataIndex >= optimalK - 1 ? [8, 4] : undefined),\n          borderColor: (ctx) => (ctx.p0DataIndex >= optimalK - 1 ? `${t.palette[0]}80` : t.palette[0]),\n        },\n      },\n      {\n        label: `Optimal k = ${optimalK}`,\n        data: kValues.map((k) => (k === optimalK ? inertia[optimalK - 1] : null)),\n        showLine: false,\n        pointBackgroundColor: t.palette[1],\n        pointBorderColor: t.pageBg,\n        pointBorderWidth: 2,\n        pointRadius: 12,\n        pointHoverRadius: 14,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    plugins: {\n      title: {\n        display: true,\n        text: \"elbow-curve · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22, weight: \"500\" },\n        padding: { bottom: 20 },\n      },\n      legend: {\n        labels: { color: t.ink, font: { size: 16 }, usePointStyle: true, pointStyle: \"circle\" },\n      },\n    },\n    scales: {\n      x: {\n        title: { display: true, text: \"Number of Clusters (k)\", color: t.ink, font: { size: 16 } },\n        ticks: { color: t.inkSoft, font: { size: 14 } },\n        grid: { display: false },\n      },\n      y: {\n        title: { display: true, text: \"Inertia (Within-Cluster Sum of Squares)\", color: t.ink, font: { size: 16 } },\n        ticks: { color: t.inkSoft, font: { size: 14 } },\n        grid: { color: t.grid },\n        beginAtZero: true,\n      },\n    },\n  },\n});\n"}