This is a visualization of a discrete fourier transform. In "Component view" mode, you can select the spectral components of your signal, and view the summed graph. The lines show the components and the filled curve shows the sum of these components. You can also set the offset of each component, in multiples of π radians.

In "Fourier view" mode, you can individually visualize the 8 sine and 8 cosine components, and the multiplication of these components with the signal created in "Component view" mode. The multiplication of the two signals is shows as the filled curve.

Each term of a discrete fourier transform is the sum of multiplying samples of the signal by integer multiples of sine and cosine waves of a base frequency. When the graph of the multiplied waveforms is mostly above the center line, this means the sum of the products will be positive. If it's mostly below, the sum will be negative. If there's as much above as below, the sum will be zero.

The discrete fourier transform works because multiplying a sine or cosine wave of a particular frequency with a signal not containing that frequency yields a zero sum. You can prove this to yourself by turning up all the amplitudes except for one frequency, say 5, then viewing the sine and cosine fourier components for that frequency. You'll see that the resulting waveform has as much above the center line as below.

If you play with the offset values, you can see how the values of the sine and cosine components of the fourier transform vary. The ratio of these two components specifies the phase of each spectral component. The magnitude (the last value in the fourier components section) remains unchanged.