{"spec_id":"scatter-categorical","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// scatter-categorical: Categorical Scatter Plot\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic, tiny fixed-seed LCG) -------------------\n// Customer segments: monthly spend ($) vs. visit frequency (visits/month).\nlet seed = 20260905;\nfunction rand() {\n  seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n  return seed / 0x7fffffff;\n}\nfunction gauss(mean, spread) {\n  const u1 = Math.max(rand(), 1e-9);\n  const u2 = rand();\n  const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n  return mean + z * spread;\n}\nfunction hexToRgba(hex, alpha) {\n  const r = parseInt(hex.slice(1, 3), 16);\n  const g = parseInt(hex.slice(3, 5), 16);\n  const b = parseInt(hex.slice(5, 7), 16);\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\nconst segments = [\n  { name: \"Budget\", spend: 35, spendSpread: 12, visits: 2.2, visitSpread: 0.9, pointStyle: \"circle\" },\n  { name: \"Regular\", spend: 85, spendSpread: 18, visits: 4.5, visitSpread: 1.2, pointStyle: \"triangle\" },\n  { name: \"Premium\", spend: 160, spendSpread: 25, visits: 6.8, visitSpread: 1.4, pointStyle: \"rect\" },\n  { name: \"VIP\", spend: 260, spendSpread: 30, visits: 9.5, visitSpread: 1.6, pointStyle: \"rectRot\" },\n];\n\nconst nPerSegment = 35;\nconst datasets = segments.map((seg, i) => {\n  const points = [];\n  for (let p = 0; p < nPerSegment; p++) {\n    points.push({\n      x: Math.max(5, gauss(seg.spend, seg.spendSpread)),\n      y: Math.max(0.2, gauss(seg.visits, seg.visitSpread)),\n    });\n  }\n  return {\n    label: seg.name,\n    data: points,\n    backgroundColor: hexToRgba(t.palette[i % t.palette.length], 0.8),\n    borderColor: \"#FFFFFF\",\n    borderWidth: 1,\n    pointStyle: seg.pointStyle,\n    pointRadius: 9,\n    pointHoverRadius: 11,\n  };\n});\n\n// --- Mount -------------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart -------------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"scatter\",\n  data: { datasets },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    plugins: {\n      title: {\n        display: true,\n        text: \"scatter-categorical · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22 },\n        padding: { bottom: 20 },\n      },\n      legend: {\n        position: \"top\",\n        labels: { color: t.ink, font: { size: 16 }, usePointStyle: true },\n      },\n    },\n    scales: {\n      x: {\n        title: { display: true, text: \"Monthly Spend ($)\", color: t.ink, font: { size: 16 } },\n        ticks: { color: t.inkSoft, font: { size: 14 } },\n        grid: { color: t.grid },\n      },\n      y: {\n        title: { display: true, text: \"Visit Frequency (visits/month)\", 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"}