[{"_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","68a025e5c2b48191a2c085402e5a6959","versionInt","title","Iv Interactive Playground (2sls Demo)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Input } from \"@/components/ui/input\";\nimport { AlertTriangle, Sigma, TrendingUp, Shuffle, RefreshCw, CheckCircle2, XCircle } from \"lucide-react\";\nimport {\n ResponsiveContainer,\n ScatterChart,\n Scatter,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n LineChart,\n Line,\n Legend,\n} from \"recharts\";\n\n// ---------- helpers ---------------------------------------------------------\nfunction mulberry32(a: number) {\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}\n\nfunction randnFactory(seed: number) {\n const rnd = mulberry32(seed);\n let spare: number | null = null;\n return function randn() {\n if (spare !== null) {\n const val = spare;\n spare = null;\n return val;\n }\n let u = 0, v = 0;\n while (u === 0) u = rnd();\n while (v === 0) v = rnd();\n const mag = Math.sqrt(-2.0 * Math.log(u));\n const z0 = mag * Math.cos(2 * Math.PI * v);\n const z1 = mag * Math.sin(2 * Math.PI * v);\n spare = z1;\n return z0;\n };\n}\n\nfunction mean(arr: number[]) {\n return arr.reduce((a, b) => a + b, 0) / arr.length;\n}\nfunction variance(arr: number[]) {\n const m = mean(arr);\n return arr.reduce((s, x) => s + (x - m) ** 2, 0) / arr.length;\n}\nfunction cov(x: number[], y: number[]) {\n const mx = mean(x), my = mean(y);\n let s = 0;\n for (let i = 0; i < x.length; i++) s += (x[i] - mx) * (y[i] - my);\n return s / x.length;\n}\nfunction demean(x: number[]) {\n const m = mean(x);\n return x.map((xi) => xi - m);\n}\n\nfunction olsSlope(x: number[], y: number[]) {\n const xdm = demean(x);\n const ydm = demean(y);\n const Sxx = xdm.reduce((s, xi) => s + xi * xi, 0);\n const Sxy = xdm.reduce((s, xi, i) => s + xi * ydm[i], 0);\n const beta = Sxy / Sxx;\n const n = x.length;\n // residuals using intercept\n const bx = x.map((xi) => mean(y) + beta * (xi - mean(x)));\n const e = y.map((yi, i) => yi - bx[i]);\n const s2 = e.reduce((s, ei) => s + ei * ei, 0) / (n - 2);\n const se = Math.sqrt(s2 / Sxx);\n return { beta, se, Sxx, s2 };\n}\n\nfunction firstStage(z: number[], x: number[]) {\n const zd = demean(z);\n const xd = demean(x);\n const Szz = zd.reduce((s, zi) => s + zi * zi, 0);\n const Szx = zd.reduce((s, zi, i) => s + zi * xd[i], 0);\n const piHat = Szx / Szz;\n const xhatd = zd.map((zi) => piHat * zi);\n const u = xd.map((xi, i) => xi - xhatd[i]);\n const n = z.length;\n const s2 = u.reduce((s, ui) => s + ui * ui, 0) / (n - 2);\n const se = Math.sqrt(s2 / Szz);\n const t = piHat / se;\n const F = t * t;\n const varXhat = xhatd.reduce((s, xi) => s + xi * xi, 0) / n;\n const varX = xd.reduce((s, xi) => s + xi * xi, 0) / n;\n return { piHat, se, F, varXhat, varX };\n}\n\nfunction ivJustIdentified(z: number[], x: number[], y: number[]) {\n const zd = demean(z);\n const xd = demean(x);\n const yd = demean(y);\n const n = z.length;\n const ZY = zd.reduce((s, zi, i) => s + zi * yd[i], 0);\n const ZX = zd.reduce((s, zi, i) => s + zi * xd[i], 0);\n if (Math.abs(ZX) < 1e-9) return { beta: NaN, se: NaN, s2: NaN };\n const beta = ZY / ZX; // Wald/2SLS (just-identified, no controls)\n const e = yd.map((yi, i) => yi - beta * xd[i]); // de-meaned second-stage residuals\n const s2 = e.reduce((s, ei) => s + ei * ei, 0) / (n - 2);\n const Szz = zd.reduce((s, zi) => s + zi * zi, 0);\n const se = Math.sqrt(s2 * (Szz / (ZX * ZX)));\n return { beta, se, s2 };\n}\n\n// ---------- main component --------------------------------------------------\nexport default function IVPlayground() {\n const [n, setN] = useState(800);\n const [betaTrue, setBetaTrue] = useState(1);\n const [pi, setPi] = useState(0.8); // instrument strength\n const [confound, setConfound] = useState(0.7); // strength of U→X and U→Y\n const [rhoZU, setRhoZU] = useState(0); // independence violation (Z↔U)\n const [tau, setTau] = useState(0); // exclusion violation (Z→Y direct)\n const [sigmaX, setSigmaX] = useState(1);\n const [sigmaY, setSigmaY] = useState(1);\n const [seed, setSeed] = useState(42);\n\n const data = useMemo(() => {\n const rnorm = randnFactory(seed);\n // base normals\n const Z0 = Array.from({ length: n }, () => rnorm());\n const Uperp = Array.from({ length: n }, () => rnorm());\n // correlate U with Z by rhoZU: U = rho*Z + sqrt(1-rho^2)*Uperp\n const U = Z0.map((z, i) => rhoZU * z + Math.sqrt(Math.max(1 - rhoZU ** 2, 0)) * Uperp[i]);\n const eX = Array.from({ length: n }, () => rnorm());\n const eY = Array.from({ length: n }, () => rnorm());\n\n const X = Z0.map((z, i) => pi * z + confound * U[i] + sigmaX * eX[i]);\n const Y = X.map((x, i) => betaTrue * x + confound * U[i] + tau * Z0[i] + sigmaY * eY[i]);\n\n const dataset = Z0.map((z, i) => ({ Z: z, X: X[i], Y: Y[i] }));\n\n // stats\n const fs = firstStage(Z0, X);\n const ols = olsSlope(X, Y);\n const iv = ivJustIdentified(Z0, X, Y);\n const weak = fs.F < 10;\n\n // fitted lines for plots\n const mX = mean(X), mY = mean(Y), mZ = mean(Z0);\n const olsIntercept = mY - ols.beta * mX;\n const ivIntercept = mY - iv.beta * mX;\n const fsIntercept = mX - fs.piHat * mZ;\n\n const xRange = [-2.5, -1.25, 0, 1.25, 2.5].map((x) => ({\n x,\n yOLS: olsIntercept + ols.beta * x,\n yIV: isFinite(iv.beta) ? ivIntercept + iv.beta * x : NaN,\n }));\n const zRange = [-2.5, -1.25, 0, 1.25, 2.5].map((z) => ({\n z,\n xFS: fsIntercept + fs.piHat * z,\n }));\n\n const varX = fs.varX;\n const varXhat = fs.varXhat;\n\n const varZ = variance(Z0);\n const rfSlope = cov(Z0, Y) / varZ;\n\n return { dataset, fs, ols, iv, weak, xRange, zRange, varX, varXhat, rfSlope, varZ };\n }, [n, betaTrue, pi, confound, rhoZU, tau, sigmaX, sigmaY, seed]);\n\n const resetParams = () => {\n setN(800); setBetaTrue(1); setPi(0.8); setConfound(0.7); setRhoZU(0); setTau(0); setSigmaX(1); setSigmaY(1); setSeed(42);\n };\n\n // ---------- UI ------------------------------------------------------------\n return (\n

Instrumental Variables (IV) — Interactive 2SLS Playground

\n \n \n

\n\n \n \n How to use this page\n \n \n

Goal: Show why OLS is biased under endogeneity and how IV (2SLS) recovers the causal slope when the instrument is relevant and valid.
Controls: Move sliders to change the true causal effect (β), endogeneity via an unobserved confounder U, instrument strength (π), and violations (independence ρ_ZU and exclusion τ).
Plots: Left shows structural scatter (Y vs X) with OLS & IV lines. Right shows first stage (X vs Z).
Readouts: Compare OLS vs IV estimates and standard errors; check the first-stage F. Warnings appear for weak IV or violated assumptions.

\n \n \n\n

\n {/* controls */}\n \n \n Model & Data Controls\n \n \n

\n Sample size n: {n}\n setN(v[0])}/>\n

\n True causal effect β (X → Y): {betaTrue.toFixed(2)}\n setBetaTrue(v[0])}/>\n

\n Endogeneity strength via confounder U (affects X & Y): {confound.toFixed(2)}\n setConfound(v[0])}/>\n

\n Instrument strength π (Z → X): {pi.toFixed(2)}\n setPi(v[0])}/>\n

\n Independence violation ρ(Z,U): {rhoZU.toFixed(2)}\n setRhoZU(v[0])}/>\n

\n Exclusion violation τ (Z → Y direct): {tau.toFixed(2)}\n setTau(v[0])}/>\n

\n Noise σ_X\n setSigmaX(v[0])}/>\n

\n Noise σ_Y\n setSigmaY(v[0])}/>\n

\n Random seed\n

\n setSeed(parseInt(e.target.value || \"0\"))} className=\"w-28\"/>\n \n

\n \n \n\n {/* charts */}\n

\n \n \n Causal graph: how IV transmits (arrows)\n \n \n \n \n \n \n \n Structural: Y vs X\n \n \n \n \n \n \n \n \n \n {/* OLS fit */}\n \n \n \n {/* IV fit */}\n {isFinite(data.iv.beta) && (\n \n \n \n )}\n \n \n \n \n \n\n \n \n First Stage: X vs Z\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n {/* stats */}\n \n \n Estimates & Diagnostics\n \n \n

\n \n \n \n \n

\n \n \n \n 1e-9 ? data.rfSlope / data.fs.piHat : NaN} expl=\"Should match IV in just-identified designs.\"/>\n d.Z), data.dataset.map(d=>d.X))} expl=\"Zero ⇒ no identification.\"/>\n

\n\n {/* warnings */}\n

\n {data.weak && (\n \n )}\n {Math.abs(tau) > 0.05 && (\n \n )}\n {Math.abs(rhoZU) > 0.05 && (\n \n )}\n

\n \n \n\n {/* self-tests */}\n \n \n Self-tests (auto)\n \n \n 1e-9 ? data.rfSlope / data.fs.piHat : NaN}\n ivBeta={data.iv.beta}\n varZ={data.varZ}\n varXhat={data.varXhat}\n piHat={data.fs.piHat}\n firstF={data.fs.F}\n seFS={data.fs.se}\n />\n \n \n\n \n \n Teach-from-this card\n \n \n

Why IV? Endogeneity (OVB, reverse causality, measurement error) makes OLS biased: E[ε|X]≠0.
Validity conditions: (i) Relevance (Z→X; check first-stage F), (ii) Independence (Cov(Z,ε)=0, often after controls), (iii) Exclusion (Z affects Y only via X), (iv) Monotonicity for LATE with binary Z.
Precision vs. bias: IV is typically less precise (SE ↑) than OLS because it uses only the Z-induced slice of X. Don’t expect smaller SEs.
Weak IV: When F is low, IV drifts toward OLS and tests break. Use stronger Z, more data, or weak-IV-robust methods (AR, CLR).
Reduced form: Useful and often precise; but causal slope for X is IV = (Z→Y)/(Z→X).

\n \n \n\n

\n Notes: Exactly-identified single-instrument, no controls, homoskedastic formulas for SEs. The goal is intuition. For teaching, you can toggle violations to show why each assumption matters.\n

\n );\n}\n\nfunction CausalDAG({ beta, pi, confound, rhoZU, tau }: { beta: number; pi: number; confound: number; rhoZU: number; tau: number }) {\n const W = 600, H = 220;\n const nodes = { Z: { x: 70, y: 110 }, X: { x: 250, y: 110 }, Y: { x: 430, y: 110 }, U: { x: 250, y: 40 } };\n const r = 18;\n const scale = (v: number, max = 2) => 1 + 4 * Math.min(Math.abs(v) / max, 1);\n const swZX = scale(pi);\n const swXY = scale(beta);\n const swUX = scale(confound);\n const swUY = scale(confound);\n const swZY = Math.abs(tau) > 0.001 ? scale(tau) : 0;\n const corrZU = Math.abs(rhoZU) > 0.05;\n return (\n \n );\n}\n\nfunction Stat({ title, value, se, subtitle }: { title: string; value: number; se?: number; subtitle?: string }) {\n const val = isFinite(value) ? value.toFixed(3) : \"—\";\n const seTxt = se !== undefined && isFinite(se) ? ` (SE ${se.toFixed(3)})` : \"\";\n return (\n

{title}

{val}{seTxt}

\n {subtitle &&

{subtitle}

}\n

\n );\n}\n\nfunction InfoBox({ label, value, expl }: { label: string; value: number; expl?: string }) {\n const val = isFinite(value) ? value.toFixed(3) : \"—\";\n return (\n

{label}

{val}

\n {expl &&

{expl}

}\n

\n );\n}\n\nfunction Warn({ text }: { text: string }) {\n return (\n

\n \n

{text}

\n );\n}\n\nfunction Tests({ wald, ivBeta, varZ, varXhat, piHat, firstF, seFS }: { wald: number; ivBeta: number; varZ: number; varXhat: number; piHat: number; firstF: number; seFS: number; }) {\n const tol = 0.02; // loose for simulated data\n const tests = [\n {\n name: \"Wald ratio ≈ IV β (just-identified)\",\n pass: isFinite(wald) && isFinite(ivBeta) && Math.abs(wald - ivBeta) < tol,\n detail: `|wald - iv| = ${isFinite(wald) && isFinite(ivBeta) ? Math.abs(wald - ivBeta).toFixed(3) : \"—\"}`,\n },\n {\n name: \"First-stage identity: F ≈ (π̂/se)^2\",\n pass: isFinite(firstF) && isFinite(piHat) && isFinite(seFS) && Math.abs(firstF - (piHat / seFS) ** 2) < 1e-6,\n detail: `F=${firstF.toFixed(3)} vs (π̂/se)^2=${((piHat/seFS)**2).toFixed(3)}`,\n },\n {\n name: \"Var(X̂) ≈ π̂² Var(Z)\",\n pass: isFinite(varXhat) && isFinite(piHat) && isFinite(varZ) && Math.abs(varXhat - (piHat ** 2) * varZ) < Math.max(0.05 * varXhat, 0.01),\n detail: `X̂=${varXhat.toFixed(3)} vs π̂²Var(Z)=${((piHat**2)*varZ).toFixed(3)}`,\n },\n ];\n return (\n

\n {tests.map((t) => (\n

\n {t.pass ? : }\n

{t.name}

{t.detail}

\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","14114449066130416729","traceTime",1785528092915]