## 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)`

.