{"spec_id":"line-parametric","library":"echarts","language":"javascript","code":"// anyplot.ai\n// line-parametric: Parametric Curve Plot\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 89/100 | Created: 2026-06-20\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data -------------------------------------------------------------------\n\n// Lissajous figure: x = sin(3t), y = sin(2t), t ∈ [0, 2π]\n// 3rd element: normalized t (0→1) drives visualMap color (t.seq gradient)\nconst N_LISS = 1200;\nconst lissPoints = Array.from({ length: N_LISS }, (_, i) => {\n  const tn = i / (N_LISS - 1);\n  const ti = tn * 2 * Math.PI;\n  return [Math.sin(3 * ti), Math.sin(2 * ti), tn];\n});\n\n// Archimedean spiral: x = t·cos(t), y = t·sin(t), t ∈ [0, 4π]\nconst N_SPIRAL = 1200;\nconst spiralPoints = Array.from({ length: N_SPIRAL }, (_, i) => {\n  const tn = i / (N_SPIRAL - 1);\n  const ti = tn * 4 * Math.PI;\n  return [ti * Math.cos(ti), ti * Math.sin(ti), tn];\n});\n\n// --- Chart ------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById('container'));\n\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: 'transparent',\n\n  title: [\n    {\n      text: 'line-parametric · javascript · echarts · anyplot.ai',\n      left: 'center',\n      top: 14,\n      textStyle: { color: t.ink, fontSize: 22, fontWeight: 'bold' }\n    },\n    {\n      text: 'Lissajous Figure\\nx = sin(3t)  y = sin(2t)',\n      left: 90,\n      top: 58,\n      textStyle: { color: t.inkSoft, fontSize: 14, lineHeight: 22 }\n    },\n    {\n      text: 'Archimedean Spiral\\nx = t·cos(t)  y = t·sin(t)',\n      left: 870,\n      top: 58,\n      textStyle: { color: t.inkSoft, fontSize: 14, lineHeight: 22 }\n    },\n    {\n      text: 'Color encodes direction of increasing t',\n      left: 'center',\n      top: 116,\n      textStyle: { color: t.inkSoft, fontSize: 12 }\n    }\n  ],\n\n  // Two square 670×670 CSS-px plot areas side by side on a 1600×900 mount\n  // top 155 + bottom 75 = 230 → height = 900 − 230 = 670 ✓\n  grid: [\n    { left: 90,  right: 840, top: 155, bottom: 75 },\n    { left: 870, right: 60,  top: 155, bottom: 75 }\n  ],\n\n  xAxis: [\n    {\n      gridIndex: 0,\n      type: 'value',\n      name: 'x(t)',\n      nameLocation: 'center',\n      nameGap: 36,\n      nameTextStyle: { color: t.inkSoft, fontSize: 14 },\n      min: -1.2, max: 1.2,\n      axisLabel: { color: t.inkSoft, fontSize: 12 },\n      axisLine: { show: true, lineStyle: { color: t.inkSoft } },\n      axisTick: { show: false },\n      splitLine: { lineStyle: { color: t.grid } }\n    },\n    {\n      gridIndex: 1,\n      type: 'value',\n      name: 'x(t)',\n      nameLocation: 'center',\n      nameGap: 36,\n      nameTextStyle: { color: t.inkSoft, fontSize: 14 },\n      min: -14, max: 14,\n      axisLabel: { color: t.inkSoft, fontSize: 12 },\n      axisLine: { show: true, lineStyle: { color: t.inkSoft } },\n      axisTick: { show: false },\n      splitLine: { lineStyle: { color: t.grid } }\n    }\n  ],\n\n  yAxis: [\n    {\n      gridIndex: 0,\n      type: 'value',\n      name: 'y(t)',\n      nameLocation: 'center',\n      nameGap: 46,\n      nameTextStyle: { color: t.inkSoft, fontSize: 14 },\n      min: -1.2, max: 1.2,\n      axisLabel: { color: t.inkSoft, fontSize: 12 },\n      axisLine: { show: true, lineStyle: { color: t.inkSoft } },\n      axisTick: { show: false },\n      splitLine: { lineStyle: { color: t.grid } }\n    },\n    {\n      gridIndex: 1,\n      type: 'value',\n      name: 'y(t)',\n      nameLocation: 'center',\n      nameGap: 46,\n      nameTextStyle: { color: t.inkSoft, fontSize: 14 },\n      min: -14, max: 14,\n      axisLabel: { color: t.inkSoft, fontSize: 12 },\n      axisLine: { show: true, lineStyle: { color: t.inkSoft } },\n      axisTick: { show: false },\n      splitLine: { lineStyle: { color: t.grid } }\n    }\n  ],\n\n  // Per-point color via Imprint sequential colormap (t.seq: green→blue)\n  // Scatter series supports per-point color mapping through visualMap dimension\n  visualMap: [\n    {\n      type: 'continuous',\n      seriesIndex: 0,\n      dimension: 2,\n      min: 0, max: 1,\n      inRange: { color: t.seq },\n      show: false\n    },\n    {\n      type: 'continuous',\n      seriesIndex: 2,\n      dimension: 2,\n      min: 0, max: 1,\n      inRange: { color: t.seq },\n      show: false\n    }\n  ],\n\n  series: [\n    // Lissajous curve — scatter with symbolSize 8 for dense, gap-free appearance\n    {\n      type: 'scatter',\n      xAxisIndex: 0,\n      yAxisIndex: 0,\n      data: lissPoints,\n      symbolSize: 8,\n      encode: { x: 0, y: 1 },\n      z: 2\n    },\n    // Lissajous origin marker — closed curve: t=0 and t=2π meet at (0,0)\n    {\n      type: 'scatter',\n      xAxisIndex: 0,\n      yAxisIndex: 0,\n      data: [[0, 0]],\n      symbolSize: 20,\n      itemStyle: { color: t.seq[0], borderColor: t.ink, borderWidth: 2 },\n      label: {\n        show: true,\n        formatter: 't = 0, 2π',\n        position: 'top',\n        color: t.inkSoft,\n        fontSize: 12\n      },\n      z: 4\n    },\n\n    // Archimedean spiral — scatter with t-based gradient via visualMap\n    {\n      type: 'scatter',\n      xAxisIndex: 1,\n      yAxisIndex: 1,\n      data: spiralPoints,\n      symbolSize: 8,\n      encode: { x: 0, y: 1 },\n      z: 2\n    },\n    // Spiral start marker at origin\n    {\n      type: 'scatter',\n      xAxisIndex: 1,\n      yAxisIndex: 1,\n      data: [[0, 0]],\n      symbolSize: 20,\n      itemStyle: { color: t.seq[0], borderColor: t.ink, borderWidth: 2 },\n      label: {\n        show: true,\n        formatter: 't = 0',\n        position: 'right',\n        color: t.inkSoft,\n        fontSize: 12\n      },\n      z: 4\n    },\n    // Spiral end marker at t = 4π\n    {\n      type: 'scatter',\n      xAxisIndex: 1,\n      yAxisIndex: 1,\n      data: [[spiralPoints[N_SPIRAL - 1][0], spiralPoints[N_SPIRAL - 1][1]]],\n      symbolSize: 16,\n      symbol: 'diamond',\n      itemStyle: { color: t.seq[1] },\n      label: {\n        show: true,\n        formatter: 't = 4π',\n        position: 'top',\n        color: t.inkSoft,\n        fontSize: 12\n      },\n      z: 4\n    }\n  ]\n});\n"}