[{"_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","69a535cb9dc08191abd64af6ba8ad671","versionInt","title","Lecture 4 Interactive Fe Playground","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 { Slider } from \"@/components/ui/slider\";\nimport { Label } from \"@/components/ui/label\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport {\n ResponsiveContainer,\n ScatterChart,\n Scatter,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n Line,\n Legend,\n ReferenceDot,\n} from \"recharts\";\n\n/**\n * Simplified interactive page (like your screenshot):\n * - 3 firms (A,B,C) and 4 years (t=1..4)\n * - Choose true beta, noise, time trend in x\n * - Manually set firm effects α_i and time effects λ_t\n * - Compare: Pooled OLS vs Firm FE (Within/LSDV) vs Two-Way FE\n * - Show scatter y vs x (color by firm) + firm FE lines through firm means + pooled OLS line\n * - Show formulas + mini numeric table (Firm A)\n */\n\n// ---------- deterministic RNG ----------\nfunction makeRng(seed = 1) {\n let s = seed >>> 0;\n return () => {\n s = (1664525 * s + 1013904223) >>> 0;\n return s / 2 ** 32;\n };\n}\n\nfunction randn(rng) {\n let u = 0,\n v = 0;\n while (u === 0) u = rng();\n while (v === 0) v = rng();\n return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);\n}\n\nfunction mean(arr) {\n return arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : 0;\n}\n\nfunction fmt(x) {\n if (!Number.isFinite(x)) return \"—\";\n const ax = Math.abs(x);\n if (ax >= 10) return x.toFixed(3);\n if (ax >= 1) return x.toFixed(3);\n return x.toFixed(4);\n}\n\nfunction olsSlope(x, y) {\n const xb = mean(x);\n const yb = mean(y);\n let num = 0,\n den = 0;\n for (let i = 0; i < x.length; i++) {\n const xd = x[i] - xb;\n const yd = y[i] - yb;\n num += xd * yd;\n den += xd * xd;\n }\n const b = den > 0 ? num / den : 0;\n const a = yb - b * xb;\n return { a, b };\n}\n\nfunction withinTransformByGroup(values, groupIds, K) {\n // values length n; groupIds in [0..K-1]\n const n = values.length;\n const sums = Array(K).fill(0);\n const cnts = Array(K).fill(0);\n for (let i = 0; i < n; i++) {\n sums[groupIds[i]] += values[i];\n cnts[groupIds[i]] += 1;\n }\n const means = sums.map((s, k) => (cnts[k] ? s / cnts[k] : 0));\n const out = Array(n).fill(0);\n for (let i = 0; i < n; i++) out[i] = values[i] - means[groupIds[i]];\n return { out, means };\n}\n\nfunction twoWayDemean(values, firmIds, timeIds, nFirms, nTimes) {\n // x~ = x - x̄_i· - x̄·t + x̄··\n const n = values.length;\n const firmS = Array(nFirms).fill(0);\n const firmC = Array(nFirms).fill(0);\n const timeS = Array(nTimes).fill(0);\n const timeC = Array(nTimes).fill(0);\n let overall = 0;\n\n for (let i = 0; i < n; i++) {\n const f = firmIds[i];\n const t = timeIds[i];\n firmS[f] += values[i];\n firmC[f] += 1;\n timeS[t] += values[i];\n timeC[t] += 1;\n overall += values[i];\n }\n const xBar = overall / n;\n const firmMean = firmS.map((s, i) => (firmC[i] ? s / firmC[i] : 0));\n const timeMean = timeS.map((s, t) => (timeC[t] ? s / timeC[t] : 0));\n\n const out = Array(n).fill(0);\n for (let i = 0; i < n; i++) {\n out[i] = values[i] - firmMean[firmIds[i]] - timeMean[timeIds[i]] + xBar;\n }\n return { out, firmMean, timeMean, overallMean: xBar };\n}\n\n// ---------- lightweight tests (run in dev) ----------\nfunction approxEqual(a, b, tol = 1e-9) {\n return Math.abs(a - b) <= tol;\n}\n\nfunction runDevTests() {\n // 1) within transformation: each group's mean should be ~0\n const values = [1, 2, 3, 10, 11, 12];\n const groupIds = [0, 0, 0, 1, 1, 1];\n const { out } = withinTransformByGroup(values, groupIds, 2);\n const m0 = mean(out.slice(0, 3));\n const m1 = mean(out.slice(3, 6));\n console.assert(approxEqual(m0, 0), \"Test failed: within mean for group 0 not zero\");\n console.assert(approxEqual(m1, 0), \"Test failed: within mean for group 1 not zero\");\n\n // 2) two-way demeaning: overall mean of x~ should be ~0 (by construction)\n const fIds = [0, 0, 1, 1];\n const tIds = [0, 1, 0, 1];\n const vals = [1, 2, 3, 4];\n const tw = twoWayDemean(vals, fIds, tIds, 2, 2);\n console.assert(approxEqual(mean(tw.out), 0), \"Test failed: mean of two-way demeaned not zero\");\n\n // 3) OLS slope sanity: perfect line y = 2 + 3x\n const x = [0, 1, 2, 3];\n const y = x.map((v) => 2 + 3 * v);\n const fit = olsSlope(x, y);\n console.assert(approxEqual(fit.b, 3), \"Test failed: OLS slope not 3\");\n console.assert(approxEqual(fit.a, 2), \"Test failed: OLS intercept not 2\");\n}\n\nif (typeof process !== \"undefined\" && process?.env?.NODE_ENV !== \"production\") {\n // Run once per module evaluation in dev\n try {\n runDevTests();\n } catch (e) {\n // Avoid crashing the demo if environment disallows console.assert\n // eslint-disable-next-line no-console\n console.warn(\"Dev tests encountered an error:\", e);\n }\n}\n\nexport default function Lecture4InteractiveFE() {\n // Fixed small panel like screenshot\n const firms = [\"A\", \"B\", \"C\"]; // 3 firms\n const years = [1, 2, 3, 4]; // 4 years\n const nF = firms.length;\n const nT = years.length;\n\n // Controls (left block)\n const [betaTrue, setBetaTrue] = useState(1.5);\n const [noiseSd, setNoiseSd] = useState(0.2);\n const [trend, setTrend] = useState(0.7);\n const [seed, setSeed] = useState(42);\n const [noiseBump, setNoiseBump] = useState(0);\n\n // Firm effects α_i and time effects λ_t (editable, like screenshot)\n const [alphaA, setAlphaA] = useState(-2);\n const [alphaB, setAlphaB] = useState(0.5);\n const [alphaC, setAlphaC] = useState(2);\n\n const [lam1, setLam1] = useState(0);\n const [lam2, setLam2] = useState(0.5);\n const [lam3, setLam3] = useState(-0.5);\n const [lam4, setLam4] = useState(0.2);\n\n // Base x by firm (like screenshot)\n const [xBaseA, setXBaseA] = useState(1);\n const [xBaseB, setXBaseB] = useState(2);\n const [xBaseC, setXBaseC] = useState(3);\n\n const [tab, setTab] = useState(\"firm\");\n\n const sim = useMemo(() => {\n const rng = makeRng(seed + noiseBump * 999);\n const alpha = [alphaA, alphaB, alphaC];\n const lambda = [lam1, lam2, lam3, lam4];\n const xBase = [xBaseA, xBaseB, xBaseC];\n\n const rows = [];\n const firmId = [];\n const timeId = [];\n const x = [];\n const y = [];\n\n for (let f = 0; f < nF; f++) {\n for (let t = 0; t < nT; t++) {\n // x has a firm base + time trend + small noise\n const xit = xBase[f] + trend * (t + 1) + noiseSd * 0.6 * randn(rng);\n const eps = noiseSd * randn(rng);\n const yit = alpha[f] + lambda[t] + betaTrue * xit + eps;\n\n firmId.push(f);\n timeId.push(t);\n x.push(xit);\n y.push(yit);\n rows.push({\n firm: firms[f],\n firmIdx: f,\n year: `t=${t + 1}`,\n yearIdx: t,\n x: xit,\n y: yit,\n });\n }\n }\n\n return { rows, firmId, timeId, x, y };\n }, [\n seed,\n noiseBump,\n betaTrue,\n noiseSd,\n trend,\n alphaA,\n alphaB,\n alphaC,\n lam1,\n lam2,\n lam3,\n lam4,\n xBaseA,\n xBaseB,\n xBaseC,\n nF,\n nT,\n ]);\n\n const estimates = useMemo(() => {\n // Pooled OLS\n const pooled = olsSlope(sim.x, sim.y);\n\n // Firm FE (within) slope\n const xW = withinTransformByGroup(sim.x, sim.firmId, nF);\n const yW = withinTransformByGroup(sim.y, sim.firmId, nF);\n let num = 0,\n den = 0;\n for (let i = 0; i < sim.x.length; i++) {\n num += xW.out[i] * yW.out[i];\n den += xW.out[i] * xW.out[i];\n }\n const bFirmFE = den > 0 ? num / den : 0;\n\n // Two-way FE (firm+time) via double demean\n const xTW = twoWayDemean(sim.x, sim.firmId, sim.timeId, nF, nT);\n const yTW = twoWayDemean(sim.y, sim.firmId, sim.timeId, nF, nT);\n let num2 = 0,\n den2 = 0;\n for (let i = 0; i < sim.x.length; i++) {\n num2 += xTW.out[i] * yTW.out[i];\n den2 += xTW.out[i] * xTW.out[i];\n }\n const bTwoWay = den2 > 0 ? num2 / den2 : 0;\n\n // Firm means (for plotting firm lines through (x̄_i, ȳ_i))\n const firmXbar = xW.means;\n\n const sumsY = Array(nF).fill(0);\n const cntsY = Array(nF).fill(0);\n for (let k = 0; k < sim.y.length; k++) {\n sumsY[sim.firmId[k]] += sim.y[k];\n cntsY[sim.firmId[k]] += 1;\n }\n const firmYbar = sumsY.map((s, i) => (cntsY[i] ? s / cntsY[i] : 0));\n\n const firmLine = firms.map((name, i) => {\n const a = firmYbar[i] - bFirmFE * firmXbar[i];\n return { firm: name, a, b: bFirmFE, xbar: firmXbar[i], ybar: firmYbar[i] };\n });\n\n return {\n pooled,\n bFirmFE,\n bTwoWay,\n firmLine,\n };\n }, [sim, nF, nT, firms]);\n\n // Scatter data\n const scatter = useMemo(() => {\n return sim.rows.map((r) => ({\n x: r.x,\n y: r.y,\n firm: r.firm,\n year: r.year,\n firmIdx: r.firmIdx,\n }));\n }, [sim.rows]);\n\n const xRange = useMemo(() => {\n const xs = sim.x;\n const xmin = Math.min(...xs);\n const xmax = Math.max(...xs);\n const pad = 0.15 * (xmax - xmin || 1);\n return { xmin: xmin - pad, xmax: xmax + pad };\n }, [sim.x]);\n\n const lineSeries = useMemo(() => {\n const { xmin, xmax } = xRange;\n\n const pooled = {\n points: [\n { x: xmin, y: estimates.pooled.a + estimates.pooled.b * xmin },\n { x: xmax, y: estimates.pooled.a + estimates.pooled.b * xmax },\n ],\n };\n\n const firmLines = estimates.firmLine.map((fl) => ({\n firm: fl.firm,\n points: [\n { x: xmin, y: fl.a + fl.b * xmin },\n { x: xmax, y: fl.a + fl.b * xmax },\n ],\n meanPoint: { x: fl.xbar, y: fl.ybar },\n }));\n\n return { pooled, firmLines };\n }, [xRange, estimates]);\n\n const firmAMini = useMemo(() => {\n const idx = sim.rows\n .map((r, i) => ({ r, i }))\n .filter(({ r }) => r.firm === \"A\")\n .map(({ i }) => i);\n\n const xA = idx.map((k) => sim.x[k]);\n const yA = idx.map((k) => sim.y[k]);\n const xbarA = mean(xA);\n const ybarA = mean(yA);\n\n return idx.map((k, j) => ({\n t: j + 1,\n x: sim.x[k],\n y: sim.y[k],\n xd: sim.x[k] - xbarA,\n yd: sim.y[k] - ybarA,\n }));\n }, [sim]);\n\n const rCode = useMemo(() => {\n return `# R: pooled OLS, firm FE, two-way FE\n# Data: firm (A/B/C), year (1..4), x, y\n\n# Pooled OLS\nlm(y ~ x, data=df)\n\n# LSDV firm fixed effects (dummies)\nlm(y ~ x + factor(firm), data=df)\n\n# Two-way fixed effects (firm + year)\nlm(y ~ x + factor(firm) + factor(year), data=df)\n\n# Within estimator (firm FE) via demeaning\n# x_tilde = x - ave(x, firm)\n# y_tilde = y - ave(y, firm)\n# beta_FE = sum(x_tilde*y_tilde)/sum(x_tilde^2)\n\n# Two-way within via double demean\n# x~ = x - ave(x, firm) - ave(x, year) + mean(x)\n# y~ = y - ave(y, firm) - ave(y, year) + mean(y)\n# beta_TW = sum(x~*y~)/sum(x~^2)`;\n }, []);\n\n const resetDefaults = () => {\n setBetaTrue(1.5);\n setNoiseSd(0.2);\n setTrend(0.7);\n setSeed(42);\n setNoiseBump(0);\n\n setAlphaA(-2);\n setAlphaB(0.5);\n setAlphaC(2);\n\n setLam1(0);\n setLam2(0.5);\n setLam3(-0.5);\n setLam4(0.2);\n\n setXBaseA(1);\n setXBaseB(2);\n setXBaseC(3);\n\n setTab(\"firm\");\n };\n\n const leftControls = (\n

\n Structural slope β (true): {fmt(betaTrue)}\n setBetaTrue(v[0])} />\n

\n\n

\n Noise SD: σ = {fmt(noiseSd)}\n setNoiseSd(v[0])} />\n

\n\n

\n Time trend in x: trend = {fmt(trend)}\n setTrend(v[0])} />\n

\n\n

Seed

{seed}

\n \n \n

\n );\n\n const firmEffectsPanel = (\n

Firm effects αᵢ

\n A\n setAlphaA(Number(e.target.value))} />\n

\n B\n setAlphaB(Number(e.target.value))} />\n

\n C\n setAlphaC(Number(e.target.value))} />\n

\n\n

Base x by firm

\n A\n setXBaseA(Number(e.target.value))} />\n

\n B\n setXBaseB(Number(e.target.value))} />\n

\n C\n setXBaseC(Number(e.target.value))} />\n

\n );\n\n const timeEffectsPanel = (\n

Time effects λₜ

\n t=1\n setLam1(Number(e.target.value))} />\n

\n t=2\n setLam2(Number(e.target.value))} />\n

\n t=3\n setLam3(Number(e.target.value))} />\n

\n t=4\n setLam4(Number(e.target.value))} />\n

\n );\n\n const coefficientsBox = (\n

Coefficients, Formulas & Mini Table

\n True β (data gen): {fmt(betaTrue)}\n

\n Pooled OLS β̂: {fmt(estimates.pooled.b)}\n

\n Firm FE (Within/LSDV) β̂: {fmt(estimates.bFirmFE)}\n

\n Two-Way FE β̂: {fmt(estimates.bTwoWay)}\n

\n\n

Within transformation (firm)

\n {`x̃ = x − x̄ᵢ ỹ = y − ȳᵢ\\nβ_FE = Σ x̃ỹ / Σ x̃²`}\n

\n\n

Two-way within (firm + time)

\n {`x~ = x − x̄ᵢ· − x̄·ₜ + x̄··\\ny~ = y − ȳᵢ· − ȳ·ₜ + ȳ··\\nβ_TW = Σ x~y~ / Σ x~²`}\n

\n\n

Small numeric peek (Firm A)

\n \n \n \n \n \n \n \n \n \n \n \n {firmAMini.map((r) => (\n \n \n \n \n \n \n \n ))}\n \n

t	x	y	x − x̄_A	y − ȳ_A
{r.t}	{fmt(r.x)}	{fmt(r.y)}	{fmt(r.xd)}	{fmt(r.yd)}

\n );\n\n return (\n

FE vs LSDV Interactive (firm & two-way)

Small panel (A/B/C firms, t=1..4). Adjust effects and see estimates move.

\n\n {/* Top controls */}\n

\n \n {leftControls}\n \n\n \n {firmEffectsPanel}\n \n\n \n {timeEffectsPanel}\n \n

\n\n {/* Tabs like screenshot */}\n \n \n Firm FE → LSDV\n Two-Way FE\n R Code\n \n\n \n

\n \n \n Scatter: y vs x (color by firm)\n \n \n

\n \n \n \n Number(v).toFixed(1)}\n />\n \n (typeof v === \"number\" ? fmt(v) : v)}\n labelFormatter={(label) => `x = ${label}`}\n />\n \n\n d.firm === \"A\")} fill=\"#2563eb\" />\n d.firm === \"B\")} fill=\"#f59e0b\" />\n d.firm === \"C\")} fill=\"#16a34a\" />\n\n {/* Pooled OLS line */}\n \n\n {/* Firm FE lines (same slope; different intercepts) */}\n {lineSeries.firmLines.map((fl) => (\n \n \n\n {/* Mean point label (x̄_i,ȳ_i) */}\n \n \n ))}\n \n \n

Firm FE lines share slope β̂_FE and pass through each firm mean point (x̄ᵢ, ȳᵢ).

\n \n \n\n \n {coefficientsBox}\n \n

\n \n\n \n

\n \n \n What changes with Two-Way FE?\n \n \n

\n Two-way FE removes firm intercept shifts and common time shocks before estimating β.\n

Try this

Change λₜ strongly (e.g., set t=2 to +2, t=3 to −2)
Because x has a time trend, pooled OLS can soak up time shocks
Two-way FE should move β̂ closer to the true β

\n Current β̂_TW = {fmt(estimates.bTwoWay)} (true β = {fmt(betaTrue)})\n

\n \n \n\n \n {coefficientsBox}\n \n

\n \n\n \n \n \n R code template\n \n \n

{rCode}

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

\n Teaching note: In large panels, software uses “absorbed” FE (within transformation) instead of literally creating dummy columns (LSDV). Here we keep it small so the geometry is visible.\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","13971685892909707610","traceTime",1785528095012]