Interactagraphs

I love graphs. I love visualizations of any kind. If I didn't hate clichés, I would add that a picture is worth a thousand words. But this is the age of computers, It's not enough to just look at things anymore. I want to be able to play with them. I want interactagraphs.

(Two disclaimers: 1. "Interactagraph" is a word I just made up, and it's awesome. 2. All of my interactagraphs require flash, so if that doesn't work in your browser, you're out of luck.)

Areas and Perimters

A little while ago I got an email from a friend asking me if a rectangle's area is always bigger than its perimeter [footnote 1]. Clearly it's not (consider a 3x5 rectangle with perimeter = 16 and area = 15). The natural follow-up question is, are they ever equal [seriously, see footnote 1 if you haven't already]? Recall if you have a rectangle that's x wide and y long, then its area will be xy and its perimeter will be 2x+2y. So finding when area is equal to perimeter means solving the equation xy=2x+2y. Solved for y this equation looks like:

As I was getting ready to send this answer to him, I realized that it's not very satisfying if you're not familiar/comfortable with algebra. So I whipped up a graph with graphcalc, and sent that to him:

Graph of  xy=2x+2y.

But I have to say, This isn't a huge improvement over the equation. Unless you are very used to reading graphs, this just looks like a very dangerous stick-figure roller coaster. Then I realized that I wasn't going to print this and mail it to him (I can't afford stamps). This is the Internet; I can make this interactive. I can make an interactagraph:




The interactivity is pretty limited: just move your mouse around. As you move, the rectangle grows or shrinks and changes colors. The values that hover above your mouse are the x and y values (the length and width of the rectangle). Blue rectangles have perimeter larger than area, green rectangles, the other way round. The red curve is the switching point. That's it. I think as far as answers go, that's pretty clear.

Exponents


Working as a tutor, I can say with confidence that exponents are a source of confusion for many algebra students. Take a look at the graphs of . The first is a parabola, the second a diagonal line, the third a flat line and the fourth a hyperbola. The equations all look pretty much the same (x raised to a number), but the pictures are very, very different. What gives? Enter the interactagraph:



Just wave your mouse left and right and watch as the exponent changes. The red curve is the graph of the function from x=0 to x = 10. And there's such a wealth of information that can be pulled from just this. For example,  for all n; wave your mouse around and observe that the point (1,1) is always on the cuve. Also,  curves upward (like a bowl) whenever n is greater than 1 or less than 0, but curves down (like an umbrella) whenever n is between 0 and 1. In calculus we call the direction it curves concavity and it usually takes some mathematical sophistication to find [footnote 2]. But here we can observe it with just a simple interactagraph .

Derivatives


Every semester I tutor a new batch of Calculus I students (my favorite to tutor) and every semester I draw the same picture of a curve with a secant line passing through it. After much labeling and and hand waving (and repeated use of the word "infinitesimal," mostly because it's an awesome word to say), I produce the definition of the derivative:

Here's the interactagraph that does a much better job:

Your mouse changes the value of x+h, click (or hold) to move x. On the right you can change the function. Play with this until you understand calculus.

But this can do more than just show the definition of the derivative. You can show that the derivative of a function is always 0 at a max or min: Change the function to cos(x) and move the mouse to slightly to the left of the origin (about x = .5). Hold the mouse button down and slowly move to the right. Notice how the tangent line (pink) is horizontal exactly when the the function is at a max?

Or you can find inflections points. Sticking with cos(x), with the mouse button held down start at the center and slowly move to the right. Notice how the tangent line is always on top of the curve? Now keep moving until the the tangent line is underneath the curve. Somewhere between the max (x = 0) and the min (x = 3.14...) the tangent line jumps from the top of the curve to the bottom. That jumping point is what is called the inflection point.

Graph Theory

This one is a lot less exciting than the others, but it's included to give a taste of how far reaching the world interactagraphs can be.



Click to add vertices. Hold shift to connect vertices with edges. Hold control to delete unwanted vertices. This interactagraph is kind enough to tell you if your graph is connected, regular or Eulerian.

Conclusion

I'm hardly the first person to use interactive graphs. This site has an applet for every theorem of Euclid's Elements. Cut the Knot has applets for many of their pages. Math is Fun has interactagraphs for many ideas (I especially like the quadratic grapher and the equation balancer).

I don't mean to present interactagraphs as a replacement for traditional static graphs. Rather, they're a supplement, meant to make mathematics a hands on experience. Also, they're pretty fun to make.

-Nick


FOOTNOTES:
[1] Asking when area is bigger than perimeter is kind of a nonsense question. Perimeter and Area  have different units (units and square units). It's like asking if 27 seconds is bigger than 42 inches.

[2]