{"spec_id":"scatter-basic","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// scatter-basic: Basic Scatter Plot\n// Library: chartjs 4.4.7 | JavaScript 22.23.0\n// Quality: 91/100 | Updated: 2026-06-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Deterministic LCG for reproducible scatter data (seed = 42)\nlet seed = 42;\nconst rand = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 0x100000000; };\n\n// Data: Annual rainfall (mm) vs wheat yield (t/ha) across 150 agricultural regions\n// Positive correlation r ≈ 0.7 with realistic noise\nconst n = 150;\nconst points = Array.from({ length: n }, () => {\n  const rainfall = 250 + rand() * 750;\n  const baseline = 1.2 + ((rainfall - 250) / 750) * 4.2;\n  const yield_val = baseline + (rand() - 0.5) * 4.0;\n  return { x: +rainfall.toFixed(1), y: +Math.max(0.2, yield_val).toFixed(2) };\n});\n\n// OLS linear regression to surface the r≈0.7 correlation\nconst meanX = points.reduce((s, p) => s + p.x, 0) / n;\nconst meanY = points.reduce((s, p) => s + p.y, 0) / n;\nconst slope = points.reduce((s, p) => s + (p.x - meanX) * (p.y - meanY), 0) /\n              points.reduce((s, p) => s + (p.x - meanX) ** 2, 0);\nconst intercept = meanY - slope * meanX;\nconst minX = Math.min(...points.map(p => p.x));\nconst maxX = Math.max(...points.map(p => p.x));\nconst trendLine = [\n  { x: minX, y: +(slope * minX + intercept).toFixed(3) },\n  { x: maxX, y: +(slope * maxX + intercept).toFixed(3) },\n];\n\n// Canvas background plugin — fills with pageBg so dark theme renders correctly\nconst bgPlugin = {\n  id: \"canvasBg\",\n  beforeDraw(chart) {\n    const { ctx, width, height } = chart;\n    ctx.save();\n    ctx.fillStyle = t.pageBg;\n    ctx.fillRect(0, 0, width, height);\n    ctx.restore();\n  },\n};\n\n// Mount canvas into the harness container\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// Chart — mixed scatter + trend line\nnew Chart(canvas, {\n  type: \"scatter\",\n  plugins: [bgPlugin],\n  data: {\n    datasets: [\n      {\n        label: \"Agricultural Region\",\n        data: points,\n        backgroundColor: t.palette[0] + \"b3\",  // Imprint brand green at 70% opacity\n        borderColor: t.pageBg,\n        borderWidth: 1.5,\n        pointRadius: 5,\n      },\n      {\n        type: \"line\",\n        label: \"Linear Trend (r ≈ 0.7)\",\n        data: trendLine,\n        borderColor: t.amber,\n        borderWidth: 3,\n        borderDash: [10, 5],\n        pointRadius: 0,\n        fill: false,\n        tension: 0,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: { top: 16, right: 48, bottom: 16, left: 16 } },\n    plugins: {\n      title: {\n        display: true,\n        text: \"scatter-basic · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 32, weight: \"normal\" },\n        padding: { top: 8, bottom: 6 },\n      },\n      subtitle: {\n        display: true,\n        text: \"Annual Rainfall vs Wheat Yield across 150 agricultural regions — dashed line shows positive correlation (r ≈ 0.7)\",\n        color: t.inkSoft,\n        font: { size: 16, style: \"italic\" },\n        padding: { bottom: 16 },\n      },\n      legend: { display: false },\n    },\n    scales: {\n      x: {\n        ticks: { color: t.inkSoft, font: { size: 18 }, maxTicksLimit: 8 },\n        grid: { color: t.grid },\n        border: { display: false },\n        title: {\n          display: true,\n          text: \"Annual Rainfall (mm)\",\n          color: t.ink,\n          font: { size: 22 },\n          padding: { top: 8 },\n        },\n      },\n      y: {\n        ticks: { color: t.inkSoft, font: { size: 18 } },\n        grid: { color: t.grid },\n        border: { display: false },\n        title: {\n          display: true,\n          text: \"Wheat Yield (t/ha)\",\n          color: t.ink,\n          font: { size: 22 },\n          padding: { bottom: 8 },\n        },\n      },\n    },\n  },\n});\n"}