{"spec_id":"rug-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// rug-basic: Basic Rug Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 93/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic, fixed-seed LCG) ------------------------\n// Daily screen time (hours) for 350 survey respondents: a light-use cluster\n// and a heavy-use cluster with a visible gap between them, plus a handful of\n// high-end outliers — exactly the clustering/gap/outlier pattern a rug plot\n// reveals that a histogram's bin width would smooth over.\nlet seed = 42;\nfunction lcg() {\n  seed = (seed * 1664525 + 1013904223) % 4294967296;\n  return seed / 4294967296;\n}\nfunction gaussian(mean, sd) {\n  const u1 = Math.max(lcg(), 1e-9);\n  const u2 = lcg();\n  const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n  return mean + z * sd;\n}\n\nconst screenTimeHours = [];\nfor (let i = 0; i < 220; i++) screenTimeHours.push(Math.max(0.1, gaussian(2.0, 0.6)));\nfor (let i = 0; i < 130; i++) screenTimeHours.push(Math.max(0.1, gaussian(6.4, 0.9)));\n[9.6, 10.3, 11.1, 12.4, 13.0, 9.9].forEach((v) => screenTimeHours.push(v));\n\nconst rugData = screenTimeHours.map((v) => [v, 1]);\n\n// --- KDE (simple Gaussian kernel density estimate) --------------------------\n// Pairs the rug with a density trace: a technique genuinely distinctive to a\n// dual-pane Highcharts layout, and a much better use of the vertical canvas\n// than the rug ticks alone.\nconst kdeBandwidth = 0.55;\nconst kdeCurve = [];\nfor (let x = 0; x <= 13.5; x += 0.1) {\n  let sum = 0;\n  for (const v of screenTimeHours) {\n    const u = (x - v) / kdeBandwidth;\n    sum += Math.exp(-0.5 * u * u);\n  }\n  const density = sum / (screenTimeHours.length * kdeBandwidth * Math.sqrt(2 * Math.PI));\n  kdeCurve.push([Number(x.toFixed(2)), density]);\n}\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: { backgroundColor: \"transparent\", animation: false,\n           style: { fontFamily: \"inherit\" } },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: { text: \"rug-basic · javascript · highcharts · anyplot.ai\",\n           style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" } },\n  subtitle: { text: \"Daily screen time reported by 356 survey respondents\",\n              style: { color: t.inkSoft, fontSize: \"14px\" } },\n  xAxis: {\n    title: { text: \"Daily Screen Time (hours)\",\n             style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft, tickColor: t.inkSoft, gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    min: 0, tickInterval: 2, minPadding: 0.02, maxPadding: 0.04,\n    plotBands: [{\n      from: 3.48, to: 4.59,\n      color: Highcharts.color(t.inkSoft).setOpacity(0.08).get(\"rgba\"),\n      label: { text: \"Gap\", align: \"center\", y: 16,\n               style: { color: t.inkSoft, fontSize: \"12px\" } },\n    }, {\n      from: 9.4, to: 13.4,\n      color: Highcharts.color(t.palette[0]).setOpacity(0.1).get(\"rgba\"),\n      label: { text: \"Outliers\", align: \"center\", y: 16,\n               style: { color: t.inkSoft, fontSize: \"12px\" } },\n    }],\n  },\n  // Two stacked panes on one xAxis: the density curve fills the top ~72% of\n  // the canvas, the rug strip owns the bottom ~22% — no more blank dead zone.\n  yAxis: [{\n    visible: false,\n    top: \"0%\", height: \"72%\",\n    min: 0,\n  }, {\n    visible: false,\n    top: \"78%\", height: \"22%\",\n    min: 0, max: 1.2,\n  }],\n  legend: { enabled: false },\n  tooltip: {\n    backgroundColor: t.elevatedBg, borderWidth: 0,\n    style: { color: t.ink, fontSize: \"13px\" },\n    headerFormat: \"\",\n    pointFormatter: function () {\n      return \"Screen time: <b>\" + this.x.toFixed(1) + \" h</b>\";\n    },\n  },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      pointWidth: 4,\n      pointPadding: 0,\n      groupPadding: 0,\n      borderWidth: 0,\n      color: Highcharts.color(t.palette[0]).setOpacity(0.55).get(\"rgba\"),\n      states: { hover: { brightness: 0.1 } },\n    },\n    areaspline: {\n      lineWidth: 2,\n      fillOpacity: 0.18,\n      marker: { enabled: false },\n      enableMouseTracking: false,\n    },\n  },\n  series: [\n    { name: \"Density\", type: \"areaspline\", yAxis: 0, color: t.palette[0], data: kdeCurve },\n    { name: \"Respondent\", type: \"column\", yAxis: 1, data: rugData },\n  ],\n});\n"}