{"spec_id":"histogram-density","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// histogram-density: Density Histogram\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// mulberry32 — small, dependency-free, seeded PRNG (Math.random() is not seeded).\nfunction mulberry32(seed) {\n  let a = seed;\n  return function () {\n    a |= 0;\n    a = (a + 0x6d2b79f5) | 0;\n    let z = Math.imul(a ^ (a >>> 15), 1 | a);\n    z = (z + Math.imul(z ^ (z >>> 7), 61 | z)) ^ z;\n    return ((z ^ (z >>> 14)) >>> 0) / 4294967296;\n  };\n}\nconst rand = mulberry32(42);\n\n// Box-Muller transform -> approximately normal samples.\nfunction nextNormal(mean, sd) {\n  const u1 = Math.max(rand(), 1e-12);\n  const u2 = rand();\n  const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n  return mean + sd * z;\n}\n\nconst MEAN = 10.0; // target bolt diameter, mm\nconst SD = 0.05; // machining process variability, mm\nconst N = 600;\nconst diameters = Array.from({ length: N }, () => nextNormal(MEAN, SD));\n\n// --- Histogram binning (density-normalized so total bar area = 1) ----------\nconst NUM_BINS = 24;\nconst dataMin = Math.min(...diameters);\nconst dataMax = Math.max(...diameters);\nconst binWidth = (dataMax - dataMin) / NUM_BINS;\nconst counts = new Array(NUM_BINS).fill(0);\ndiameters.forEach((value) => {\n  const bin = Math.min(NUM_BINS - 1, Math.floor((value - dataMin) / binWidth));\n  counts[bin] += 1;\n});\nconst sampleMean = diameters.reduce((sum, v) => sum + v, 0) / N;\nconst histogramData = counts.map((count, i) => {\n  const center = dataMin + (i + 0.5) * binWidth;\n  const density = count / (N * binWidth);\n  return [center, density];\n});\n\n// --- Theoretical normal PDF overlay (goodness-of-fit reference) ------------\nfunction normalPdf(x, mean, sd) {\n  return (\n    Math.exp(-0.5 * ((x - mean) / sd) ** 2) / (sd * Math.sqrt(2 * Math.PI))\n  );\n}\nconst CURVE_POINTS = 120;\nconst curveMin = MEAN - 4 * SD;\nconst curveMax = MEAN + 4 * SD;\nconst pdfCurve = Array.from({ length: CURVE_POINTS }, (_, i) => {\n  const x = curveMin + (i / (CURVE_POINTS - 1)) * (curveMax - curveMin);\n  return [x, normalPdf(x, MEAN, SD)];\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  colors: t.palette,\n  title: {\n    text: \"histogram-density · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    type: \"linear\",\n    title: {\n      text: \"Bolt Diameter (mm)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineWidth: 0,\n    tickWidth: 0,\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      format: \"{value:.2f}\",\n    },\n    plotLines: [\n      {\n        value: sampleMean,\n        color: t.inkSoft,\n        width: 1.5,\n        dashStyle: \"ShortDot\",\n        zIndex: 5,\n        label: {\n          text: `Mean ${sampleMean.toFixed(3)} mm`,\n          rotation: 0,\n          align: \"center\",\n          verticalAlign: \"top\",\n          y: 8,\n          backgroundColor: t.pageBg,\n          borderRadius: 3,\n          padding: 4,\n          style: { color: t.inkSoft, fontSize: \"13px\", fontWeight: \"600\" },\n        },\n      },\n    ],\n  },\n  yAxis: {\n    title: { text: \"Density\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineWidth: 0,\n    min: 0,\n    gridLineColor: t.grid,\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  tooltip: { valueDecimals: 3 },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      pointRange: binWidth,\n      pointPadding: 0,\n      groupPadding: 0,\n      borderWidth: 1,\n      borderColor: t.pageBg,\n    },\n  },\n  series: [\n    {\n      name: \"Empirical density\",\n      type: \"column\",\n      data: histogramData,\n      color: t.palette[0],\n    },\n    {\n      name: \"Normal PDF (fit)\",\n      type: \"areaspline\",\n      data: pdfCurve,\n      color: t.ink,\n      fillOpacity: 0.08,\n      dashStyle: \"Dash\",\n      lineWidth: 2.5,\n      marker: { enabled: false },\n      enableMouseTracking: false,\n    },\n  ],\n});\n"}