{"spec_id":"stem-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// stem-basic: Basic Stem Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 91/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Impulse response of a damped second-order system: y[n] = exp(-decay*n) * cos(omega*n)\nconst N = 40;\nconst decay = 0.12;\nconst omega = 0.5;\nconst indices = [];\nconst values = [];\nfor (let n = 0; n < N; n++) {\n  indices.push(String(n));\n  values.push(Number((Math.exp(-decay * n) * Math.cos(omega * n)).toFixed(4)));\n}\nconst peakIndex = values.indexOf(Math.max(...values));\n\n// Peak marker keeps the same 16px size (spec requires consistent marker size)\n// but gets a soft halo + glow so the eye lands on the dominant sample first.\nconst scatterData = values.map((v, i) =>\n  i === peakIndex\n    ? {\n        value: v,\n        itemStyle: {\n          color: t.palette[0],\n          borderColor: t.pageBg,\n          borderWidth: 3,\n          shadowBlur: 18,\n          shadowColor: t.palette[0],\n        },\n      }\n    : v,\n);\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: \"stem-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 26 },\n  },\n  tooltip: {\n    trigger: \"axis\",\n    axisPointer: { type: \"line\" },\n    formatter: (params) => {\n      const p = params.find((d) => d.seriesType === \"scatter\") ?? params[0];\n      return `Sample n = ${p.axisValueLabel}<br/>Amplitude = ${p.value.toFixed(4)}`;\n    },\n  },\n  grid: { left: 100, right: 60, top: 100, bottom: 90 },\n  xAxis: {\n    type: \"category\",\n    data: indices,\n    name: \"Sample Index (n)\",\n    nameLocation: \"middle\",\n    nameGap: 40,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    axisLabel: { color: t.inkSoft, fontSize: 14, interval: 4 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Amplitude\",\n    nameLocation: \"middle\",\n    nameGap: 65,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      name: \"stem\",\n      type: \"bar\",\n      data: values,\n      barWidth: 3,\n      barGap: \"-100%\",\n      itemStyle: { color: t.palette[0] },\n      silent: true,\n      markLine: {\n        silent: true,\n        symbol: \"none\",\n        lineStyle: { color: t.inkSoft, width: 1.5, type: \"solid\" },\n        label: { show: false },\n        data: [{ yAxis: 0 }],\n      },\n      z: 2,\n    },\n    {\n      name: \"sample value\",\n      type: \"scatter\",\n      data: scatterData,\n      symbolSize: 16,\n      itemStyle: { color: t.palette[0] },\n      z: 3,\n    },\n  ],\n});\n"}