{"spec_id":"audiogram-clinical","library":"echarts","language":"javascript","code":"// anyplot.ai\n// audiogram-clinical: Clinical Audiogram\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-15\n\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — noise-induced high-frequency sensorineural notch (classic 4 kHz dip)\nconst freqLabels = [\"125\", \"250\", \"500\", \"1k\", \"2k\", \"4k\", \"8k\"];\n\n// Right ear (O markers, red) — 4 kHz notch, thresholds in dB HL\nconst rightThresholds = [15, 15, 20, 25, 35, 60, 50];\n// Left ear (X markers, blue) — similar pattern, slightly asymmetric\nconst leftThresholds  = [10, 15, 25, 30, 45, 65, 55];\n\n// Clinical convention: right=red, left=blue (semantic exception from canonical palette order)\nconst RED  = \"#AE3030\";  // Imprint matte red — right ear\nconst BLUE = \"#4467A3\";  // Imprint steel blue — left ear\n\n// Severity grading bands (WHO/ASHA, dB HL ranges)\nconst severityBands = [\n  { name: \"Normal (≤25 dB)\",       yMin: -10, yMax: 25,  fill: \"rgba(0,158,115,0.07)\"   },\n  { name: \"Mild (26–40 dB)\",        yMin: 25,  yMax: 40,  fill: \"rgba(189,130,51,0.09)\"  },\n  { name: \"Moderate (41–55 dB)\",    yMin: 40,  yMax: 55,  fill: \"rgba(221,204,119,0.12)\" },\n  { name: \"Mod. Severe (56–70 dB)\", yMin: 55,  yMax: 70,  fill: \"rgba(196,117,253,0.09)\" },\n  { name: \"Severe (71–90 dB)\",      yMin: 70,  yMax: 90,  fill: \"rgba(174,48,48,0.09)\"   },\n  { name: \"Profound (>90 dB)\",      yMin: 90,  yMax: 120, fill: \"rgba(68,103,163,0.10)\"  },\n];\n\n// X-cross symbol: two diagonal strokes — faithful to clinical audiogram convention\nconst crossPath = \"path://M-8,-8 L8,8 M8,-8 L-8,8\";\n\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n\n  title: {\n    text: \"audiogram-clinical · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 28,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: \"bold\" },\n  },\n\n  legend: {\n    data: [\"Right Ear (O)\", \"Left Ear (X)\"],\n    bottom: 32,\n    itemGap: 40,\n    textStyle: { color: t.ink, fontSize: 16 },\n  },\n\n  grid: {\n    left: 100,\n    right: 50,\n    top: 100,\n    bottom: 140,\n  },\n\n  xAxis: {\n    type: \"category\",\n    data: freqLabels,\n    name: \"Frequency (Hz)\",\n    nameLocation: \"middle\",\n    nameGap: 52,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n\n  yAxis: {\n    type: \"value\",\n    inverse: true,\n    min: -10,\n    max: 120,\n    interval: 10,\n    name: \"Hearing Level (dB HL)\",\n    nameLocation: \"middle\",\n    nameGap: 68,\n    nameRotate: 90,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14, formatter: \"{value}\" },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n\n  series: [\n    {\n      name: \"Right Ear (O)\",\n      type: \"line\",\n      data: rightThresholds,\n      symbol: \"circle\",\n      symbolSize: 16,\n      lineStyle: { color: RED, width: 2.5 },\n      itemStyle: { color: \"transparent\", borderColor: RED, borderWidth: 2.5 },\n      markArea: {\n        silent: true,\n        itemStyle: { borderWidth: 0 },\n        data: severityBands.map(b => [\n          {\n            yAxis: b.yMin,\n            itemStyle: { color: b.fill },\n            label: {\n              show: true,\n              position: \"insideTopRight\",\n              color: t.inkSoft,\n              fontSize: 12,\n              formatter: b.name,\n            },\n          },\n          { yAxis: b.yMax },\n        ]),\n      },\n    },\n    {\n      name: \"Left Ear (X)\",\n      type: \"line\",\n      data: leftThresholds,\n      symbol: crossPath,\n      symbolSize: 20,\n      lineStyle: { color: BLUE, width: 2.5, type: \"dashed\" },\n      itemStyle: { color: \"transparent\", borderColor: BLUE, borderWidth: 2.5 },\n    },\n  ],\n});\n"}