All Courses - Page 262 of 274

Two FWL Theorems for the Worth of One

Econometrics

Dr. Mike

October 15, 2025

The outcome that I want to name Yuletide’s Rule, extra generally generally known as the “Frisch-Waugh-Lovell (FWL) theorem”, reveals the best way to calculate the regression slope coefficient for one predictor by finishing up extra “auxiliary” regressions that regulate for all different predictors.
You’ve most likely encountered this outcome if you happen to’ve studied introductory econometrics.
However it might shock you to study that there are literally two variants of the FWL theorem, every with its execs and cons.
Right now we’ll check out the much less acquainted model after which circle again to know what makes the extra acquainted one a textbook staple.

Simulation Instance

Let’s begin with just a little simulation.
First we’ll generate 5000 observations of predictors (X) and (W) from a joint regular distribution with normal deviations of 1, technique of zero, and a correlation of 0.5.

set.seed(1066)
library(mvtnorm)
# Simulate linear regression with two predictors: X and W
covariance_matrix <- matrix(
c(1, 0.5, 0.5, 1),
nrow = 2
)
n_sims <- 5000
x_w <- rmvnorm(
n = n_sims,
imply = c(0, 0),
sigma = covariance_matrix
)
x <- x_w[, 1]
w <- x_w[, 2]

Subsequent we’ll simulate the end result variable (Y) the place the true coefficient on (X) is one and the true coefficient on (W) is -1, including normal regular errors.

y <- 0.5 + x - w + rnorm(n_sims)

Now we’ll run the “auxiliary regressions”. The primary one regresses (X) on (W) and saves the residuals. Name these residuals x_tilde.

# Residuals from regression of X on W
x_tilde <- lm(x ~ w) |>
residuals()

The following one regresses (Y) on (W) and saves the residuals. Name these residuals y_tilde.

# Residuals from regression of Y on W
y_tilde <- lm(y ~ w) |>
residuals()

To make the code that follows just a little less complicated, I’ll additionally create a helper operate that runs a linear regression and returns the coefficients after stripping away any variable names.

get_coef <- operate(components) >
unname()

Now we’re prepared to match some regressions!
The “lengthy regression” is a typical linear regression of (Y) on (X) and (W).
The “FWL Customary” is a regression of y_tilde on x_tilde.
In different phrases, it regresses the residuals of (Y) on the residuals of (X).
The FWL as it’s often encountered in textbooks implies that we should always get well the identical coefficient on (X) in “Lengthy Regression” and in “FWL Customary”, and certainly the simulation bears this out.

c(
"Lengthy Regression" = get_coef(y ~ x + w)[2],
"FWL Customary" = get_coef(y_tilde ~ x_tilde - 1)[1],
"FWL Different" = get_coef(y ~ x_tilde)[2]
)

## Lengthy Regression FWL Customary FWL Different
## 0.9937046 0.9937046 0.9937046

However now check out “FWL” different: it is a regression of (Y) on x_tilde.
In comparison with the usual FWL method, this model doesn’t residualize (Y) with respect to (W).
Nevertheless it nonetheless offers us precisely the identical coefficient on (X) as the opposite two regressions.
That leaves us with two unanswered questions:

Why does the “different” FWL method work?
Given that the choice method works, why does anybody ever train the “normal” model?

In the remainder of this submit we’ll reply each questions utilizing easy algebra and the properties of linear regression.
There are many deep concepts right here, however there’s no have to deliver out the massive matrix algebra weapons to clarify them.

A Little bit of Notation

First we want a little bit of notation.
I discover it a bit less complicated to work with inhabitants linear regressions slightly than pattern regressions, however the concepts are the identical both approach.
So if you happen to want to place “hats” on all the things and work with sums slightly than expectations and covariances, be my visitor!

First we’ll outline the “Lengthy Regression” as a inhabitants linear regression of (Y) on (X) and (W), particularly
[
Y = beta_0 + beta_X X + beta_W W + U, quad mathbb{E}(U) = text{Cov}(X,U) = text{Cov}(W,U)=0.
]
Subsequent I’ll outline two extra inhabitants linear regressions: first the regression of (X) on (W)
[
X = gamma_0 + gamma_W W + tilde{X}, quad mathbb{E}(tilde{X}) = text{Cov}(W,tilde{X})=0
]
and second the regression of (Y) on (W)
[
Y = delta_0 + delta_W W + tilde{Y}, quad mathbb{E}(tilde{Y}) = text{Cov}(W,tilde{Y})=0.
]
I’ve already linked to a submit making this level, however it bears repeating: all the properties of the error phrases (U), (tilde{X}) and (tilde{Y}) that I’ve said right here maintain by building.
They don’t seem to be assumptions; they’re merely what defines an error time period in a inhabitants linear regression.

Why does the “different” FWL method work?

As talked about within the dialogue of our simulation experiment from above, the usual FWL theorem says {that a} regression of (tilde{Y}) on (tilde{X}) with no intercept offers us (beta_X), whereas the different model says {that a} regression of (Y) on (tilde{X}) with an intercept additionally offers us (beta_X).
It’s the second declare that we’ll show now.¹

The choice FWL theorem claims that (beta_X = textual content{Cov}(Y,tilde{X})/textual content{Var}(tilde{X})).
Since (tilde{X}) is uncorrelated with (W) by building, we are able to increase the numerator as follows:
[
text{Cov}(Y,tilde{X}) = text{Cov}(beta_0 + beta_X X + beta_W W + U, tilde{X}) = beta_X text{Cov}(X,tilde{X}) + text{Cov}(U,tilde{X}).
]
However since (tilde{X} = (X – gamma_0 – gamma_W W)) we even have
[
text{Cov}(U, tilde{X}) = text{Cov}(U, X – gamma_0 – gamma_W W) = text{Cov}(U,X) – gamma_W text{Cov}(U,W) = 0
]
since (X) and (W) are uncorrelated with (U) by building.
So to show our authentic declare it suffices to point out that (textual content{Cov}(X,tilde{X}) = textual content{Var}(tilde{X})).
To see why this holds, first write
[
text{Cov}(X, tilde{X}) = text{Cov}(X, X – gamma_0 – gamma_W W) = text{Var}(X) – gamma_W text{Cov}(X,W).
]
utilizing (textual content{Cov}(X,X) = textual content{Var}(X)).
Subsequent, increase (textual content{Var}(tilde{X})) as follows:
[
text{Var}(tilde{X}) = text{Var}(X – gamma_0 – gamma_W W) = text{Var}(X) + gamma_W^2 text{Var}(W) – 2 gamma_W text{Cov}(X,W).
]
after which subtract (textual content{Cov}(X,tilde{X})) from (textual content{Var}(tilde{X})):
[
text{Var}(tilde{X}) – text{Cov}(X,tilde{X}) = gamma_W left[ gamma_W text{Var}(W) – text{Cov}(X,W) right].
]
This reveals that (textual content{Var}(tilde{X})) and (textual content{Cov}(X,tilde{X})) are equal if and provided that (gamma_W textual content{Var}(W) = textual content{Cov}(X,W)).
However since (gamma_W) is the coefficient from the regression of (X) on (W), we already know that (gamma_W = textual content{Cov}(X,W)/textual content{Var}(W))!
With a little bit of algebra utilizing the properties of covariance and the definition of a inhabitants linear regression, we’ve proven that the choice FWL theorem holds.

What’s completely different in regards to the “ordinary” FWL theorem?

At this level you might be questioning why anybody teaches the “ordinary” model of the FWL theorem in any respect.
If that additional quick regression of (Y) on (W) isn’t wanted to study (beta_X), why trouble?

To reply this query, we’ll begin by re-writing the lengthy regression two other ways.
First, we’ll substitute (X = gamma_0 + gamma_W W + tilde{X}) into the lengthy regression and re-arrange, yielding
[
Y = (beta_0 + beta_X gamma_0) + beta_X tilde{X} + (beta_W + beta_X gamma_W) W + U.
]
Subsequent we’ll substitute (Y = delta_0 + delta_W W + tilde{Y}) on the left-hand aspect of the previous equation and rearrange to isolate (tilde{Y}).
This leaves us with
[
tilde{Y} = (beta_0 + beta_X gamma_0 – delta_0) + beta_X tilde{X} + (beta_W + beta_X gamma_W – delta_W) W + U.
]
Now we have now two expressions, every with (beta_X tilde{X}) as one of many phrases on the right-hand aspect and (U) as one other.
Discover that each expressions have an intercept and a time period wherein (W) is multiplied by a relentless.
What’s extra, the intercepts are carefully associated throughout the 2 equations, as are the (W) coefficients.
I’m now going to make a daring assertion: the intercept and (W) coefficient within the second expression, the (tilde{Y}) one, are each equal to zero
[
beta_0 + beta_X gamma_0 – delta_0 = 0, quad text{and} quad beta_W + beta_X gamma_W – delta_W = 0.
]
Maybe you don’t consider me, however only for the second suppose that I’m right.
On this case it could instantly comply with that
[
beta_0 + beta_X gamma_0 = delta_0, quad text{and} quad beta_W + beta_X gamma_W = delta_W
]
leaving us with two easy linear regressions, particularly
[
begin{align*}
Y &= delta_0 + beta_X tilde{X} + (beta_W W + U)
tilde{Y} &= beta_X tilde{X} + U.
end{align*}
]
We’re tantalizingly near unraveling the thriller of why the “ordinary” FWL theorem is so common.
However first we have to confirm my daring declare from the earlier paragraph.
To take action, we’ll fall again on our previous good friend: the omitted variable bias components, also called the regression anatomy components:
[
begin{aligned}
delta_W &equiv frac{text{Cov}(Y,W)}{text{Var}(W)} = frac{text{Cov}(beta_0 + beta_X X + beta_W W + U, W)}{text{Var}(W)} = frac{beta_W text{Var}(W) + beta_X text{Cov}(X,W)}{text{Var}(W)}
&= beta_W + beta_X frac{text{Cov}(X,W)}{text{Var}(W)} = beta_W + beta_X gamma_W.
end{aligned}
]
Thus, (beta_W + beta_X gamma_W – delta_W = 0) as claimed.
One down, another to go.
By definition, (delta_0 = mathbb{E}(Y) – delta_W mathbb{E}(W)).
Substituting the lengthy regression for (Y), we have now
[
begin{aligned}
delta_0 &= mathbb{E}(beta_0 + beta_X X + beta_W W + U) – delta_W mathbb{E}(W)
&= beta_0 + beta_X mathbb{E}(X) + (beta_W – delta_W) mathbb{E}(W)
end{aligned}
]
by the linearity of expectation and the truth that (mathbb{E}(U) = 0) by building.
Now, we’re attempting to point out that (delta_0 = beta_0 + beta_X gamma_0).
Substituting for (gamma_0) on this expression offers
[
beta_0 + beta_X gamma_0 = beta_0 + beta_X [mathbb{E}(X) – gamma_W mathbb{E}(W)] = beta_0 + beta_X mathbb{E}(X) – beta_X gamma_W mathbb{E}(W).
]
Inspecting our work to this point, we see that the 2 different expressions for (delta_0) might be equal exactly when (beta_X gamma_W = delta_W – beta_W).
However re-arranging this provides (delta_W = beta_W + beta_X gamma_W), which we already proved above utilizing the omitted variables bias components!

Taking Inventory

That was a number of algebra, so let’s spend a while serious about the outcomes.
We confirmed that
[
begin{align*}
Y &= delta_0 + beta_X tilde{X} + (beta_W W + U)
tilde{Y} &= beta_X tilde{X} + U.
end{align*}
]
Now, if you happen to’ll allow me, I’d wish to re-write that first equality as
[
Y = delta_0 + beta_X tilde{X} + V, quad text{where } V equiv beta_W W + U.
]
Since (tilde{X}) is uncorrelated with (U), as defined above, and since (mathbb{E}(U) = 0) by building, it follows that (tilde{Y} = beta_X tilde{X} + U) is a bona fide inhabitants linear regression mannequin.
If we regress (tilde{Y}) on (tilde{X}) the slope coefficient might be (beta_X) and the error time period might be (U).
This regression corresponds to the normal FWL theorem.
Discover that it has an intercept of zero and an error time period that’s equivalent to that of the lengthy regression.
We are able to confirm this utilizing our simulation experiment from above as follows:

# Customary FWL has identical residuals as lengthy regression
u_hat <- resid(lm(y ~ x + w))
u_tilde <- resid(lm(y_tilde ~ x_tilde - 1))
all.equal(u_hat, u_tilde)

## [1] TRUE

# Customary FWL has an intercept of zero (to machine precision!)
coef(lm(y_tilde ~ x_tilde))[1] # match with intercept; verify it's (numerically) 0

## (Intercept)
## 6.260601e-18

So what about (Y = delta_0 + beta_X tilde{X} + V)?
That is the regression that corresponds to the different FWL theorem.
Since (V = beta_W W + U) and (tilde{X}) is uncorrelated with each (U) and (W), this too is a inhabitants regression.
However except (beta_W = 0), it has a completely different error time period.
In different phrases, (V neq U).
Furthermore, this regression consists of an intercept that’s not typically zero.
Once more we are able to confirm this utilizing our simulation instance from above:

# Different FWL has completely different residuals than lengthy regression
v_hat <- resid(lm(y ~ x_tilde))
all.equal(u_hat, v_hat)

## [1] "Imply relative distinction: 0.4905107"

# Different FWL has a non-zero intercept
coef(lm(y ~ x_tilde))[1]

## (Intercept)
## 0.4878453

The Punchline

In case your purpose is merely to study (beta_X), then both model of the FWL theorem will do the trick and the choice model is less complicated as a result of it solely entails one auxiliary regression as a substitute of two.
However if you wish to make sure that you find yourself with the identical error time period as within the authentic lengthy regression, then you should use the normal model of the FWL theorem.
That is essential for the needs of inference as a result of the properties of the error time period decide the usual errors of your estimates.

Concern not: we’ll return to the primary declare quickly!↩︎

Getting Inventive With shape-outside | CSS-Methods

Programming

Dr. Mike

October 15, 2025

Getting Inventive With shape-outside | CSS-Methods

Final time, I requested, “Why achieve this many long-form articles really feel visually flat?” I defined that:

“Photographs in long-form content material can (and sometimes ought to) do greater than illustrate. They will form how individuals navigate, interact with, and interpret what they’re studying. They assist set the tempo, affect how readers really feel, and add character that phrases alone can’t at all times convey.”

Then, I touched on the expressive potentialities of CSS Shapes and the way, through the use of shape-outside, you may wrap textual content round a picture’s alpha channel so as to add power to a design and preserve it feeling full of life.

There are such a lot of inventive alternatives for utilizing shape-outside that I’m stunned I see it used so not often. So, how will you use it so as to add persona to a design? Right here’s how I do it.

Patty Meltt is an up-and-coming nation music sensation.

My transient: Patty Meltt is an up-and-coming nation music sensation, and she or he wanted a web site to launch her new album and tour. She needed it to be distinctive-looking and memorable, so she referred to as Stuff & Nonsense. Patty’s not actual, however the challenges of designing and growing websites like hers are.

Most shape-outside guides begin with circles and polygons. That’s helpful, however it solutions solely the how. Designers want the why — in any other case it’s simply one other CSS property.

No matter form its topic takes, each picture sits inside a field. By default, textual content flows above or beneath that field. If I float a picture left or proper, the textual content wraps across the rectangle, no matter what’s inside. That’s the limitation shape-outside overcomes.

shape-outside helps you to break away from these bins by enabling layouts that may reply to the contours of a picture. That shift from photos in bins to letting the picture content material outline the composition is what makes utilizing shape-outside so attention-grabbing.

Stable blocks of textual content round straight-edged photos can really feel static. However textual content that bends round a guitar or curves round a portrait creates motion, which might make a narrative extra compelling and fascinating.

CSS shape-outside allows textual content to circulate round any customized form, together with a picture’s alpha channel (i.e., the clear areas):

img {
  float: left;
  width: 300px;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-image-threshold: .5;
  shape-margin: 1rem;
}

First, a fast recap.

For textual content to circulate round parts, they should float both left or proper and have their width outlined. The shape-outside URL selects a picture with an alpha channel, corresponding to a PNG or WebP. The shape-image-threshold property units the alpha channel threshold for making a form. Lastly, there’s the shape-margin property which — consider it or not — creates a margin across the form.

Interactive examples from this text are obtainable in my lab.

A number of picture shapes

Once I’m including photos to a long-form article, I ask myself, “How can they assist form somebody’s expertise?” Flowing textual content round photos can sluggish individuals down a little bit, making their expertise extra immersive. Visually, it brings textual content and picture into a more in-depth relationship, making them really feel a part of a shared composition somewhat than remoted parts.

An image of Patty staring into the camera on the left and two columns of white text on a black background on the right. — Columns with out `shape-outside` utilized to them

Patty’s life story — from singing in honky-tonks to headlining stadiums — incorporates two sections: one about her, the opposite about her music. I added a tall vertical picture of Patty to her biography and two smaller album covers to the music column:


  
    
    [...]
  

  
    
    [...]
    
    [...]

A easy grid then creates the 2 columns:

#patty {
  show: grid;
  grid-template-columns: 2fr 1fr;
  hole: 5rem;
}

I prefer to make my designs as versatile as I can, so as an alternative of specifying picture widths and margins in static pixels, I opted for percentages on these column widths so their precise measurement is relative to regardless of the measurement of the container occurs to be:

#patty > *:nth-child(1) img {
  float: left;
  width: 50%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/album-1.webp");
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(2) {
  float: proper;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/album-2.webp");
  shape-margin: 2%;
}

Imager of Patty on the left and two columns of white text on a black background to the right. The second column of text flows around two images showing album covers. — Columns with `shape-outside` utilized to them. See this instance in my lab.

Textual content now flows round Patty’s tall picture with out clipping paths or polygons — simply the pure silhouette of her picture shaping the textual content.

Silhouette of Patty's image on the left and two slightly rotated squares on the right that the text will flow around. — Constructing rotations into photos.

When a picture is rotated utilizing a CSS remodel, ideally, browsers would reflow textual content round its rotated alpha channel. Sadly, they don’t, so it’s usually needed to construct that rotation into the picture.

`shape-outside` with a faux-centred picture

For textual content to circulate round parts, they have to be floated both to the left or proper. Putting a picture within the centre of the textual content would make Patty’s biography design extra placing. However there’s no heart worth for floats, so how would possibly this be doable?

Patty’s picture set between two textual content columns. See this instance in my lab.

Patty’s bio content material is break up throughout two symmetrical columns:

#dolly {
  show: grid;
  grid-template-columns: 1fr 1fr;
}

To create the phantasm of textual content flowing round either side of her picture, I first break up it into two components: one for the left and the opposite for the suitable, each of that are half, or 50%, of the unique width.

A silhouette of Patty's image with a dotted line dividing the image vertically against a transparent background. — Splitting the picture into two items.

Then I positioned one picture within the left column, the opposite in the suitable:


  
    
    [...]
  
  
  
    
    [...]

To offer the phantasm that textual content flows round either side of a single picture, I floated the left column’s half to the suitable:

#dolly > *:nth-child(1) img {
  float: proper;
  width: 40%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-left.webp");
  shape-margin: 2%;
}

…and the suitable column’s half to the left, in order that each halves of Patty’s picture mix proper within the center:

#dolly > *:nth-child(2) img {
  float: left;
  width: 40%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-right.webp");
  shape-margin: 2%;
}

Patty's image centered between two columns of white text flowing around it. — Fake-centred picture. See this instance in my lab.

Fake background picture

To date, my designs for Patty’s biography have included a cut-out portrait with a clearly outlined alpha channel. However, I usually must make a design that feels looser and extra pure.

Image of Patty sitting on a chair and playing an acoustic guitar. White text on a black background flows around it on the right. — Fake background picture. See this instance in my lab.

Ordinarily, I might place an image as a background-image, however for this design, I needed the content material to circulate loosely round Patty and her guitar.

A large photo of Patty sitting on a chair playing an acoustic guitar. She is positioned slightly to the left of the frame. — Giant featured picture

So, I inserted Patty’s image as an inline picture, floated it, and set its width to 100%;


  
  [...]

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
}

There are two strategies I would use to circulate textual content round Patty and her guitar. First, I would edit the picture, eradicating non-essential components to create a soft-edged alpha channel. Then, I might use the shape-image-threshold property to manage which components of the alpha channel kind the contours for textual content wrapping:

#kenny > img {
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-image-threshold: 2;
}

The same image of Patty sitting in a chair playing an acoustic guitar. The right side has been removed following her shape, leaving a transparent area around her. — Edited picture with a soft-edged alpha channel

Nevertheless, this technique is damaging, since a lot of the feel behind Patty is eliminated. As a substitute, I created a polygon clip-path and utilized that because the shape-outside, round which textual content flows whereas preserving all of the element of my authentic picture:

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
  shape-outside: polygon(…);
  shape-margin: 20px;
}

A white dotted line shows the image's clipped area. — Authentic picture with a non-destructive `clip-path`.

I’ve little time for writing polygon path factors by hand, so I depend on Bennett Feely’s CSS clip-path maker. I add my picture URL, draw a customized polygon form, then copy the clip-path values to my shape-outside property.

Editing the Patty image in Clippy, Bennett Feely’s CSS clip path maker. — Bennett Feely’s CSS clip path maker.

Textual content between shapes

Patty Meltt likes to push the boundaries of nation music, and I needed to do the identical with my design of her biography. I deliberate to circulate textual content between two photomontages, the place parts overlap and components of the photographs spill out of their containers to create depth.

Two large montages of Patty with a column of white text on a background in between them, following the shapes. — Textual content between shapes. See this instance in my lab.

So, I made two montages with irregularly formed alpha channels.

Showing silhouettes of the irregularly shaped alpha channels against a transparent background. — Irregularly formed alpha channels

I positioned each photos above the content material:


  
  
  […]

…and used those self same picture URLs as values for shape-outside:

#johnny img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-1.webp");
  shape-margin: 2%;
}

#johnny img:nth-of-type(2) {
  float: proper;
  width: 35%;
  shape-outside: url("img/patty-2.webp");
  shape-margin: 2%;
}

Content material now flows like a river in a rustic track, between the 2 picture montages, filling the design with power and motion.

Conclusion

Too usually, photos in long-form content material find yourself boxed in and remoted, as in the event that they had been dropped into the web page as an afterthought. CSS Shapes — and particularly shape-outside — give us an opportunity to deal with photos and textual content as a part of the identical composition.

This issues as a result of design isn’t nearly making issues usable; it’s about shaping how individuals really feel. Wrapping textual content across the curve of a guitar or the sting of a portrait slows readers down, invitations them to linger, and makes their expertise extra immersive. It brings rhythm and persona to layouts which may in any other case really feel flat.

So, subsequent time you attain for a rectangle, pause and take into consideration how shape-outside may also help flip an peculiar web page into one thing memorable.