{"spec_id":"spectrum-nmr","library":"echarts","language":"javascript","code":"// anyplot.ai\n// spectrum-nmr: NMR Spectrum (Nuclear Magnetic Resonance)\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-03\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: synthetic 1H NMR of Ethanol (CH3-CH2-OH) at 300 MHz ---\n// CH3 triplet ~1.17 ppm, CH2 quartet ~3.69 ppm, OH broad singlet ~2.61 ppm, TMS at 0.00\nconst nPts = 3001;\nconst ppmLo = -0.5;\nconst ppmHi = 4.5;\nconst J = 7 / 300; // 7 Hz coupling constant → 0.0233 ppm at 300 MHz\n\nfunction lorentz(x, x0, amp, hw) {\n  return amp * hw * hw / ((x - x0) * (x - x0) + hw * hw);\n}\n\nconst lw = 0.008; // sharp Lorentzian linewidth (ppm half-width)\nconst specData = [];\nfor (let i = 0; i < nPts; i++) {\n  const ppm = ppmLo + i * (ppmHi - ppmLo) / (nPts - 1);\n  let y = 0;\n  // TMS reference singlet (0.00 ppm)\n  y += lorentz(ppm, 0.00, 20, lw);\n  // CH3 triplet: 1:2:1 intensity ratio, J = 7 Hz\n  y += lorentz(ppm, 1.17 - J, 40, lw);\n  y += lorentz(ppm, 1.17,     80, lw);\n  y += lorentz(ppm, 1.17 + J, 40, lw);\n  // OH broad singlet (exchangeable proton, broadened by H-bonding)\n  y += lorentz(ppm, 2.61, 28, 0.055);\n  // CH2 quartet: 1:3:3:1 intensity ratio, J = 7 Hz\n  y += lorentz(ppm, 3.69 - 1.5 * J, 26, lw);\n  y += lorentz(ppm, 3.69 - 0.5 * J, 78, lw);\n  y += lorentz(ppm, 3.69 + 0.5 * J, 78, lw);\n  y += lorentz(ppm, 3.69 + 1.5 * J, 26, lw);\n  specData.push([parseFloat(ppm.toFixed(4)), parseFloat(y.toFixed(3))]);\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\n  title: {\n    text: \"spectrum-nmr · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: \"500\" },\n  },\n\n  grid: { left: 90, right: 60, top: 110, bottom: 90 },\n\n  xAxis: {\n    type: \"value\",\n    inverse: true,\n    min: ppmLo,\n    max: ppmHi,\n    interval: 1,\n    name: \"Chemical Shift (ppm)\",\n    nameLocation: \"middle\",\n    nameGap: 55,\n    nameTextStyle: { color: t.inkSoft, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: true, lineStyle: { color: t.grid, type: \"dashed\" } },\n  },\n\n  yAxis: {\n    type: \"value\",\n    name: \"Intensity (a.u.)\",\n    nameLocation: \"middle\",\n    nameGap: 50,\n    nameTextStyle: { color: t.inkSoft, fontSize: 16 },\n    min: -4,\n    max: 96,\n    axisLabel: { show: false },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n\n  series: [\n    {\n      type: \"line\",\n      data: specData,\n      showSymbol: false,\n      lineStyle: { color: t.palette[0], width: 2 },\n      areaStyle: {\n        color: {\n          type: \"linear\",\n          x: 0, y: 0, x2: 0, y2: 1,\n          colorStops: [\n            { offset: 0, color: t.palette[0] + \"30\" },\n            { offset: 1, color: t.palette[0] + \"06\" },\n          ],\n        },\n      },\n      markPoint: {\n        symbol: \"circle\",\n        symbolSize: 7,\n        itemStyle: { color: t.palette[0] },\n        label: {\n          show: true,\n          position: \"top\",\n          distance: 10,\n          fontSize: 13,\n          fontWeight: \"500\",\n          color: t.ink,\n          formatter: \"{b}\",\n        },\n        data: [\n          { name: \"TMS (0.00 ppm)\", coord: [0.00, 20] },\n          { name: \"CH₃ (1.17 ppm)\", coord: [1.17, 80] },\n          { name: \"OH (2.61 ppm)\", coord: [2.61, 28] },\n          { name: \"CH₂ (3.69 ppm)\", coord: [3.69 - 0.5 * J, 78] },\n        ],\n      },\n    },\n  ],\n});\n"}