A Geometric Proof of the Pythagorean Theorem in D3.js

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)² = a² + 2ab + b², (a+b)(a-b) = a²-b²) 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; a² + b² = c².

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 a², b², c², respectively.

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

If you subtract the triangles(2ab) from the empty square(a² + 2ab + b²),

You should be left with an empty space that can be occupied by either a² + b² or c²

(a + b)² = c² + 2ab · (a + b)² = a² + b² + 2ab

c² + 2ab = a² + b² + 2ab

c² = a² + b²

Don't believe it? Drag around the shapes

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

View Source Hide Source

# Helper methods
rectPoints = (x, y, a, b) ->
  [ [x, y], [x, y + b], [x + a, y + b], [x + a, y] ]

trianglePoints = (x, y, a, b) ->
  [ [x, y], [x, y + b], [x + a, y] ]

dragstarted = (d) ->
  d3.event.sourceEvent.stopPropagation()
  d3.select(@).classed("dragging", true)

dragged = (d) ->
  movePoly(@, d, d3.event.x, d3.event.y, d.rot)

dragended = (d) ->
  d3.select(@).classed("dragging", false)

movePoly = (object, d, x, y, rot) ->
  d3.select(object)
     .attr("transform", "translate(#{d.x = x}, #{d.y = y}) rotate(#{d.rot = rot})")

animatePoly = (object, d, x, y, rot) ->
  d3.select(object).transition().duration(1000)
     .attr("transform", "translate(#{d.x = x}, #{d.y = y}) rotate(#{d.rot = rot})")

###
###

$(document).on 'page:load', () ->
  return unless $('#pyth-graph').length
  buildPythGraph(70, 160)

#
window.randomPythGraph = () ->
  a = Math.ceil(Math.random() * 90)
  buildPythGraph(a, 180 - a)

#
window.buildPythGraph = (a, b) ->
  $('#pyth-graph').empty()

  #
  width   = $('.post-content').width()
  height  = width * 0.7
  pad     = { top: 10, left: 10 }'}
  a       = a * (width / 720)
  b       = b * (width / 720)
  c       = Math.sqrt((a*a) + (b*b))

  #
  color = d3.scale.category10()
  drag  = d3.behavior.drag()
             .origin((d) -> d)
             .on("dragstart", dragstarted)
             .on("drag", dragged)
             .on("dragend", dragended)
  svg   = d3.select('#pyth-graph')
             .append('svg')
             .attr('width', width)
             .attr('height', height)

  #
  triangles = [0,1,2,3].map (ndx) -> {
      class: 'abTriangle'
      label: "(a * b) / 2"
      color: color(5),
      points: trianglePoints(0, 0, a, b)
      x: pad.left + a + b + a + b + 30 + (if ndx > 1 then a else 0)
      y: pad.top + (if ndx % 2 then b else 0)

      # Solution A Position
      solA_X: [pad.left, (pad.left+a+b), (pad.left+a+b), pad.left][ndx]
      solA_Y: [pad.top, pad.top, (pad.top+a+b), (pad.top+a+b)][ndx]
      solA_Rot: [0, 90, 180, 270][ndx]

      # Solution B Position
      solB_X: [(pad.left+b), (pad.left+b), (pad.left+a+b), pad.left][ndx]
      solB_Y: [pad.top, (pad.top+b), (pad.top+b), (pad.top+a+b)][ndx]
      solB_Rot: [0, 90, 180, 270][ndx]
    }

  #
  squares = [ {
    id:    "aSquare"
    label: "a * a"
    color:  color(1)
    points: rectPoints(0, 0, a, a)
    x:      pad.left
    y:      pad.top
    solB_X:   pad.left + b
    solB_Y:   pad.top + b
    solB_Rot: 0
  },
  {
    id:     "bSquare"
    label:  "b * b",
    color:  color(2)
    points: rectPoints(0, 0, b, b)
    x:      pad.left + a + 10
    y:      pad.top
    solB_X:   pad.left
    solB_Y:   pad.top
    solB_Rot: 0
  },
  {
    id:     "cSquare"
    label:  "c * c"
    color:  color(3)
    points: rectPoints(0, 0, c, c)
    x:      pad.left
    y:      pad.top + b + 10
    solA_X:   pad.left + a
    solA_Y:   pad.top
    solA_Rot: Math.atan(a/b)*(180/Math.PI)
  },
  {
    id:     "abSquare"
    label:  "(a+b) * (a+b)"
    color:  color(4)
    points: rectPoints(0, 0, (a+b), (a+b))
    x:      pad.left + a + b + 20
    y:      pad.top
    clear:  true
    solA_X:   pad.left
    solA_Y:   pad.top
    solA_Rot: 0
    solB_X:   pad.left
    solB_Y:   pad.top
    solB_Rot: 0
  } ]

  # Render shapes and labels
  shapes = squares.concat(triangles)
  shape.rot = 0 for shape in shapes
  group = svg.selectAll('.poly')
              .data(shapes)
              .enter().append('g')
               .attr('class', (d) -> "poly #{d.class}")
               .attr('transform', (d) -> "translate(#{d.x}, #{d.y})")
               .attr('id', (d) -> d.id)
               .call(drag)
  group.append('polygon')
        .attr("points", (d) -> (d.points.map((d) -> d.join(",")).join(" ")))
        .attr("stroke", (d) -> d.color)
        .attr('fill-opacity', (d) -> if d.clear? then '0' else '1')
        .attr("fill", (d) -> d3.rgb(d.color).brighter(1))
  group.append('text')
        .attr('dx', (d) -> "#{d.points[2][0]/2}px")
        .attr('dy', (d) -> "#{d.points[1][1]/2}px")
        .attr('class', 'text-label')
        .text((d) -> d.label)

  # Solution A: triangles in corners
  window.solveA = () ->
    d3.selectAll("#aSquare, #bSquare").each (d) ->
      animatePoly(@, d, (a+b+100), pad.top, 0)
    d3.selectAll("#cSquare, #abSquare, .abTriangle").each (d) ->
      animatePoly(@, d, (d.solA_X), d.solA_Y, d.solA_Rot)

  # Solution B: overlap triangles to make rectangles
  window.solveB = () ->
    d3.selectAll("#cSquare").each (d) ->
      animatePoly(@, d, (a+b+100), pad.top, 0)
    d3.selectAll("#aSquare, #bSquare, #abSquare, .abTriangle").each (d) ->
      animatePoly(@, d, (d.solB_X), d.solB_Y, d.solB_Rot)

  # Highlight labels on hover
  group.on('mouseover', (d) ->
            d3.select(@).select('.text-label')
               .style('opacity', '1')
          ).on 'mouseout', (d) ->
            d3.select(@).select('.text-label')
               .style('opacity', '0.1')