{"spec_id":"polar-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// polar-basic: Basic Polar Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 92/100 | Updated: 2026-07-25\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Wind-direction frequency: percentage of observations the wind blew from\n// each of the 16 compass points, with a prevailing wind out of the SW.\nconst directions = [\n  \"N\", \"NNE\", \"NE\", \"ENE\", \"E\", \"ESE\", \"SE\", \"SSE\",\n  \"S\", \"SSW\", \"SW\", \"WSW\", \"W\", \"WNW\", \"NW\", \"NNW\",\n];\nconst prevailingIndex = directions.indexOf(\"SW\");\nconst rawWeights = directions.map((_, i) => {\n  const steps = directions.length;\n  const angularDist = Math.min(\n    Math.abs(i - prevailingIndex),\n    steps - Math.abs(i - prevailingIndex),\n  );\n  const gaussian = 27 * Math.exp(-(angularDist ** 2) / (2 * 3.2 ** 2));\n  return gaussian + 2.5;\n});\nconst weightSum = rawWeights.reduce((sum, w) => sum + w, 0);\nconst frequencies = rawWeights.map(\n  (w) => Math.round((w / weightSum) * 1000) / 10,\n);\n\n// Fill opacity ramps with value (deeper toward the prevailing direction); the\n// stroke stays at full brand-green opacity as a light outline on every petal.\nfunction withAlpha(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}\nconst maxFrequency = Math.max(...frequencies);\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"polar-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  polar: {\n    center: [\"50%\", \"56%\"],\n    radius: \"68%\",\n  },\n  angleAxis: {\n    type: \"category\",\n    data: directions,\n    startAngle: 90,\n    clockwise: true,\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisLabel: { color: t.inkSoft, fontSize: 15 },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  radiusAxis: {\n    type: \"value\",\n    name: \"Frequency (%)\",\n    nameTextStyle: { color: t.inkSoft, fontSize: 13 },\n    min: 0,\n    axisLine: { show: false },\n    axisLabel: { color: t.inkSoft, fontSize: 13 },\n    splitLine: { lineStyle: { color: t.grid } },\n    splitNumber: 4,\n  },\n  series: [\n    {\n      type: \"bar\",\n      coordinateSystem: \"polar\",\n      data: frequencies.map((value) => ({\n        value,\n        itemStyle: {\n          color: withAlpha(t.palette[0], 0.55 + 0.45 * (value / maxFrequency)),\n          borderColor: t.palette[0],\n          borderWidth: 1,\n        },\n      })),\n      name: \"Wind frequency\",\n      barCategoryGap: \"20%\",\n    },\n  ],\n});\n"}