{"spec_id":"elbow-curve","library":"echarts","language":"javascript","code":"// anyplot.ai\n// elbow-curve: Elbow Curve for K-Means Clustering\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Customer segmentation: within-cluster sum of squares (inertia) for k-means\n// run on RFM (recency, frequency, monetary) features across 500 customers.\nconst kValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst inertia = [18200, 9800, 6200, 4100, 3400, 2950, 2650, 2420, 2250, 2120];\nconst elbowK = 4;\nconst elbowIndex = kValues.indexOf(elbowK);\n\nconst seriesData = kValues.map((k, i) => ({\n  value: [k, inertia[i]],\n  itemStyle:\n    k === elbowK\n      ? { color: t.palette[2], borderColor: t.pageBg, borderWidth: 2 }\n      : { color: t.palette[0], borderColor: t.pageBg, borderWidth: 2 },\n  symbolSize: k === elbowK ? 22 : 14,\n}));\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"elbow-curve · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n  },\n  grid: { left: 130, right: 80, top: 100, bottom: 110, containLabel: false },\n  tooltip: {\n    trigger: \"axis\",\n    formatter: (params) => {\n      const [k, value] = params[0].value;\n      return `k = ${k}<br/>inertia = ${value.toLocaleString(\"en-US\")}`;\n    },\n  },\n  xAxis: {\n    type: \"value\",\n    min: 1,\n    max: 10,\n    interval: 1,\n    name: \"Number of Clusters (k)\",\n    nameLocation: \"middle\",\n    nameGap: 46,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    axisLabel: { color: t.inkSoft, fontSize: 15 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Inertia (within-cluster sum of squares)\",\n    nameLocation: \"middle\",\n    nameGap: 90,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 15,\n      formatter: (v) => v.toLocaleString(\"en-US\"),\n    },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      type: \"line\",\n      data: seriesData,\n      lineStyle: { color: t.palette[0], width: 3.5 },\n      symbol: \"circle\",\n      smooth: 0.25,\n      z: 2,\n      markLine: {\n        symbol: \"none\",\n        silent: true,\n        lineStyle: { color: t.inkSoft, type: \"dashed\", width: 2 },\n        label: {\n          formatter: `Elbow · k = ${elbowK}`,\n          position: \"end\",\n          rotate: 0,\n          align: \"left\",\n          offset: [8, -10],\n          color: t.ink,\n          fontSize: 16,\n        },\n        data: [{ xAxis: elbowK }],\n      },\n    },\n  ],\n});\n"}