md`# Day Eighteen (Task 7-1-10, 11, Sept. 11, 2020`
md`## Task 6-6
data("dataset") or data(dataset)? Think about it.
`
md`## Task 7-1
- 7-1-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-1-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 margi 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\`.
`
md`
- 7-1-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-1-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](https://hongtaoh.com/en/2020/09/07/d3-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)\`.
`
md`
Go to [Day 19](https://observablehq.com/@hongtaoh/day-nineteen-spet-12-2020).
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.