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
cyare pretty long. Try to round up those numbers using the
7-11. Scale those circles by area rather than by radius, such that the bigger the
yvalue, the bigger the area of a circle. Let the area be within [0, 10]. hint : use
d3.scaleSqrt(), and remember to replace
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
yvalue 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.scaleSqrtmaps from the input domain to the output range using this fomula:
y = m*x^(1/2) + b, where
xrepresents the input domain (i.e., the y value of data points, or the area of Circel A, B, C…) and
yrepresents 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).