This is a visualization of the inner (dot) product of two vectors in two-dimensional Euclidean space.
See this page on LinkedIn for a longer description.
It shows the geometric definition of the inner product of two vectors
(a, b) = |a| |b| cos θ
and how applying this geometric definition to the orthogonal expansion of the vectors provides a derivation of the equivalent Cartesian coordinates formula
(a, b) = a(1) b(1) + a(2) b(2).
In other words,
(a, b)
= (ax + ay, bx + by)
= (ax, bx) + (ax, by) + (ay, bx) + (ay, by)
= |ax| |bx| cos 0 + |ax| |by| cos pi/2 + |ay| |bx| cos pi/2 + |ay| |by| cos 0
= |ax| |bx| + |ay| |by|
= a(1) b(1) + a(2) b(2).By virtue of the orthogonality of the basis vectors, all of the cosine factors reduce to zeros and ones, leaving only the x- and y- coordinates of the vectors.
This is the essential idea underlying the “sum of products of coordinates” formula — the coordinates represent the lengths of the projections of the vector onto some complete orthogonal basis set of vectors.