{"spec_id":"polar-line","library":"echarts","language":"javascript","code":"// anyplot.ai\n// polar-line: Polar Line Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-09-05\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Weekly average temperature (°C) for two hemispheres — opposite seasonal phase.\n// A single annual sinusoid per hemisphere (calibrated to typical monthly climate\n// normals) gives a smooth 52-point ring instead of 12 sparse vertices.\nconst months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nconst WEEKS_PER_YEAR = 52;\nconst monthOf = (week) => (week / WEEKS_PER_YEAR) * 12;\n\nconst northernHemisphere = Array.from({ length: WEEKS_PER_YEAR }, (_, week) => {\n  const month = monthOf(week);\n  return Math.round((13.3 - 13 * Math.cos((2 * Math.PI * month) / 12)) * 10) / 10;\n});\nconst southernHemisphere = Array.from({ length: WEEKS_PER_YEAR }, (_, week) => {\n  const month = monthOf(week);\n  return Math.round((18 + 5.5 * Math.cos((2 * Math.PI * month) / 12)) * 10) / 10;\n});\n\n// A category angleAxis would break alignment if a 13th slot were appended just\n// to close the loop, so the axis runs on a continuous 0-12 value scale instead\n// (one unit per month) and each series repeats its January value at month 12 —\n// same angle as month 0 — to draw a fully closed ring. Polar series data pairs\n// are [radiusValue, angleValue] (radiusAxis is dimension 0), not the reverse.\nconst closeLoop = (values) => values.map((v, i) => [v, monthOf(i)]).concat([[values[0], 12]]);\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-line · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 10,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n  },\n  legend: {\n    bottom: 10,\n    data: [\"Northern hemisphere\", \"Southern hemisphere\"],\n    textStyle: { color: t.ink, fontSize: 16 },\n  },\n  polar: { center: [\"50%\", \"54%\"], radius: \"60%\" },\n  angleAxis: {\n    type: \"value\",\n    min: 0,\n    max: 12,\n    interval: 1,\n    startAngle: 90,\n    axisLabel: { color: t.inkSoft, fontSize: 14, formatter: (value) => months[value] || \"\" },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid, type: \"dashed\" } },\n  },\n  radiusAxis: {\n    type: \"value\",\n    min: -5,\n    max: 30,\n    axisLabel: { color: t.inkSoft, fontSize: 13, formatter: \"{value}°C\", margin: 18 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      name: \"Northern hemisphere\",\n      type: \"line\",\n      coordinateSystem: \"polar\",\n      data: closeLoop(northernHemisphere),\n      symbol: \"circle\",\n      symbolSize: 6,\n      lineStyle: { width: 3 },\n    },\n    {\n      name: \"Southern hemisphere\",\n      type: \"line\",\n      coordinateSystem: \"polar\",\n      data: closeLoop(southernHemisphere),\n      symbol: \"circle\",\n      symbolSize: 6,\n      lineStyle: { width: 3 },\n    },\n  ],\n});\n"}