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