4.1 Task 7-1 to 7-9

From Day 13

  • 7-1. Based on Task 6-6. For the X coordinate, set the input domain to be [0, the largest number of d[0]], and the output range to be [0, w]. For the Y coordinate, set the input domain to be [0, the largest number of d[1]], and the output range to be [0, h].

Change the location of each circle and annodated text accordingly. For the text, use “sans-serif” in 11px and in red.

  • 7-2. Let the circles with larger y values be at the top of the plot and those with smaller values at the bottom. Hint: change the output range of yScale.

  • 7-3. To keep the circle elements 20 pixels away from the boarder of the SVG. Hint: create a padding of 20 and then change the output range of both xScale and yScale.

  • 7-4. Texts on the far right are still being cut off, solve this problem. Hint: adjust the range of xScale.

Note that to create paddings on each side of our charts, a better way is Mike Bostock’s Margin Convention.

  • 7-5. Use the method of Margin Convention mentioned above. top: 20, right: 30, bottom: 30, left:40

  • 7-6. (Please note that this is not the ideal way to scale cirlces! We’d better scale them by area rather than by radius. This is just for illustration and for the sake of exercise!) Create a custom scale for radius such that the greater the y value, the bigger the radius. Let the domain be [0, the largest number of y value], and the range be [2, 5].

  • 7-7. Add an array to the original dataset, [600, 150].

  • 7-8. Change the width of the SVG to be 600, and the height 300.

  • 7-9. Tell me what the functions of nice(), rangeRound(), and clamp() do and how to use them.