{"spec_id":"volcano-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// volcano-basic: Volcano Plot for Statistical Significance\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-09-09\n\nconst t = window.ANYPLOT_TOKENS;\n// ANYPLOT_TOKENS has no \"muted\" anchor — derive it per default-style-guide.md\n// theme-adaptive chrome table (INK_MUTED: #6B6A63 light / #A8A79F dark).\nconst MUTED = t.theme === \"dark\" ? \"#A8A79F\" : \"#6B6A63\";\n\n// --- Data (in-memory, deterministic LCG) ------------------------------------\n// Simulated differential gene expression results (RNA-seq treatment vs. control).\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1103515245 + 12345) & 0x7fffffff;\n    return state / 0x7fffffff;\n  };\n}\nconst rand = lcg(42);\nconst randn = () => {\n  const u1 = Math.max(rand(), 1e-9);\n  const u2 = rand();\n  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);\n};\n\nconst FC_THRESHOLD = 1; // log2 fold change cutoff (2-fold)\nconst P_THRESHOLD = 1.3; // -log10(0.05)\n\nconst genePrefixes = [\"BRCA\", \"TP53\", \"MYC\", \"EGFR\", \"KRAS\", \"PTEN\", \"AKT\", \"PIK3\", \"VEGF\", \"CDK\"];\nconst geneCount = 600;\nconst downregulated = [];\nconst upregulated = [];\nconst nonsignificant = [];\n\nfor (let i = 0; i < geneCount; i++) {\n  const logFc = randn() * 1.4;\n  const noise = Math.abs(randn()) * 0.9;\n  // Genes with larger |fold change| tend to carry more significance (realistic funnel shape).\n  const negLog10P = Math.max(0.02, Math.abs(logFc) * 1.6 + noise);\n  const label = `${genePrefixes[i % genePrefixes.length]}${i}`;\n  const point = { x: Number(logFc.toFixed(3)), y: Number(negLog10P.toFixed(3)), name: label };\n\n  const isSignificant = negLog10P >= P_THRESHOLD && Math.abs(logFc) >= FC_THRESHOLD;\n  if (isSignificant && logFc > 0) {\n    upregulated.push(point);\n  } else if (isSignificant && logFc < 0) {\n    downregulated.push(point);\n  } else {\n    nonsignificant.push(point);\n  }\n}\n\n// Top significant features by combined score, labeled directly on the chart.\nconst topLabeled = [...upregulated, ...downregulated]\n  .sort((a, b) => Math.abs(b.x) * b.y - Math.abs(a.x) * a.y)\n  .slice(0, 6);\nconst topLabelSet = new Set(topLabeled.map((p) => p.name));\n\nconst addDataLabel = (p) => ({\n  ...p,\n  dataLabels: topLabelSet.has(p.name)\n    ? { enabled: true, format: \"{point.name}\", style: { color: t.ink, fontSize: \"12px\", fontWeight: \"500\", textOutline: \"none\" } }\n    : undefined,\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: [MUTED, t.palette[2], t.palette[4]],\n  title: {\n    text: \"volcano-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"RNA-seq differential expression: treatment vs. control\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    title: { text: \"log2 fold change\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [\n      { value: -FC_THRESHOLD, color: t.inkSoft, dashStyle: \"Dash\", width: 1.5, zIndex: 3 },\n      { value: FC_THRESHOLD, color: t.inkSoft, dashStyle: \"Dash\", width: 1.5, zIndex: 3 },\n    ],\n  },\n  yAxis: {\n    title: { text: \"-log10(p-value)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    plotLines: [{ value: P_THRESHOLD, color: t.inkSoft, dashStyle: \"Dash\", width: 1.5, zIndex: 3 }],\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, marker: { radius: 4, symbol: \"circle\", lineWidth: 0 } },\n    scatter: { opacity: 0.65 },\n  },\n  tooltip: { enabled: false },\n  series: [\n    { name: \"Not significant\", data: nonsignificant.map(addDataLabel) },\n    { name: \"Down-regulated\", data: downregulated.map(addDataLabel) },\n    { name: \"Up-regulated\", data: upregulated.map(addDataLabel) },\n  ],\n});\n"}