Linear Transformation Visualizer

Most people meet a matrix as a box of numbers with a rule for multiplying. The rule works and explains nothing. Read another way, the box is an instruction: send this arrow there, send that arrow there.

That second reading is the one worth keeping. It turns the determinant into an area, an eigenvector into a line that stays put, and the most useful factorization in applied mathematics into three plain motions. None of it needs more than a grid and two arrows.

Two columns fix the whole plane

Start with the two unit arrows of the plane, one along x and one along y. A linear transformation moves every point, but it is not free to move them any way it likes. Grant Sanderson’s 3Blue1Brown lessons give the visual test: every line must remain a line, the origin must stay where it is, and grid lines must remain parallel and evenly spaced. A map that bends the grid or shifts its center is not linear.

Those rules are tight enough that two facts decide everything. Any point is so many steps along the first arrow plus so many along the second, and after the map it is the same number of steps along wherever those two arrows landed. So you only need to record where the two basis vectors go. Write the landing spot of the first as a column, the landing spot of the second beside it, and you have the matrix.

The Georgia Tech textbook Interactive Linear Algebra states the same thing as a theorem for any number of dimensions: the columns of the matrix are the images of the standard coordinate vectors. That is why dragging the tip of one arrow in the tool on this page rewrites one column and nothing else. It is also why three arrows are enough for all of space.

One number for area, and what its sign means

Stretch and squash a region and its area changes. The surprise is that a linear map changes every area by the same factor, whatever the region’s shape or position. That factor is the determinant. For the matrix with rows (a, b) and (c, d) it is ad - bc. Sanderson’s first example has rows (3, 0) and (0, 2), which triples widths, doubles heights and so multiplies areas by 6.

The unit square is the natural test piece. Its image is the parallelogram spanned by the two columns, and the area of that parallelogram is the size of the determinant. In three dimensions the unit cube becomes a slanted box, a parallelepiped, and the Georgia Tech text proves that its volume is the absolute value of the determinant.

The sign carries separate information. A negative determinant means the map has turned the plane over, as if a sheet of paper had been flipped: the second arrow, which began on the left of the first, ends up on its right. In space the right-hand rule decides the sign. An asymmetric shape shows it at once, which is why a letter F is a better test than a square.

A determinant of zero is the dramatic case. All of the plane is squashed onto a line, or onto the single point at the origin, and the area of everything becomes nothing. Many different points now land on the same spot, so no map can send them back. An inverse is by definition the transformation that undoes the first one, and here there is nothing left to undo.

Directions that keep their line

Most arrows are knocked off their own line by a transformation. A few are not: they come out longer, shorter or reversed, but still pointing along the line they started on. Those are eigenvectors, and the factor by which each is stretched is its eigenvalue. Finding them is the quickest way to see what a map really does.

Some maps have none at all. Turn the plane a quarter turn and every arrow leaves its line. The algebra agrees: the eigenvalues are the roots of a polynomial, which for the quarter turn is the square of lambda plus 1, and no real number satisfies it. The roots are i and -i.

Complex roots are not a dead end. The rotation-scaling theorem in the Georgia Tech text says that a 2 by 2 real matrix with a complex eigenvalue is similar to a rotation combined with a scaling, and that the scale factor is the size of the eigenvalue. So the honest report for such a matrix is an angle and a factor, with no line drawn.

Other maps have too few. The shear with rows (1, 1) and (0, 1) holds the x axis fixed and slides everything else sideways. Its only eigenvalue is 1, counted twice, and its only eigenvectors lie on the x axis. A plane needs two independent directions and this map offers one. Such a matrix cannot be diagonalized, and is called defective.

Scaling everything by 2 is the opposite extreme: one eigenvalue, and every arrow is an eigenvector. In space the idea earns its keep, because the eigenvector of a rotation is its axis, with eigenvalue 1.

Rotate, stretch, rotate

Eigenvectors can fail to exist. The singular value decomposition never does: only matrices that are not defective have an eigenvalue decomposition, while every matrix has this one. It says that any matrix at all is a rotation, followed by a scaling along the coordinate axes, followed by another rotation, where either turn may include a reflection. The three factors are written U, S and V transposed.

Geometry makes the claim visible. Take the unit circle. The first rotation leaves it a circle. The scaling turns it into an ellipse lined up with the axes. The last rotation swings that ellipse into place. The lengths of the semi-axes of the final ellipse are the singular values, and they are never negative.

Try the matrix with rows (3, 0) and (4, 5). Its determinant is 15 and its eigenvalues are 3 and 5. The decomposition turns the plane 45 degrees clockwise, stretches by 6.708 and 2.236, then turns it 71.57 degrees counterclockwise. Multiply the two stretches and 15 comes back. Set the tool’s path to the three steps and watch the circle do exactly that.

The idea is old. Eugenio Beltrami and Camille Jordan found the singular values independently, in 1873 and 1874, while studying bilinear forms. The link to eigenvectors is direct: the singular vectors of A are the eigenvectors of A transposed times A and of A times A transposed, two matrices that are always square and symmetric.

Practical ways to compute it came much later, in the 1950s and 1960s. One family of methods is modelled on Jacobi’s eigenvalue algorithm: it rotates pairs of columns until all of them are at right angles, and reads the singular values off as the lengths of those columns. James Demmel and Kresimir Veselic argued in 1989 that this approach computes small values with a better relative accuracy bound than the QR method, and the GNU Scientific Library documents its Jacobi routine in the same terms. That matters when a matrix is close to singular and its smallest stretch is the very number in question. The tool here uses the one-sided form.

Order matters, and where this turns up

Doing one map and then another is matrix multiplication, read right to left. The order usually changes the answer. Let A be the shear above and B the quarter turn with rows (0, -1) and (1, 0). Then AB has rows (1, -1) and (1, 0), while BA has rows (0, -1) and (1, 1). In short, AB is not BA.

Repeating a single map gives powers, and some are famous. The matrix with rows (1, 1) and (1, 0) is known as the Fibonacci Q matrix, and a 1951 note by J. L. Brenner showed that its nth power holds three consecutive Fibonacci numbers. The tenth power therefore has entries 89, 55, 55, 34.

Every web browser does this arithmetic. The CSS function matrix() takes 6 numbers: four describe the linear transformation and two the translation. The extra pair is needed because a linear map cannot move the origin, so the function is defined as a homogeneous transformation matrix, one dimension larger, in which a shift becomes legal.

Data analysis leans on the same decomposition. The principal component analysis in the scikit-learn library is described in its own documentation as linear dimensionality reduction using the singular value decomposition of the data. Gilbert Strang’s textbook chapter treats a grayscale image as a large matrix, split by the decomposition into rank one pieces, each a column times a row, and kept only while they matter.

A picture has limits, and they should be said plainly. Arrows on a screen cover two and three dimensions; the matrices used on images and data are far larger, and there the numbers must be trusted without the view. A linear map cannot bend a line or move the origin. A nearly singular matrix has an inverse on paper that is useless in practice, since a tiny change in one entry swings it wildly. And the smooth path a tool draws from the identity to a matrix is a choice of animation, not part of the mathematics.