Rotating Text Labels for a Graph Axis

An answer to the problem of overlapping axis values might be to rotate the text to provide more space.

Preparation

The first substantive change would be a little housekeeping. Because we are going to be rotating the text at the bottom of the graph, we are going to need some extra space to fit in our labels. So we should change our bottom margin appropriately.

var margin = {top: 20, right: 20, bottom: 70, left: 50},

I found that 70 pixels were sufficient.

The remainder of our changes occur in the block that draws the x-axis.