Change of Variables and the Jacobian

When you switch coordinates inside a double integral, areas do not carry over unchanged: a small rectangle $du\,dv$ in the source plane becomes a small parallelogram in the target plane, and its area is scaled by the Jacobian determinant $|J| = |\partial(x,y)/\partial(u,v)|$. That is the whole content of $dx\,dy = |J|\,du\,dv$ and of the change-of-variables theorem $\iint_R f\,dx\,dy = \iint_S f(T)\,|J|\,du\,dv$. This playground pushes a real grid through a real map and colours each mapped cell by its local $|J|$, so you can see where the map stretches (bright, $|J|\gt 1$) and where it squeezes (dark, $|J|\lt 1$). The classic case is polar coordinates, where $|J| = r$: the famous $r$ in $r\,dr\,d\theta$ is just the area stretch that grows with distance from the origin.

Figure 1. Change of variables and the Jacobian. Top: a regular grid on the source region. Middle: its image under the map, each cell coloured by the local area-scaling factor |J| and drawn with the Jacobian parallelogram at the draggable probe. Bottom: the area accumulated with the |J| factor (the change-of-variables integral, converging to the true mapped area) and without it (wrong). Method: exact maps with closed-form and central-difference Jacobians; shoelace cell areas. Source: Stewart, Calculus, 8th ed., Sec. 15.10.

map

grid N10

WHAT TO TRY

Drag the probe (orange) around the source grid and watch the Jacobian parallelogram in the mapped plane grow and shrink; its area is exactly $|J|$ times the source cell.
Stay on the polar map: the cells far from the origin are bright and large because $|J| = r$ grows with radius, the geometric meaning of $r\,dr\,d\theta$.
Switch to the linear shear: $|J|$ is constant everywhere (every cell the same colour), because an affine map scales all areas by the same $|\det|$.
Raise the grid resolution and watch the bottom plot: the area computed with $|J|$ converges to the true mapped area, while the area computed without it stays stuck at the wrong source-area value.