[{"_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","68c6c1b96b988191ae817bf54417575c","versionInt","title","Di D Intuition Playground (canvas)","type","code/react","content","import React, { useMemo, useState, useEffect } 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 { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { AlertTriangle, TrendingUp, Shuffle, LineChart as LineIcon, Sigma, BarChart as BarIcon, CheckCircle2, PlayCircle, HelpCircle, Bug } from \"lucide-react\";\nimport {\n ResponsiveContainer,\n LineChart,\n Line,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n Legend,\n ReferenceLine,\n BarChart,\n Bar,\n ComposedChart,\n Area,\n} from \"recharts\";\n\n// ============================================================\n// ✨ DiD INTUITION PLAYGROUND — ultra-simple, tab-specific guidance\n// ============================================================\n\n// ---------- tiny linalg (no external deps) -------------------\nfunction xtx(X: number[][]): number[][] {\n const n = X.length, p = X[0].length; const A = Array.from({ length: p }, () => Array(p).fill(0));\n for (let i = 0; i < n; i++) { const xi = X[i]; for (let j = 0; j < p; j++) { const xij = xi[j]; for (let k = j; k < p; k++) A[j][k] += xij * xi[k]; } }\n for (let j = 0; j < p; j++) for (let k = 0; k < j; k++) A[j][k] = A[k][j];\n return A;\n}\nfunction xty(X: number[][], y: number[]): number[] { const p = X[0].length; const v = Array(p).fill(0); for (let i = 0; i < X.length; i++) for (let j = 0; j < p; j++) v[j] += X[i][j] * y[i]; return v; }\nfunction matVec(A: number[][], v: number[]): number[] { return A.map((row) => row.reduce((s, a, j) => s + a * v[j], 0)); }\nfunction gaussJordanInverse(Ain: number[][], ridge = 1e-8): number[][] {\n const n = Ain.length; const A = Ain.map((row, i) => row.map((x, j) => x + (i === j ? ridge : 0))); const I = Array.from({ length: n }, (_, i) => Array.from({ length: n }, (_, j) => (i === j ? 1 : 0)));\n for (let i = 0; i < n; i++) {\n let piv = i; for (let r = i + 1; r < n; r++) if (Math.abs(A[r][i]) > Math.abs(A[piv][i])) piv = r; if (Math.abs(A[piv][i]) < 1e-12) throw new Error(\"Matrix is nearly singular\");\n if (piv !== i) { [A[i], A[piv]] = [A[piv], A[i]]; [I[i], I[piv]] = [I[piv], I[i]]; }\n const d = A[i][i]; for (let j = 0; j < n; j++) { A[i][j] /= d; I[i][j] /= d; }\n for (let r = 0; r < n; r++) if (r !== i) { const f = A[r][i]; if (f !== 0) for (let j = 0; j < n; j++) { A[r][j] -= f * A[i][j]; I[r][j] -= f * I[i][j]; } }\n }\n return I;\n}\nfunction residuals(X: number[][], y: number[], beta: number[]): number[] { return y.map((yi, i) => yi - X[i].reduce((s, xij, j) => s + xij * beta[j], 0)); }\nfunction sq(v: number[]): number { return v.reduce((a, b) => a + b * b, 0); }\n\n// RNG & helpers ------------------------------------------------\nfunction rng(seed: number) { return function () { let t = (seed += 0x6d2b79f5); t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }\nfunction normal(r: () => number, mean = 0, sd = 1) { let u = 0, v = 0; while (u === 0) u = r(); while (v === 0) v = r(); const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v); return mean + sd * z; }\nconst avg = (arr: number[]) => (arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : NaN);\nfunction range(n: number) { return [...Array(n).keys()]; }\nfunction ols(X: number[][], y: number[]) {\n const n = y.length, p = X[0].length; const XtX = xtx(X); const XtY = xty(X, y); let XtXinv: number[][]; try { XtXinv = gaussJordanInverse(XtX); } catch { XtXinv = gaussJordanInverse(XtX, 1e-6); }\n const beta = matVec(XtXinv, XtY); const res = residuals(X, y, beta); const sse = sq(res); const s2 = sse / Math.max(1, n - p); const se = XtXinv.map((row, j) => Math.sqrt(row[j] * s2)); return { beta, se, s2 };\n}\n\n// --------------------------------------------------------------\n// Minimal generator focused on single assumption: parallel trends (DiD)\n// --------------------------------------------------------------\ninterface GenParams {\n mode: \"cross\" | \"time\" | \"did\";\n N: number; // units\n T: number; // periods\n shareT: number; // cross/did treated share\n tBar: number; // DiD shock time\n effect: number; // treatment effect (time & did)\n pretrendDelta: number; // treated slope difference pre-treatment (parallel trend violation)\n noiseSd: number;\n slopeBase: number; // common slope\n selectionBias: number; // cross: treated start higher/lower\n drift: number; // time-series: macro drift from pre to post\n seed: number;\n}\n\nfunction generate(params: GenParams) {\n const r = rng(params.seed); const ids = range(params.N); const ts = range(params.T);\n const treatedSet = new Set(ids.filter(() => r() < params.shareT));\n const rows: any[] = [];\n\n if (params.mode === \"cross\") {\n // one-time snapshot; *no true effect*, only selection bias to teach non-causal gaps\n ids.forEach((id) => {\n const treated = treatedSet.has(id) ? 1 : 0;\n const base = 2 + normal(r, 0, 0.6);\n const y = base + treated * (params.selectionBias) + normal(r, 0, params.noiseSd);\n rows.push({ id, t: 0, y, treated, D: treated, eventK: null });\n });\n return { rows, ids, ts: [0] };\n }\n\n if (params.mode === \"time\") {\n // single group before vs after\n ts.forEach((t) => {\n const post = t >= params.tBar ? 1 : 0;\n const drift = t < params.tBar ? 0 : params.drift * (t - params.tBar + 1); // macro change after threshold\n const y = 2 + params.slopeBase * t + post * params.effect + drift + normal(r, 0, params.noiseSd);\n rows.push({ id: 0, t, y, treated: 1, D: post, eventK: post ? t - params.tBar : t - params.tBar });\n });\n return { rows, ids: [0], ts };\n }\n\n // DiD with two groups, parallel trends controlled by pretrendDelta\n ids.forEach((id) => {\n const treated = treatedSet.has(id) ? 1 : 0; const a_i = normal(r, 0, 1.0); const slope_i = params.slopeBase + normal(r, 0, 0.02);\n ts.forEach((t) => {\n const post = t >= params.tBar ? 1 : 0; let base = a_i + slope_i * t;\n if (treated && !post) base += params.pretrendDelta * t; // only before treatment\n const att = treated && post ? params.effect : 0;\n const y = base + att + normal(r, 0, params.noiseSd);\n const eventK = treated ? t - params.tBar : null;\n rows.push({ id, t, y, treated, D: treated * post, eventK });\n });\n });\n return { rows, ids, ts };\n}\n\n// Helpers for summaries --------------------------------------\nfunction twoByTwo(rows: any[], tBar: number) {\n const pre = rows.filter((r) => r.t < tBar); const post = rows.filter((r) => r.t >= tBar);\n const TreatedPre = avg(pre.filter((r) => r.treated === 1).map((r) => r.y));\n const TreatedPost = avg(post.filter((r) => r.treated === 1).map((r) => r.y));\n const ControlPre = avg(pre.filter((r) => r.treated === 0).map((r) => r.y));\n const ControlPost = avg(post.filter((r) => r.treated === 0).map((r) => r.y));\n const diff = (TreatedPost - TreatedPre) - (ControlPost - ControlPre);\n return { TreatedPre, TreatedPost, ControlPre, ControlPost, diff };\n}\n\nfunction buildTWFEDesign(rows: any[], ykey: string, dkey: string) {\n const ids = Array.from(new Set(rows.map((r) => r.id))).sort((a: number, b: number) => a - b);\n const ts = Array.from(new Set(rows.map((r) => r.t))).sort((a: number, b: number) => a - b);\n const idIndex = new Map(ids.map((id, i) => [id, i])); const tIndex = new Map(ts.map((t, i) => [t, i]));\n const p = 1 + (ids.length - 1) + (ts.length - 1); const X: number[][] = new Array(rows.length); const y: number[] = new Array(rows.length);\n for (let r = 0; r < rows.length; r++) { const row = rows[r]; const xi = new Array(p).fill(0); let col = 0; xi[col++] = row[dkey] ?? 0; const idPos = idIndex.get(row.id) ?? 0; for (let j = 1; j < ids.length; j++) xi[col++] = idPos === j ? 1 : 0; const tPos = tIndex.get(row.t) ?? 0; for (let j = 1; j < ts.length; j++) xi[col++] = tPos === j ? 1 : 0; X[r] = xi; y[r] = row[ykey]; }\n return { X, y };\n}\n\nfunction buildEventStudyDesign(rows: any[], ykey: string, eventTimeKey: string, maxLead = 4, maxLag = 6) {\n const ids = Array.from(new Set(rows.map((r) => r.id))).sort((a: number, b: number) => a - b);\n const ts = Array.from(new Set(rows.map((r) => r.t))).sort((a: number, b: number) => a - b);\n const leads = [...Array(maxLead).keys()].map((i) => -maxLead + i); const lags = [...Array(maxLag).keys()].map((i) => i);\n const kVals = [...leads, ...lags].filter((k) => k !== -1);\n const kIndex = new Map(kVals.map((k, i) => [k, i])); const p = kVals.length + (ids.length - 1) + (ts.length - 1);\n const X: number[][] = new Array(rows.length); const y: number[] = new Array(rows.length);\n for (let r = 0; r < rows.length; r++) { const row = rows[r]; const xi = new Array(p).fill(0); let col = 0; const k = row[eventTimeKey]; if (k !== null && k !== undefined && kIndex.has(k)) xi[col + (kIndex.get(k) as number)] = 1; col += kVals.length; const idPos = ids.indexOf(row.id); for (let j = 1; j < ids.length; j++) xi[col++] = idPos === j ? 1 : 0; const tPos = ts.indexOf(row.t); for (let j = 1; j < ts.length; j++) xi[col++] = tPos === j ? 1 : 0; X[r] = xi; y[r] = row[ykey]; }\n return { X, y, kVals };\n}\n\n// ============================================================\n// UI Component\n// ============================================================\nexport default function DIDPlayground() {\n const COLORS = { treated: \"#2563eb\", control: \"#f59e0b\" }; // blue-600 & amber-500\n\n const [mode, setMode] = useState(\"did\");\n const [params, setParams] = useState({\n mode: \"did\",\n N: 40,\n T: 12,\n shareT: 0.5,\n tBar: 6,\n effect: -1.2,\n pretrendDelta: 0,\n noiseSd: 0.9,\n slopeBase: 0.15,\n selectionBias: 0,\n drift: 0,\n seed: 9,\n });\n useEffect(() => setParams((p) => ({ ...p, mode })), [mode]);\n const { rows } = useMemo(() => generate(params), [params]);\n\n // Lesson Flow presets & cues --------------------------------\n const [showCues, setShowCues] = useState(true);\n const [cue, setCue] = useState(\"Click a preset to run the lesson: Clean → Violate → Placebo.\");\n function applyLessonPreset(kind: \"clean\" | \"violate\" | \"placebo\") {\n if (kind === \"clean\") {\n setParams((p) => ({ ...p, mode: \"did\", pretrendDelta: 0, effect: -1.2 }));\n setCue(\"Clean: pre-treatment slopes parallel; 2×2 ≈ TWFE; event-study leads k<0 ≈ 0.\");\n } else if (kind === \"violate\") {\n setParams((p) => ({ ...p, mode: \"did\", pretrendDelta: 0.25 })); // stronger for visible violation\n setCue(\"Violation: treated has extra pre-slope (Δ>0). Leads drift from 0 → DiD biased.\");\n } else if (kind === \"placebo\") {\n setParams((p) => ({ ...p, mode: \"did\", effect: 0, pretrendDelta: 0 }));\n setCue(\"Placebo: no effect. Lines move together; β ≈ 0; leads ≈ 0.\");\n }\n }\n\n // ========== Derived metrics per TAB =======================\n // CROSS tab metrics\n const crossStats = useMemo(() => {\n if (mode !== \"cross\") return null;\n const t = rows.filter((r) => r.treated === 1).map((r) => r.y);\n const c = rows.filter((r) => r.treated === 0).map((r) => r.y);\n const Treated = avg(t), Control = avg(c), Gap = Treated - Control;\n const pass = Math.abs(params.selectionBias) < 1e-6 ? Math.abs(Gap) < 0.25 : null; // if no bias, gap ~0\n return { Treated, Control, Gap, pass };\n }, [rows, mode, params.selectionBias]);\n\n // TIME tab metrics\n const timeStats = useMemo(() => {\n if (mode !== \"time\") return null;\n const pre = rows.filter((r) => r.t < params.tBar).map((r) => r.y);\n const post = rows.filter((r) => r.t >= params.tBar).map((r) => r.y);\n const Pre = avg(pre), Post = avg(post), Gap = Post - Pre;\n if (Math.abs(params.drift) < 1e-6) {\n const expected = params.effect + params.slopeBase * (params.T / 2);\n const pass = Math.abs(Gap - expected) < 0.35;\n return { Pre, Post, Gap, pass, expected };\n }\n return { Pre, Post, Gap, pass: null, expected: null };\n }, [rows, mode, params.tBar, params.effect, params.drift, params.slopeBase, params.T]);\n\n // DID tab metrics\n const twfe = useMemo(() => {\n if (mode === \"did\") { const { X, y } = buildTWFEDesign(rows, \"y\", \"D\"); const { beta, se } = ols(X, y); return { beta: beta[0], se: se[0] }; }\n return null;\n }, [rows, mode]);\n const twobytwo = useMemo(() => (mode === \"did\" ? twoByTwo(rows, params.tBar) : null), [rows, mode, params.tBar]);\n const es = useMemo(() => {\n if (mode === \"did\") { const { X, y, kVals } = buildEventStudyDesign(rows, \"y\", \"eventK\", 4, 6); const { beta, se } = ols(X, y); return kVals.map((k, i) => ({ k, beta: beta[i], se: se[i] })); }\n return null;\n }, [rows, mode]);\n const leadsDiag = useMemo(() => {\n if (mode !== \"did\" || !es) return null; const leads = es.filter((d) => d.k < 0);\n if (!leads.length) return null; const meanAbs = leads.reduce((a, d) => a + Math.abs(d.beta), 0) / leads.length; const flag = meanAbs > 0.35; return { meanAbs, flag };\n }, [es, mode]);\n const didChecks = useMemo(() => {\n if (mode !== \"did\" || !twfe || !twobytwo) return null;\n const close = Math.abs(twfe.beta - twobytwo.diff) < 0.25; // 2x2 ≈ TWFE\n return { close };\n }, [twfe, twobytwo, mode]);\n\n // Aggregates for DiD chart\n const meanByYearGroup = useMemo(() => {\n if (mode !== \"did\") return [] as any[]; const byKey: Record = {};\n for (const r of rows) { const key = `${r.t}-${r.treated}`; if (!byKey[key]) byKey[key] = { t: r.t, treated: r.treated, y: [] }; byKey[key].y.push(r.y); }\n return Object.values(byKey).map((g) => ({ year: g.t, group: g.treated ? \"Treated\" : \"Control\", mean: avg(g.y) })).sort((a, b) => a.year - b.year);\n }, [rows, mode]);\n\n // ---------- Developer tests (small, isolated) --------------\n const [dev1, setDev1] = useState<{ ok: boolean; msg: string }>({ ok: true, msg: \"\" });\n const [dev2, setDev2] = useState<{ ok: boolean; msg: string }>({ ok: true, msg: \"\" });\n const [dev3, setDev3] = useState<{ ok: boolean; msg: string }>({ ok: true, msg: \"\" });\n\n useEffect(() => {\n // OLS toy y = 1 + 2*D\n const D = [0, 1, 0, 1, 0, 1, 0, 1]; const X = D.map((d) => [1, d]); const r = rng(1); const y = D.map((d) => 1 + 2 * d + normal(r, 0, 1e-6));\n try { const { beta } = ols(X, y); const ok = Math.abs(beta[0] - 1) < 1e-3 && Math.abs(beta[1] - 2) < 1e-3; setDev1({ ok, msg: ok ? \"OLS recovers β≈[1,2]\" : `Unexpected β=[${beta.map((b) => b.toFixed(3)).join(\", \")} ]` }); } catch (e: any) { setDev1({ ok: false, msg: e?.message ?? String(e) }); }\n }, []);\n\n useEffect(() => {\n // Clean leads ≈ 0 on average across seeds\n try {\n const seeds = Array.from({ length: 10 }, (_, i) => 101 + i);\n const vals: number[] = [];\n for (const s of seeds) {\n const clean: GenParams = { mode: \"did\", N: 200, T: 14, shareT: 0.5, tBar: 7, effect: -1, pretrendDelta: 0, noiseSd: 0.6, slopeBase: 0.15, selectionBias: 0, drift: 0, seed: s };\n const { rows } = generate(clean); const { X, y, kVals } = buildEventStudyDesign(rows, \"y\", \"eventK\", 4, 6); const { beta } = ols(X, y);\n const leadIdx = kVals.map((k, i) => ({ k, i })).filter(({ k }) => k < 0).map(({ i }) => i);\n const meanAbsLead = leadIdx.length ? leadIdx.map((i) => Math.abs(beta[i])).reduce((a, b) => a + b, 0) / leadIdx.length : 0;\n vals.push(meanAbsLead);\n }\n const avgVal = vals.reduce((a, b) => a + b, 0) / vals.length; const ok = avgVal < 0.25; setDev2({ ok, msg: ok ? `Event-study leads avg ≈ ${avgVal.toFixed(3)} (near 0)` : `Leads too large on average: ${avgVal.toFixed(3)}` });\n } catch (e: any) { setDev2({ ok: false, msg: e?.message ?? String(e) }); }\n }, []);\n\n useEffect(() => {\n // Time-series: with slope=0 and drift=0, before/after ≈ effect (noise ~ 0)\n try {\n const cfg: GenParams = { mode: \"time\", N: 1, T: 12, shareT: 1, tBar: 6, effect: 1.5, pretrendDelta: 0, noiseSd: 1e-6, slopeBase: 0, selectionBias: 0, drift: 0, seed: 42 };\n const { rows } = generate(cfg);\n const pre = rows.filter((r) => r.t < cfg.tBar).map((r) => r.y);\n const post = rows.filter((r) => r.t >= cfg.tBar).map((r) => r.y);\n const gap = avg(post) - avg(pre);\n const ok = Math.abs(gap - cfg.effect) < 1e-3;\n setDev3({ ok, msg: ok ? \"Time-series check: β̂₁ ≈ effect when slope=0, drift=0\" : `Unexpected gap=${gap.toFixed(3)} vs effect=${cfg.effect}` });\n } catch (e: any) {\n setDev3({ ok: false, msg: e?.message ?? String(e) });\n }\n }, []);\n\n function randomizeSeed() { setParams((p) => ({ ...p, seed: Math.floor(Math.random() * 1e6) })); }\n\n return (\n

DiD Intuition — the simple way

Move a few sliders → read the plots → state the assumption.

\n\n setMode(v as any)}>\n \n Cross-sectional diff\n Time-series diff\n DiD (TWFE)\n \n\n

\n {/* Controls */}\n \n Controls (kept minimal)\n \n {mode === \"cross\" && (\n

\n Units (N): {params.N}\n setParams({ ...params, N: v })} />\n

\n Share treated: {params.shareT.toFixed(2)}\n setParams({ ...params, shareT: v })} />\n

\n Selection bias (treated start higher): {params.selectionBias.toFixed(2)}\n setParams({ ...params, selectionBias: v })} />\n

\n Noise SD: {params.noiseSd.toFixed(2)}\n setParams({ ...params, noiseSd: v })} />\n

\n )}\n\n {mode === \"time\" && (\n

\n Periods (T): {params.T}\n setParams({ ...params, T: v, tBar: Math.min(params.tBar, v - 2) })} />\n

\n Threshold t̄: {params.tBar}\n setParams({ ...params, tBar: v })} />\n

\n Effect after t̄: {params.effect.toFixed(2)}\n setParams({ ...params, effect: v })} />\n

\n Underlying time trend (slope): {params.slopeBase.toFixed(2)}\n setParams({ ...params, slopeBase: v })} />\n

\n Macro drift after t̄: {params.drift.toFixed(2)}\n setParams({ ...params, drift: v })} />\n

\n Noise SD: {params.noiseSd.toFixed(2)}\n setParams({ ...params, noiseSd: v })} />\n

\n )}\n\n {mode === \"did\" && (\n

\n Units (per group): {params.N}\n setParams({ ...params, N: v })} />\n

\n Periods (T): {params.T}\n setParams({ ...params, T: v, tBar: Math.min(params.tBar, v - 2) })} />\n

\n Shock time t̄: {params.tBar}\n setParams({ ...params, tBar: v })} />\n

\n Effect (ATT): {params.effect.toFixed(2)}\n setParams({ ...params, effect: v })} />\n

\n Parallel trend Δ (treated pre-slope): {params.pretrendDelta.toFixed(2)}\n setParams({ ...params, pretrendDelta: v })} />\n

\n Noise SD: {params.noiseSd.toFixed(2)}\n setParams({ ...params, noiseSd: v })} />\n

\n\n {/* LESSON FLOW PRESETS */}\n

Lesson flow presets

\n \n \n \n \n

\n )}\n\n

\n \n

\n\n \n

\n {mode === \"did\" ? (\n

We only teach parallel trends here. Turn Δ away from 0 to see bias.

\n ) : (\n

Cross/Time often fail without random assignment or timing.

\n )}\n

\n \n \n\n {/* Visuals & per-tab pedagogy */}\n

\n {mode === \"did\" && showCues && (\n \n \n Instructor cue: {cue}\n \n \n )}\n\n {/* ============= CROSS TAB ============= */}\n {mode === \"cross\" && (\n <>\n \n \n Cross-sectional means\n \n \n \n r.treated === 0).reduce((a: number, b: any, _i: number, arr: any[]) => a + b.y / arr.length, 0) },\n { name: \"Treated\", v: rows.filter((r: any) => r.treated === 1).reduce((a: number, b: any, _i: number, arr: any[]) => a + b.y / arr.length, 0) },\n ]}>\n \n \n \n \n \n \n \n

Estimator: α̂₁ = \\bar Y_T − \\bar Y_C. Without random assignment, this gap mixes treatment and selection.

\n \n \n\n \n Formula & numeric example\n \n {crossStats && (\n

\\bar Y_T = {crossStats.Treated.toFixed(2)}, \\bar Y_C = {crossStats.Control.toFixed(2)}

α̂₁ = {crossStats.Gap.toFixed(2)}

Interpretation: a level gap ≠ causal effect unless treated/control were randomly assigned.\n

\n Guided questions\n

If you slide Selection bias to 0, does α̂₁ ≈ 0?
Why can α̂₁ ≠ 0 when bias ≠ 0 even though we coded no true effect?

\n {crossStats.pass === null ? \"(Set bias = 0 to run the check)\" : (crossStats.pass ? \"PASS: With no bias, α̂₁ ≈ 0.\" : \"FAIL: α̂₁ should be near 0 when bias=0.\")}\n

\n )}\n \n \n \n )}\n\n {/* ============= TIME TAB ============= */}\n {mode === \"time\" && (\n <>\n \n \n Before vs after (one group)\n

t̄ = {params.tBar} · slope = {params.slopeBase.toFixed(2)}

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

Estimator: β̂₁ = \\bar Y_post − \\bar Y_pre. Note: a baseline linear trend adds slope × (mean t_post − mean t_pre) = slope × T/2. Drift introduces extra post-only change.

\n \n \n\n \n Formula & numeric example\n \n {timeStats && (\n

\\bar Y_pre = {timeStats.Pre.toFixed(2)}, \\bar Y_post = {timeStats.Post.toFixed(2)}

β̂₁ = {timeStats.Gap.toFixed(2)} | effect slider = {params.effect.toFixed(2)}

Expected when drift=0: effect + slope×T/2 = {(params.effect + params.slopeBase * (params.T / 2)).toFixed(2)}

Interpretation: before/after picks up both the treatment jump and any baseline trend across windows.

\n Guided questions\n

Set drift=0. Does β̂₁ ≈ effect + slope×T/2?
Set slope=0. Now does β̂₁ ≈ the effect slider?
Increase drift. What happens to β̂₁? Why?

\n {timeStats.pass === null ? \"(Set drift = 0 to run the check)\" : (timeStats.pass ? \"PASS: With drift=0, β̂₁ ≈ effect + slope×T/2.\" : \"FAIL: With drift=0, β̂₁ should be close to effect + slope×T/2.\")}\n

\n )}\n \n \n \n )}\n\n {/* ============= DID TAB ============= */}\n {mode === \"did\" && (\n <>\n \n \n Group means over time\n

t̄ = {params.tBar}

\n \n \n \n \n \n \n \n \n \n \n d.group === \"Treated\")} dot={false} stroke={COLORS.treated} strokeWidth={2} />\n d.group === \"Control\")} dot={false} stroke={COLORS.control} strokeWidth={2} />\n \n \n

Model: Y_it = α_i + λ_t + τ·D_it + ε_it. With parallel pre-trends, τ is identified.

\n \n \n\n \n 2×2 DiD — formula & numbers\n \n {twobytwo && (\n

T_pre={twobytwo.TreatedPre.toFixed(2)}, T_post={twobytwo.TreatedPost.toFixed(2)}

C_pre={twobytwo.ControlPre.toFixed(2)}, C_post={twobytwo.ControlPost.toFixed(2)}

DiD = (T_post−T_pre) − (C_post−C_pre) = {twobytwo.diff.toFixed(2)}

\n {twfe && (

TWFE β ≈ {twfe.beta.toFixed(2)} (±{(1.96*twfe.se).toFixed(2)}). Under parallel trends, 2×2 ≈ TWFE.

)}\n

\n Guided questions\n

Are pre-treatment slopes visually parallel?
Do event-study leads (k<0) sit near 0?
Is 2×2 close to the TWFE β?

\n {leadsDiag && (\n

\n Leads test: mean |β_k| (k<0) = {leadsDiag.meanAbs.toFixed(2)} {leadsDiag.flag ? \"→ too large (likely pre-trend)\" : \"(ok)\"}\n

\n )}\n {didChecks && (\n

\n 2×2 vs TWFE: {didChecks.close ? \"PASS (close)\" : \"FAIL (far apart)\"}\n

\n )}\n

\n )}\n \n \n\n {es && (\n \n Event-study (leads/lags)\n \n \n ({ k: d.k, beta: d.beta, lo: d.beta - 1.96 * d.se, hi: d.beta + 1.96 * d.se, span: 2 * 1.96 * d.se }))}>\n \n \n \n \n \n \n {/* CI band shading: stack a transparent base (lo) and the span (hi-lo) */}\n \n \n \n \n \n \n \n

Dots are β_k point estimates. The light-blue band is the 95% CI (area between lo and hi). If pre-period dots' CIs overlap 0, parallel trends looks ok.

\n \n \n )}\n \n )}\n

\n\n \n \n \n \n\n \n \n Instructor notes\n \n \n

\n Good class flow:\n

Cross: move bias ≠ 0 then set to 0; stress levels ≠ causality.
Time: drift on/off; note timing isn’t randomized.
DiD: start Δ = 0, then violate; check leads and 2×2≈TWFE; finish with interpretation.

\n Talk tracks:\n

We only teach parallel trends (no need for other assumptions today).
Event-study decomposes \"post\" into relative time; leads test pre-trends.

\n Dev self-checks (optional):\n

{dev1.ok ? \"PASS:\" : \"FAIL:\"} {dev1.msg}
{dev2.ok ? \"PASS:\" : \"FAIL:\"} {dev2.msg}
{dev3.ok ? \"PASS:\" : \"FAIL:\"} {dev3.msg}

\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","3728895821317834902","traceTime",1785566111510]