{"spec_id":"boxen-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// boxen-basic: Basic Boxen Plot (Letter-Value Plot)\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-09-01\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Deterministic PRNG (LCG) + Box-Muller normal ---------------------------\nfunction makeRng(seed) {\n  let state = seed >>> 0;\n  return function uniform() {\n    state = (state * 1664525 + 1013904223) >>> 0;\n    return state / 4294967296;\n  };\n}\nconst rng = makeRng(20260901);\nfunction normal() {\n  const u1 = Math.max(rng(), 1e-12);\n  const u2 = rng();\n  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n}\nfunction quantile(sorted, p) {\n  const idx = p * (sorted.length - 1);\n  const lo = Math.floor(idx);\n  const hi = Math.ceil(idx);\n  const frac = idx - lo;\n  return sorted[lo] + (sorted[hi] - sorted[lo]) * frac;\n}\n\n// --- Data: simulated request-latency distributions per endpoint ------------\nconst SAMPLES_PER_ENDPOINT = 2000;\nconst endpoints = [\n  { name: \"Auth\", mu: Math.log(80), sigma: 0.32 },\n  { name: \"Search\", mu: Math.log(150), sigma: 0.55 },\n  { name: \"Checkout\", mu: Math.log(220), sigma: 0.4 },\n  { name: \"Recommend\", mu: Math.log(95), sigma: 0.62 },\n];\nconst categories = endpoints.map((e) => e.name);\n\nconst distributions = endpoints.map((endpoint) => {\n  const samples = [];\n  for (let i = 0; i < SAMPLES_PER_ENDPOINT; i++) {\n    samples.push(Math.exp(endpoint.mu + endpoint.sigma * normal()));\n  }\n  samples.sort((a, b) => a - b);\n  return samples;\n});\n\n// Letter values: successively narrower boxes covering wider tail coverage.\nconst levelDefs = [\n  { depth: 0.25, width: 70, opacity: 1.0, label: \"Quartiles (50%)\" },\n  { depth: 0.125, width: 58, opacity: 0.82, label: \"Eighths (75%)\" },\n  { depth: 0.0625, width: 46, opacity: 0.64, label: \"Sixteenths (87.5%)\" },\n  { depth: 0.03125, width: 34, opacity: 0.48, label: \"32nds (93.75%)\" },\n  { depth: 0.015625, width: 22, opacity: 0.34, label: \"64ths (96.9%)\" },\n];\n\nconst deepest = levelDefs[levelDefs.length - 1];\nconst boxColor = t.palette[0];\n\nfunction selectOutliers(sorted, lowBound, highBound, maxPerSide) {\n  const below = sorted.filter((v) => v < lowBound);\n  const above = sorted.filter((v) => v > highBound);\n  const picked = [];\n  const step = (arr) => Math.max(1, Math.ceil(arr.length / maxPerSide));\n  for (let i = 0; i < below.length; i += step(below)) picked.push(below[i]);\n  for (let i = 0; i < above.length; i += step(above)) picked.push(above[i]);\n  return picked;\n}\n\n// --- Box series: one floating-column pair (invisible base + shaded box) ----\n// per letter-value level, stacked per-category, grouping disabled so all\n// levels share the same x position — narrower widths stack visually on top,\n// producing the classic nested \"stepped\" letter-value silhouette.\nconst boxSeries = [];\nlevelDefs.forEach((level, levelIndex) => {\n  const lows = distributions.map((sorted) => quantile(sorted, level.depth));\n  const highs = distributions.map((sorted) => quantile(sorted, 1 - level.depth));\n  boxSeries.push({\n    type: \"column\",\n    name: `${level.label} base`,\n    data: lows,\n    stack: `level${levelIndex}`,\n    grouping: false,\n    pointPlacement: 0,\n    pointWidth: level.width,\n    color: \"transparent\",\n    borderWidth: 0,\n    enableMouseTracking: false,\n    showInLegend: false,\n  });\n  boxSeries.push({\n    type: \"column\",\n    name: level.label,\n    data: highs.map((h, i) => h - lows[i]),\n    stack: `level${levelIndex}`,\n    grouping: false,\n    pointPlacement: 0,\n    pointWidth: level.width,\n    color: Highcharts.color(boxColor).setOpacity(level.opacity).get(\"rgba\"),\n    borderWidth: 1,\n    borderColor: t.pageBg,\n    borderRadius: 0,\n  });\n});\n\n// --- Outliers: points beyond the deepest letter value -----------------------\nconst outlierPoints = [];\ndistributions.forEach((sorted, categoryIndex) => {\n  const lowBound = quantile(sorted, deepest.depth);\n  const highBound = quantile(sorted, 1 - deepest.depth);\n  const picked = selectOutliers(sorted, lowBound, highBound, 10);\n  picked.forEach((value) => {\n    outlierPoints.push({ x: categoryIndex + (rng() - 0.5) * 0.55, y: value });\n  });\n});\n\n// --- Median markers ----------------------------------------------------------\nconst medianPoints = distributions.map((sorted, categoryIndex) => ({\n  x: categoryIndex,\n  y: quantile(sorted, 0.5),\n}));\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"column\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  title: {\n    text: \"boxen-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: `Simulated request latency · n = ${SAMPLES_PER_ENDPOINT.toLocaleString()} per endpoint`,\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineWidth: 0,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: { text: \"Endpoint\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n  },\n  yAxis: {\n    title: { text: \"Response Time (ms)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false },\n    column: { pointPadding: 0, groupPadding: 0.3 },\n  },\n  series: [\n    ...boxSeries,\n    {\n      type: \"scatter\",\n      name: \"Outliers\",\n      data: outlierPoints,\n      color: Highcharts.color(t.inkSoft).setOpacity(0.75).get(\"rgba\"),\n      marker: { radius: 4, lineWidth: 0 },\n      zIndex: levelDefs.length + 1,\n    },\n    {\n      type: \"scatter\",\n      name: \"Median\",\n      data: medianPoints,\n      color: t.ink,\n      marker: {\n        symbol: \"diamond\",\n        radius: 7,\n        lineWidth: 1,\n        lineColor: t.pageBg,\n      },\n      zIndex: levelDefs.length + 2,\n    },\n  ],\n});\n"}