5.1 Task 8-1 to 8-6

From Day 19

  • 8-1. Create an axis on top of the chart for xScale. Assign a class named “axis” to the group element you just created at the end of the svg element. hint : think about whether you need to use d3.axisTop() or d3.axisBottom().

  • 8-2. Push the axis to the base of the chart using SVG transformations.

  • 8-3. Style path and line in .axis such that they are in teal (Hint: using stroke: teal;). Style text such that it is Optima, sans-serif, bold, 14px, and in teal.

  • 8-4. Set the rough number of ticks to be 5. // D3 might override it, though.

  • 8-5. Only label 0, 100, 250, and 600, using tickValues([]).

  • 8-6. Generate a Y-axis on the left. Set the rough number of ticks to be 5. Push this axis to the right by margin.left px. Also assign the class of “axis” to it.