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 thesvg
element. hint : think about whether you need to used3.axisTop()
ord3.axisBottom()
.8-2. Push the axis to the base of the chart using SVG transformations.
8-3. Style
path
andline
in.axis
such that they are in teal (Hint: usingstroke: teal;
). Styletext
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.