{"spec_id":"polar-line","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// polar-line: Polar Line Plot\n// Library: chartjs 4.4.7 | JavaScript 22.23.2\n// Quality: 87/100 | Created: 2026-09-05\n\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: average wind speed (mph) by compass direction, morning vs afternoon ---\n// Chart.js has no continuous polar-line primitive; the \"radar\" chart type is a\n// line plot in polar coordinates with evenly-spaced angular axes, which is\n// exactly the spec's shape (theta = direction, radius = magnitude, line\n// connects points in theta order, closing the loop back to 0 degrees).\nconst N_DIRECTIONS = 36;\nconst directionLabels = [];\nconst morningSpeed = [];\nconst afternoonSpeed = [];\n\n// Tiny fixed-seed LCG for deterministic jitter (browser has no seeded RNG).\nlet seed = 42;\nfunction nextRandom() {\n  seed = (seed * 1103515245 + 12345) % 2147483648;\n  return seed / 2147483648;\n}\n\nfor (let i = 0; i < N_DIRECTIONS; i++) {\n  const degrees = i * (360 / N_DIRECTIONS);\n  directionLabels.push(`${degrees}°`);\n  const morningJitter = (nextRandom() - 0.5) * 1;\n  const afternoonJitter = (nextRandom() - 0.5) * 1;\n  // Prevailing-wind amplitudes toned down to a ~3x calm/dominant ratio,\n  // which reads as a more believable average-wind-speed profile than the\n  // ~6x swing of the previous attempt.\n  morningSpeed.push(\n    Math.max(2, 6 + 3 * Math.cos((degrees - 225) * (Math.PI / 180)) + morningJitter)\n  );\n  afternoonSpeed.push(\n    Math.max(2, 7.5 + 3.5 * Math.cos((degrees - 90) * (Math.PI / 180)) + afternoonJitter)\n  );\n}\n\nconst morningPeakIndex = morningSpeed.indexOf(Math.max(...morningSpeed));\nconst afternoonPeakIndex = afternoonSpeed.indexOf(Math.max(...afternoonSpeed));\n\n// --- Mount -----------------------------------------------------------------\nconst canvas = document.createElement(\"canvas\");\ndocument.getElementById(\"container\").appendChild(canvas);\n\n// --- Chart -------------------------------------------------------------------\nnew Chart(canvas, {\n  type: \"radar\",\n  data: {\n    labels: directionLabels,\n    datasets: [\n      {\n        label: \"Morning avg (mph)\",\n        data: morningSpeed,\n        borderColor: t.palette[0],\n        pointBackgroundColor: t.palette[0],\n        pointStyle: \"circle\",\n        pointRadius: 4,\n        borderWidth: 3,\n        backgroundColor: `${t.palette[0]}26`,\n        fill: \"origin\",\n        tension: 0,\n      },\n      {\n        label: \"Afternoon avg (mph)\",\n        data: afternoonSpeed,\n        borderColor: t.palette[1],\n        pointBackgroundColor: t.palette[1],\n        pointStyle: \"triangle\",\n        pointRadius: 5,\n        borderWidth: 3,\n        backgroundColor: `${t.palette[1]}26`,\n        fill: \"origin\",\n        tension: 0,\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    plugins: {\n      title: {\n        display: true,\n        text: \"polar-line · javascript · chartjs · anyplot.ai\",\n        color: t.ink,\n        font: { size: 22 },\n      },\n      subtitle: {\n        display: true,\n        text: `Peak winds: morning ${directionLabels[morningPeakIndex]}, afternoon ${directionLabels[afternoonPeakIndex]}`,\n        color: t.inkSoft,\n        font: { size: 15, style: \"italic\" },\n        padding: { bottom: 12 },\n      },\n      legend: {\n        labels: {\n          color: t.ink,\n          font: { size: 16 },\n          usePointStyle: true,\n        },\n      },\n    },\n    scales: {\n      r: {\n        beginAtZero: true,\n        angleLines: { color: t.grid },\n        grid: { color: t.grid },\n        pointLabels: {\n          color: t.inkSoft,\n          font: { size: 14 },\n          callback: (label, index) => (index % 3 === 0 ? label : \"\"),\n        },\n        ticks: {\n          color: t.inkSoft,\n          backdropColor: \"transparent\",\n          font: { size: 12 },\n          callback: (value) => `${value} mph`,\n        },\n      },\n    },\n  },\n});\n"}