4.3 Task 7 Review

7-1. You cannot use the function of max by calling itself. You have to call d3 first, just like when you are using scaleLinear(). This is because both scaleLinear() and max() are d3 functions or methods.
7-5.
- My original understanding of margin convention is wrong. There isn’t magic involved here. What var margin = ({ }) does here is simply assign numbers to names, so that those numbers can be referred to by calling margin.top, margin.left….
- If the range of yScale was initially [h, 0], do pay attention when you use margin convention. If you can do it right, you have clearly understood margin convention. Hint : It should be .range([h - margin.bottom, margin.top]).
- Why is that we should use .range([h - margin.bottom, margin.top]) here? The domain here is ([0, the maximum of d[1]), and we want circles with smaller d[1] values appear at bottom, so the range should start from h something. Now, suppose margin.top = 20, and margin.bottom = 40. If we use .range([h - margin.top, margin.bottom]), then 0 in the input domain will become h - margin.top, and that will be the lowest point in our chart. Is this what we want? Not really. I want the lowest point to be at h - margin.bottom.

7-1. The order of codes does matter in D3.js. If I put xScale and yScale before var dataset = ..., then D3 would not be able to generate any results. This because I need to call dataset in xScale and yScale.

7-1-5. In var margin = ({top: 20, right: 30, bottom: 30, left: 40});, you should not, and in fact cannot, put ; right after left:40.