A Geometric Proof of the Pythagorean Theorem in D3.js

February 11th, 2014

Things are best proved through showing instead of telling. When I was growing up, someone showed me this geometric proof along with a few others((a+b)2 = a2 + 2ab + b2, (a+b)(a-b) = a2-b2) that have stuck with me because of their simplicity. With the help of D3.js, I've animated and made the proof interactive.

The Pythagorean theorem

I'll avoid a math or history lesson and just say what we're trying to prove: The Pythagorean theorem states that the sum of the squares of the two sides(a, b) adjacent to the right angle on a right triangle is equal to the square of the side(c) opposite the right angle; a2 + b2 = c2.

Some quick algebra and geometry...

Each blue triangle has sides of length a, b, c.

Since the triangles are right, they each have an area of (a * b)/2, or a total area of 2ab for all four.

The yellow, green, red squares have areas of a2, b2, c2, respectively.

The empty square has an area of (a + b)2 or a2 + 2ab + b2.

If you subtract the triangles(2ab) from the empty square(a2 + 2ab + b2),

You should be left with an empty space that can be occupied by either a2 + b2 or c2

(a + b)2 = c2 + 2ab · (a + b)2 = a2 + b2 + 2ab

c2 + 2ab = a2 + b2 + 2ab

c2 = a2 + b2

Don't believe it? Drag around the shapes

Still don't believe it? Pick random values for a and b

View Source