{"spec_id":"learning-curve-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// learning-curve-basic: Model Learning Curve\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 87/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Random-forest churn classifier: accuracy vs. training set size, 8-fold CV.\n// Training score drifts down as the model can no longer memorize every fold;\n// validation score climbs and the fold-to-fold spread narrows — the classic\n// high-variance-shrinking-with-data signature.\nconst trainSizes = [50, 100, 200, 300, 400, 500, 700, 900, 1200, 1500];\n\nconst trainMean = [99, 98.5, 97.5, 96.8, 96.2, 95.8, 95.1, 94.6, 94.1, 93.8];\nconst trainStd = [0.8, 1.0, 0.9, 0.8, 0.7, 0.6, 0.6, 0.5, 0.5, 0.4];\n\nconst validationMean = [71, 76, 81, 84.5, 86.5, 87.8, 89.5, 90.5, 91.2, 91.7];\nconst validationStd = [5.5, 4.8, 3.8, 3.2, 2.8, 2.4, 2.0, 1.7, 1.5, 1.3];\n\nconst toPairs = (mean) => mean.map((m, i) => [trainSizes[i], m]);\nconst bandLower = (mean, std) =>\n  mean.map((m, i) => [trainSizes[i], m - std[i]]);\nconst bandRange = (std) => std.map((s, i) => [trainSizes[i], 2 * s]);\n\nconst trainColor = t.palette[0];\nconst validationColor = t.palette[1];\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"line\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"learning-curve-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"Validation accuracy converges toward training accuracy as the fold-to-fold variance narrows\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    type: \"linear\",\n    tickPositions: trainSizes,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: {\n      text: \"Training Set Size\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n  },\n  yAxis: {\n    title: {\n      text: \"Accuracy (%)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    labels: {\n      format: \"{value}%\",\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n    },\n    gridLineColor: t.grid,\n    min: 60,\n    max: 100,\n    reversedStacks: false,\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  tooltip: { valueSuffix: \"%\" },\n  plotOptions: {\n    series: { animation: false, marker: { enabled: false } },\n  },\n  series: [\n    // Confidence bands: a transparent base area stacked with a translucent\n    // range area — the classic Highcharts-core technique for a min/max band\n    // without the arearange series type (which lives in highcharts-more).\n    {\n      name: \"Training band base\",\n      type: \"area\",\n      data: bandLower(trainMean, trainStd),\n      stacking: \"normal\",\n      stack: \"train-band\",\n      color: \"transparent\",\n      lineWidth: 0,\n      fillOpacity: 0,\n      enableMouseTracking: false,\n      showInLegend: false,\n    },\n    {\n      name: \"Training ± 1 SD\",\n      type: \"area\",\n      data: bandRange(trainStd),\n      stacking: \"normal\",\n      stack: \"train-band\",\n      color: Highcharts.color(trainColor).setOpacity(0.18).get(),\n      lineWidth: 0,\n      enableMouseTracking: false,\n      showInLegend: false,\n    },\n    {\n      name: \"Validation band base\",\n      type: \"area\",\n      data: bandLower(validationMean, validationStd),\n      stacking: \"normal\",\n      stack: \"validation-band\",\n      color: \"transparent\",\n      lineWidth: 0,\n      fillOpacity: 0,\n      enableMouseTracking: false,\n      showInLegend: false,\n    },\n    {\n      name: \"Validation ± 1 SD\",\n      type: \"area\",\n      data: bandRange(validationStd),\n      stacking: \"normal\",\n      stack: \"validation-band\",\n      color: Highcharts.color(validationColor).setOpacity(0.18).get(),\n      lineWidth: 0,\n      enableMouseTracking: false,\n      showInLegend: false,\n    },\n    {\n      name: \"Training score\",\n      type: \"line\",\n      data: toPairs(trainMean),\n      color: trainColor,\n      lineWidth: 3,\n      marker: { enabled: true, radius: 5 },\n    },\n    {\n      name: \"Validation score\",\n      type: \"line\",\n      data: toPairs(validationMean),\n      color: validationColor,\n      lineWidth: 3,\n      marker: { enabled: true, radius: 5 },\n    },\n  ],\n});\n"}