4.2 Task 7-10 & 7-11

From Day 18

• 7-10. Check out the element inspector after Task 7-1-9 is done. You’ll find that the numbers for cx and cy are pretty long. Try to round up those numbers using the rangeRound() method;

• 7-11. Scale those circles by area rather than by radius, such that the bigger the y value, the bigger the area of a circle. Let the area be within [0, 10]. hint : use d3.scaleSqrt(), and remember to replace rScale with aScale.

  • Please note that for aScale, the starting point for both the input domain and the output range must be zero. If you don’t understand why, read my blog post on d3.js scales.

  • Why should we use d3.scaleSqrt() here: If the y value of data point A is four times as big as that of data point B, then we want to make sure that Circle A’s area is also four times as large as that of Circle B. To maintain this ratio, we need to make sure that Circle A’s radius is twice as large as that of Circle B. d3.scaleSqrt maps from the input domain to the output range using this fomula: y = m*x^(1/2) + b, where x represents the input domain (i.e., the y value of data points, or the area of Circel A, B, C…) and y represents the output range (i.e., the radius of Circle A, B, C…). In our case, sine the starting point for both the input domain and the output range is zero, b = 0. Therefore, y_1 / y_2 = (x_1 / x_2)^(1/2).