{"spec_id":"strip-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// strip-basic: Basic Strip Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 88/100 | Created: 2026-08-05\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic LCG) -----------------------------------\nlet seed = 42;\nfunction nextUniform() {\n  seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n  return seed / 0x7fffffff;\n}\nfunction nextGaussian() {\n  const u1 = Math.max(nextUniform(), 1e-9);\n  const u2 = nextUniform();\n  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n}\nfunction hexToRgba(hex, alpha) {\n  const r = parseInt(hex.slice(1, 3), 16);\n  const g = parseInt(hex.slice(3, 5), 16);\n  const b = parseInt(hex.slice(5, 7), 16);\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\nconst groups = [\n  { name: \"Placebo\", mean: 62, sd: 11 },\n  { name: \"Low Dose\", mean: 48, sd: 10 },\n  { name: \"Standard Dose\", mean: 35, sd: 9 },\n  { name: \"High Dose\", mean: 26, sd: 8 },\n];\nconst pointsPerGroup = 45;\n\nconst groupData = groups.map((group) => {\n  const values = Array.from({ length: pointsPerGroup }, () => {\n    const responseMinutes = Math.max(5, group.mean + nextGaussian() * group.sd);\n    return Math.round(responseMinutes * 10) / 10;\n  });\n  const mean = values.reduce((sum, value) => sum + value, 0) / values.length;\n  return { name: group.name, values, mean };\n});\n\nconst series = groupData.map((group, groupIndex) => ({\n  name: group.name,\n  color: t.palette[groupIndex],\n  showInLegend: false,\n  marker: {\n    fillColor: hexToRgba(t.palette[groupIndex], 0.6),\n    lineWidth: 1,\n    lineColor: t.pageBg,\n  },\n  data: group.values.map((value) => [groupIndex, value]),\n}));\n\nconst meanSeries = {\n  name: \"Group Mean\",\n  showInLegend: true,\n  color: t.ink,\n  jitter: { x: 0, y: 0 },\n  marker: {\n    symbol: \"diamond\",\n    radius: 8,\n    fillColor: t.ink,\n    lineWidth: 2,\n    lineColor: t.pageBg,\n  },\n  dataLabels: {\n    enabled: true,\n    format: \"{y:.1f} min\",\n    y: -14,\n    style: { color: t.ink, fontSize: \"12px\", fontWeight: \"600\", textOutline: \"none\" },\n  },\n  data: groupData.map((group, groupIndex) => [\n    groupIndex,\n    Math.round(group.mean * 10) / 10,\n  ]),\n};\n\n// --- Chart -----------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"scatter\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"strip-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: groups.map((group) => group.name),\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: {\n      text: \"Time to Symptom Relief (minutes)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: {\n    enabled: true,\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false },\n    scatter: {\n      jitter: { x: 0.3, y: 0 },\n      marker: { radius: 6, symbol: \"circle\" },\n    },\n  },\n  series: [...series, meanSeries],\n});\n"}