[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":-5,"_37":38},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68a1f57da66c8191a4edf2fdad7d0657","versionInt","title","Ate & Selection Bias — Interactive Tutorial (iv/rdd Bridge)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport {\n BarChart,\n Bar,\n XAxis,\n YAxis,\n Tooltip,\n CartesianGrid,\n ResponsiveContainer,\n ScatterChart,\n Scatter,\n Legend,\n ReferenceLine,\n LineChart,\n Line,\n} from \"recharts\";\n\n// ---------- Utility: seeded RNG + helpers ----------\nfunction mulberry32(a) {\n return function () {\n let t = (a += 0x6d2b79f5);\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\nfunction randn(rng) {\n // Box–Muller\n const u = Math.max(rng(), 1e-10);\n const v = Math.max(rng(), 1e-10);\n return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);\n}\nconst logistic = (x) => 1 / (1 + Math.exp(-x));\nconst fmt1 = (x) => (Number.isFinite(x) ? x.toFixed(1) : \"NaN\");\n\n// ---------- Small UI bits ----------\nfunction SliderRow({ label, value, setValue, min, max, step, fmt = (d) => d }) {\n return (\n

{label}

\n setValue(Number(e.target.value))}\n className=\"w-72\"\n />\n

{fmt(value)}

\n );\n}\n\nfunction Stat({ name, value, note }) {\n return (\n

{name}

{value}

\n {note &&

{note}

}\n

\n );\n}\n\nfunction Pill({ children }) {\n return (\n \n {children}\n \n );\n}\n\nfunction MathLine({ children }) {\n return (\n

\n {children}\n

\n );\n}\n\n// ---------- Main Component ----------\nexport default function ATESelectionBiasPlayground() {\n // Core controls\n const [seed, setSeed] = useState(42);\n const [n, setN] = useState(600);\n const [tau, setTau] = useState(2); // homogeneous ATE\n const [conf, setConf] = useState(1.2); // strength of confounder U on both D and Y0\n const [sigma, setSigma] = useState(1.0); // noise level\n\n const [randomize, setRandomize] = useState(false); // RCT toggle\n\n // Selection pattern: cream-skimming (higher U → more D) vs triage (higher U → less D)\n const [selMode, setSelMode] = useState(\"cream\");\n\n // Numeric example controls\n const [exampleType, setExampleType] = useState(\"pos\"); // 'pos' | 'neg' | 'rct'\n\n // Generate synthetic panel (homogeneous effects)\n const data = useMemo(() => {\n const rng = mulberry32(seed);\n // latent confounder U ~ N(0,1)\n const U = Array.from({ length: n }, () => randn(rng));\n\n // potential outcomes\n const base = 5; // intercept for readability\n const bU = conf; // confounder magnitude on Y0\n\n const Y0 = U.map((u) => base + bU * u + sigma * randn(rng));\n const Y1 = U.map((u, i) => Y0[i] + tau); // HOMOGENEOUS EFFECT τ\n\n // Assignment\n let D = new Array(n).fill(0);\n\n if (randomize) {\n // Pure RCT: D independent of U\n D = Array.from({ length: n }, () => (rng() < 0.5 ? 1 : 0));\n } else {\n // Selection on U: higher U -> more likely treated\n const dir = selMode === \"cream\" ? 1 : -1;\n const gamma1 = dir * 1.2 * conf; // strength into propensity with chosen direction\n const gamma0 = 0.0; // symmetric around 0\n D = U.map((u) => (rng() < logistic(gamma0 + gamma1 * u) ? 1 : 0));\n }\n\n const Y = D.map((d, i) => (d ? Y1[i] : Y0[i]));\n\n // Pack rows\n const rows = Array.from({ length: n }, (_, i) => ({\n i,\n U: U[i],\n D: D[i],\n Y0: Y0[i],\n Y1: Y1[i],\n Y: Y[i],\n }));\n\n return { rows };\n }, [seed, n, tau, conf, sigma, randomize, selMode]);\n\n // Metrics (homogeneous effects)\n const metrics = useMemo(() => {\n const rows = data.rows;\n const treated = rows.filter((r) => r.D === 1);\n const control = rows.filter((r) => r.D === 0);\n\n const mean = (arr) => (arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : NaN);\n\n const naive = mean(treated.map((r) => r.Y)) - mean(control.map((r) => r.Y));\n const ATE = mean(rows.map((r) => r.Y1 - r.Y0)); // equals τ under homogeneity\n const selBias = mean(treated.map((r) => r.Y0)) - mean(control.map((r) => r.Y0));\n const identityGap = naive - (ATE + selBias);\n\n return { naive, ATE, selBias, identityGap };\n }, [data]);\n\n // Charts data\n const barData = useMemo(() => {\n const arr = [\n { name: \"Naïve diff\", value: metrics.naive },\n { name: \"ATE\", value: metrics.ATE },\n { name: \"Selection bias\", value: metrics.selBias },\n { name: \"ATE + bias\", value: metrics.ATE + metrics.selBias },\n ];\n return arr;\n }, [metrics]);\n\n const scatterData = useMemo(() => {\n return data.rows.map((r) => ({ U: r.U, Y: r.Y, D: r.D ? \"Treated\" : \"Control\" }));\n }, [data]);\n\n // approximate p(D=1|U) nonparametrically by binning U\n const propensityPreview = useMemo(() => {\n const bins = 20;\n const rows = data.rows;\n const uMin = Math.min(...rows.map((r) => r.U));\n const uMax = Math.max(...rows.map((r) => r.U));\n const width = (uMax - uMin) / bins;\n const out = [];\n for (let b = 0; b < bins; b++) {\n const lo = uMin + b * width;\n const hi = lo + width;\n const slice = rows.filter((r) => r.U >= lo && r.U < hi);\n if (!slice.length) continue;\n const p = slice.reduce((a, r) => a + r.D, 0) / slice.length;\n out.push({ Ubin: (lo + hi) / 2, p });\n }\n return out;\n }, [data]);\n\n // Small, fixed numerical example (homogeneous effects)\n const example = useMemo(() => {\n const t = tau;\n let rows;\n let label, econ;\n if (exampleType === \"pos\") {\n // Positive selection: treated have higher baseline Y0\n rows = [\n { id: \"A\", D: 1, Y0: 7, Y1: 7 + t },\n { id: \"B\", D: 1, Y0: 6, Y1: 6 + t },\n { id: \"C\", D: 0, Y0: 4, Y1: 4 + t },\n { id: \"D\", D: 0, Y0: 5, Y1: 5 + t },\n ];\n label = \"Positive selection (cream‑skimming)\";\n econ = \"Those who take treatment have higher baseline Y₀; the naïve difference overstates the true effect.\";\n } else if (exampleType === \"neg\") {\n // Negative selection: treated have lower baseline Y0 (triage)\n rows = [\n { id: \"A\", D: 1, Y0: 3, Y1: 3 + t },\n { id: \"B\", D: 1, Y0: 2, Y1: 2 + t },\n { id: \"C\", D: 0, Y0: 4, Y1: 4 + t },\n { id: \"D\", D: 0, Y0: 5, Y1: 5 + t },\n ];\n label = \"Negative selection (need‑based targeting)\";\n econ = \"Those who take treatment have lower baseline Y₀; the naïve difference understates the true effect.\";\n } else {\n // RCT ideal: equal baselines across groups\n rows = [\n { id: \"A\", D: 1, Y0: 5, Y1: 5 + t },\n { id: \"B\", D: 1, Y0: 5, Y1: 5 + t },\n { id: \"C\", D: 0, Y0: 5, Y1: 5 + t },\n { id: \"D\", D: 0, Y0: 5, Y1: 5 + t },\n ];\n label = \"RCT ideal (no selection bias)\";\n econ = \"Baselines are equal; the naïve difference equals ATE.\";\n }\n\n const mean = (arr) => (arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : NaN);\n const treated = rows.filter((r) => r.D === 1);\n const control = rows.filter((r) => r.D === 0);\n\n // Observed outcomes Y (D=1 -> Y1, D=0 -> Y0)\n const Yobs = rows.map((r) => (r.D ? r.Y1 : r.Y0));\n\n // Components for detailed calculation\n const EY1_treated = mean(treated.map((r) => r.Y1));\n const EY0_treated = mean(treated.map((r) => r.Y0));\n const EY0_control = mean(control.map((r) => r.Y0));\n const naive = EY1_treated - mean(control.map((r) => r.Y0));\n\n const ATE_ex = mean(rows.map((r) => r.Y1 - r.Y0)); // equals t here\n const selBias_ex = EY0_treated - EY0_control;\n\n return { rows, Yobs, naive, ATE_ex, selBias_ex, EY1_treated, EY0_treated, EY0_control, label, econ };\n }, [tau, exampleType]);\n\n // Simple self-tests (homogeneous effects)\n const tests = useMemo(() => {\n const tol = 1e-8;\n const idAlways = Math.abs(metrics.naive - (metrics.ATE + metrics.selBias)) < tol;\n const exOK = Math.abs(example.naive - (example.ATE_ex + example.selBias_ex)) < tol;\n const rctOK = randomize ? Math.abs(metrics.selBias) < 0.1 && Math.abs(metrics.naive - metrics.ATE) < 0.1 : null;\n const signExpected = !randomize && conf > 0 ? (selMode === \"cream\" ? \"positive\" : \"negative\") : null;\n const signOK = signExpected === null ? null : selMode === \"cream\" ? metrics.selBias > 0 : metrics.selBias < 0;\n return { idAlways, exOK, rctOK, signOK, signExpected };\n }, [metrics, example, randomize, conf, selMode]);\n\n // ---------- Layout ----------\n return (\n

ATE & Selection Bias — Interactive Tutorial (RCT Focus)

\n Explore ATE, Selection Bias, and how RCT solves selection bias by design.\n

\n setSeed((s) => s + 1)}\n className=\"px-3 py-2 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700\"\n >\n Resample\n \n

\n\n

\n {/* Controls */}\n

Controls

\n \n {\n setRandomize(e.target.checked);\n }}\n />\n RCT (randomize D)\n \n

\n\n {/* Selection mode control */}\n

\n Selection mode:\n setSelMode(e.target.value)}\n className=\"px-2 py-1 rounded-md border border-gray-200 bg-white text-gray-800\"\n >\n \n \n \n

\n\n \n \n \n \n\n

\n setSeed((s) => s + 1)}\n className=\"px-3 py-2 rounded-xl bg-gray-900 text-white text-sm font-medium hover:bg-black\"\n >\n Simulate\n \n {\n setRandomize(false);\n setConf(1.2);\n setTau(2);\n setSigma(1);\n setSeed(42);\n setN(600);\n }}\n className=\"px-3 py-2 rounded-xl bg-gray-100 text-gray-800 text-sm font-medium hover:bg-gray-200\"\n >\n Reset\n \n

\n\n

Formula map (homogeneous effects)

\n Naïve diff = E[Y|D=1] − E[Y|D=0]\n
= ATE + Selection bias\n
where ATE = E[Y₁−Y₀] and Selection bias = E[Y₀|D=1] − E[Y₀|D=0].\n

\n Toggle RCT to set selection bias ≈ 0 and make diff-in-means ≈ ATE.\n

\n\n {/* Self-tests */}\n

Self-tests

\n Identity: Naïve diff = ATE + Selection bias →\n {tests.idAlways ? \"PASS\" : \"FAIL\"}\n
\n Numerical example identity →\n {tests.exOK ? \"PASS\" : \"FAIL\"}\n
\n If RCT is ON: selection bias ≈ 0 and naïve diff ≈ ATE →\n \n {tests.rctOK === null ? \"(turn RCT on to check)\" : tests.rctOK ? \"PASS\" : \"FAIL\"}\n \n
\n Sign check (when not randomized): expected {tests.signExpected ?? \"—\"} selection →\n \n {tests.signOK === null ? \"(depends on selection mode & conf>0)\" : tests.signOK ? \"PASS\" : \"FAIL\"}\n \n

\n\n {/* Visuals & metrics */}\n

\n {/* Numerical example card */}\n

Numerical example: ATE and Selection Bias (homogeneous effects)

\n Scenario:\n setExampleType(e.target.value)}\n className=\"px-2 py-1 rounded-md border border-gray-200 bg-white text-gray-800\"\n >\n \n \n \n \n

\n\n

\n Target estimand: ATE = E[Y₁−Y₀]. With homogeneous effects we can decompose the observed difference as Naïve diff = ATE + Selection bias.\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n {example.rows.map((r, idx) => (\n \n \n \n \n \n \n \n ))}\n \n

Unit	D	Y₀ (baseline)	Y₁ (if treated)	Observed Y
{r.id}	{r.D}	{fmt1(r.Y0)}	{fmt1(r.Y1)}	{fmt1(r.D ? r.Y1 : r.Y0)}

\n\n {/* Detailed calculation lines */}\n

\n \n E[Y|D=1] = E[Y₁|D=1] = {fmt1(example.EY1_treated)}; E[Y|D=0] = E[Y₀|D=0] = {fmt1(example.EY0_control)}\n \n \n Naïve diff = E[Y|D=1] − E[Y|D=0] = {fmt1(example.EY1_treated)} − {fmt1(example.EY0_control)} = {fmt1(example.naive)}\n \n \n Selection bias = E[Y₀|D=1] − E[Y₀|D=0] = {fmt1(example.EY0_treated)} − {fmt1(example.EY0_control)} = {fmt1(example.selBias_ex)}\n \n \n ATE = E[Y₁−Y₀] = {fmt1(example.ATE_ex)} (constant τ)\n \n \n Check: ATE + Selection bias = {fmt1(example.ATE_ex)} + {fmt1(example.selBias_ex)} = {fmt1(example.ATE_ex + example.selBias_ex)}\n \n \n Therefore, Naïve diff (= {fmt1(example.naive)}) {Math.abs(example.naive - (example.ATE_ex + example.selBias_ex)) < 1e-8 ? \"= \" : \"≠ \"} ATE + Selection bias (= {fmt1(example.ATE_ex + example.selBias_ex)}).\n \n

\n\n

\n \n \n \n \n

\n\n

\n {example.label}. {example.econ}\n

\n Economic reading: Selection bias is the baseline gap E[Y₀|D=1] − E[Y₀|D=0]. If positive, the treated would have done better even without treatment (overstates effect); if negative, they would have done worse (understates effect). Randomization sets this baseline gap ≈ 0.\n

\n\n {/* Metrics row */}\n

\n \n \n \n \n

\n\n {/* Decomposition and selection visuals */}\n

Decomposition

\n \n \n \n \n \n \n \n \n \n

\n\n

Outcome vs Confounder U (colored by D)

\n \n \n \n \n \n \n \n d.D === \"Control\")} name=\"Control\" fill=\"#6b7280\" />\n d.D === \"Treated\")} name=\"Treated\" fill=\"#1f2937\" />\n \n \n

\n\n {/* Propensity preview */}\n

Selection pattern: p(D=1|U)

\n \n \n \n \n \n \n \n \n \n \n

With RCT on, the line flattens near 0.5 across U (no selection). In Triage mode, the line slopes downward (higher U → lower P(D=1)).

\n\n {/* Teaching cues */}\n

Teaching cues & talking points

\n Key identity (homogeneous effects): Naïve diff = ATE + Selection bias.\n
\n Sign of bias: Use Selection mode to flip the sign. Cream-skimming ⇒ E[Y₀|D=1] > E[Y₀|D=0] (positive bias). Triage ⇒ E[Y₀|D=1] < E[Y₀|D=0] (negative bias).\n
\n RCT lever: Turn on RCT to make selection bias ≈ 0 so diff-in-means ≈ ATE.\n
\n Visual tells: Scatter plot separates by U when biased; propensity line bends with selection and flattens under RCT.\n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_39":40,"_41":42},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",38],"traceId","9703094035522496458","traceTime",1785528092388]