This exercise tackles a few objectives:

• Graph data that takes on negative, zero, and positive values in its domain and range. This requires making a distinction between chart axes and mathematical axes. To elaborate:

  The x axis of a chart is normally at the bottom of the chart and the y axis is at the left hand side or right hand side of the chart. However, to portray data that can be negative, zero, or positive typically requires drawing mathematical axes as well; that is, axes that pass through zero horiztonally and vertically.

• Generate a chart x axis that is expressed in units of PI. This is not trivial and involves coding a rather elaborate formatting function that converts the data to labels exhibiting the greek letter PI (π).
• Generate a legend. A legend that is poorly designed or poorly placed can stick out like a sore thumb. I try to provide a legend that is informative but understated.
• Shade the areas between the curves and the mathematical x axis. This does not, frankly, enhance the intellectual content of the chart, but adds some color that I hope you find pleasing.

Implemented with D3.

You can view the code for this exercise on Github.