{"spec_id":"lift-curve","library":"muix","language":"javascript","code":"// anyplot.ai\n// lift-curve: Model Lift Chart\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 87/100 | Created: 2026-09-05\n//# anyplot-orientation: landscape\n// anyplot.ai\n// lift-curve: Model Lift Chart\n// Library: MUI X Charts | React | Node 22\n// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.\n// Quality: pending | Created: 2026-09-05\n\nimport { LineChart } from \"@mui/x-charts/LineChart\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\nimport { useXScale, useYScale, useDrawingArea } from \"@mui/x-charts/hooks\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Deterministic LCG — the browser has no seeded RNG, and Math.random() isn't reproducible.\nlet seed = 42;\nfunction nextRandom() {\n seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n return seed / 0x7fffffff;\n}\n\n// Simulated transaction population: fraud flag + model's predicted fraud score.\n// Fraudulent cases skew toward higher scores, but with enough noise that the\n// model isn't perfect — a realistic imperfect classifier. 3% base rate is in\n// line with real-world card-fraud incidence (well under the 8% used earlier).\nconst populationSize = 2000;\nconst fraudRate = 0.03;\nconst trueLabels = [];\nconst modelScores = [];\nfor (let i = 0; i < populationSize; i += 1) {\n const isFraud = nextRandom() < fraudRate ? 1 : 0;\n const signal = isFraud ? 0.75 : 0.3;\n const noise = (nextRandom() - 0.5) * 0.7;\n modelScores.push(Math.min(1, Math.max(0, signal + noise)));\n trueLabels.push(isFraud);\n}\n\n// Rank transactions by predicted score, descending — the order the model would target.\nconst ranked = trueLabels\n .map((label, i) => ({ label, score: modelScores[i] }))\n .sort((a, b) => b.score - a.score);\n\nlet running = 0;\nconst cumulativeFraud = ranked.map((r) => {\n running += r.label;\n return running;\n});\nconst baselineRate = running / populationSize;\n\n// Cumulative lift ratio at each 5% slice of the targeted population.\nconst percentages = Array.from({ length: 20 }, (_, i) => (i + 1) * 5);\nconst liftByPct = percentages.map((pct) => {\n const cutoff = Math.round((pct / 100) * populationSize);\n const targetedRate = cumulativeFraud[cutoff - 1] / cutoff;\n return targetedRate / baselineRate;\n});\n\n// Key deciles called out with their exact lift value, per the spec's\n// suggestion to surface actual values at a few percentiles.\nconst keyPercentiles = [10, 25, 50];\nconst maxLift = liftByPct[0];\n\n// Labels the curve's own points at a few key deciles (must be a LineChart\n// child so useXScale/useYScale resolve against the chart's own axes).\nfunction KeyPercentileLabels() {\n const xScale = useXScale();\n const yScale = useYScale();\n if (!xScale || !yScale) return null;\n\n return (\n \n {keyPercentiles.map((pct) => {\n const idx = percentages.indexOf(pct);\n const value = liftByPct[idx];\n const x = xScale(pct);\n const y = yScale(value);\n // Points near the curve's peak sit close to the top margin — flip\n // the label below the point there so it never runs off-canvas.\n const below = value > maxLift * 0.85;\n return (\n \n {value.toFixed(1)}×\n \n );\n })}\n \n );\n}\n\n// A rotated y-axis title, positioned explicitly to clear the \"×\"-suffixed\n// tick labels — drawn by hand instead of leaning on the built-in `yAxis.label`,\n// whose only offset lever (the deprecated `tickFontSize`) also resizes the\n// tick text itself, forcing a fight between the two concerns.\nfunction YAxisTitle() {\n const { left, top, height } = useDrawingArea();\n const x = left - 78;\n const y = top + height / 2;\n return (\n \n Cumulative lift\n \n );\n}\n\n// --- Chart (default-exported component — the harness mounts it) ------------\nexport default function Chart() {\n return (\n
\n {/* Title rendered in the chart's top margin space */}\n \n Fraud Detection Lift · lift-curve · javascript · muix · anyplot.ai\n