{"spec_id":"density-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// density-basic: Basic Density Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 94/100 | Created: 2026-08-24\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: reaction times (ms) in a cognitive test, right-skewed ----------\nlet seed = 42;\nfunction rand() {\n  seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n  return seed / 0x7fffffff;\n}\nfunction exponential(mean) {\n  return -Math.log(1 - rand()) * mean;\n}\n\nconst sampleSize = 400;\nconst gammaShape = 4;\nconst componentMean = 45;\nconst baselineMs = 180;\nconst reactionTimes = Array.from({ length: sampleSize }, () => {\n  let total = baselineMs;\n  for (let i = 0; i < gammaShape; i++) total += exponential(componentMean);\n  return total;\n});\n\n// --- Kernel density estimate (Gaussian kernel, Silverman bandwidth) -------\nfunction mean(arr) {\n  return arr.reduce((a, b) => a + b, 0) / arr.length;\n}\nfunction std(arr) {\n  const m = mean(arr);\n  const variance = arr.reduce((a, b) => a + (b - m) ** 2, 0) / (arr.length - 1);\n  return Math.sqrt(variance);\n}\nfunction gaussianPdf(z) {\n  return Math.exp(-0.5 * z * z) / Math.sqrt(2 * Math.PI);\n}\n\nconst n = reactionTimes.length;\nconst bandwidth = 1.06 * std(reactionTimes) * n ** (-1 / 5);\nconst dataMin = Math.min(...reactionTimes);\nconst dataMax = Math.max(...reactionTimes);\nconst gridPoints = 200;\nconst gridMin = dataMin - 3 * bandwidth;\nconst gridMax = dataMax + 3 * bandwidth;\nconst step = (gridMax - gridMin) / (gridPoints - 1);\n\nconst densityCurve = [];\nfor (let i = 0; i < gridPoints; i++) {\n  const x = gridMin + i * step;\n  const density =\n    reactionTimes.reduce((sum, xi) => sum + gaussianPdf((x - xi) / bandwidth), 0) /\n    (n * bandwidth);\n  densityCurve.push([x, density]);\n}\n\nconst maxDensity = Math.max(...densityCurve.map((p) => p[1]));\nconst rugY = -maxDensity * 0.06;\nconst rugData = reactionTimes.map((v) => [v, rugY]);\nconst peakPoint = densityCurve.reduce((best, p) => (p[1] > best[1] ? p : best));\nconst peakX = peakPoint[0];\n\n// --- Chart -------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"areaspline\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"density-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: { text: \"Reaction Time (ms)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineWidth: 0,\n    tickWidth: 0,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [\n      {\n        value: peakX,\n        color: t.inkSoft,\n        dashStyle: \"Dash\",\n        width: 1.5,\n        zIndex: 5,\n        label: {\n          text: `Peak ≈ ${Math.round(peakX)} ms`,\n          style: { color: t.inkSoft, fontSize: \"13px\" },\n          align: \"left\",\n          x: 6,\n          y: 16,\n        },\n      },\n    ],\n  },\n  yAxis: {\n    min: -maxDensity * 0.09,\n    title: { text: \"Probability Density\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineWidth: 0,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [{ value: 0, color: t.inkSoft, width: 1, zIndex: 1 }],\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    areaspline: {\n      lineWidth: 3,\n      marker: { enabled: false },\n    },\n    scatter: {\n      marker: { radius: 3, symbol: \"circle\" },\n      opacity: 0.5,\n    },\n  },\n  series: [\n    {\n      type: \"areaspline\",\n      name: \"Density\",\n      data: densityCurve,\n      color: t.palette[0],\n      fillColor: {\n        linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },\n        stops: [\n          [0, Highcharts.color(t.palette[0]).setOpacity(0).get(\"rgba\")],\n          [0.45, Highcharts.color(t.palette[0]).setOpacity(0.35).get(\"rgba\")],\n          [0.55, Highcharts.color(t.palette[0]).setOpacity(0.35).get(\"rgba\")],\n          [1, Highcharts.color(t.palette[0]).setOpacity(0).get(\"rgba\")],\n        ],\n      },\n    },\n    { type: \"scatter\", name: \"Observations\", data: rugData, color: t.palette[0] },\n  ],\n});\n"}