md`# Day Twenty Two (Task 9-1 continued), 2020-09-15`
md`
- 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\`.
- 8-1. \`g\` element is a \`group\` element. It is an SVG element, just like \`line\`, \`circle\`, and \`rect\`. One thing different is that \`g\` element is invisible. It serves two functions:
1. Helps us group other elements;
2. Accepts transformations onto it, which is very handy.
- 8-7. \`for (var i = 0; i < 50; i++){}\`. Two points to remember:
1. It should be \`var i = 0\`, rather than simply \`i = 0\`;
2. Seperate the codes inside the bracket by \`;\`, not \`,\`.
`
md`## Functions you absolutely have to call \`d3\` first:
- d3.scaleLinear() ...
- d3.max()
- d3.range()
- d3.easeLinear
`
md`
- 9-1-2.
- It should be \`paddingInner()\`, rather than \`PaddingInner()\`.
- \`{return "rgb( )"}\`
- 9-1-3. \`.attr("text-anchor", "middle")\`
- 9-1-4. I should use \`d3.select("p")\`, rather than \`svg.select("p")\`. Why? Because the new \`p\` element is parallel with the \`svg\` element, I cannot select the \`p\` within \`svg\`.
- 9-1-5. The \`.transition()\` should be added within the anonymous function. It should be put after you have updated the data and before any changes.
- 9-1-8. It is \`ease(d3.easeLinear()\`, not \`ease(d3.scaleLinear())\`.
- 9-1-9. Scott Murray was wrong. The position of \`.delay()\` is not flexible at all. It mush be put AFTER \`.transition()\`.
`
md`
- 9-1-10. Please keep in mind that if you have \`.delay()\` after the \`.transition()\`, then \`duration()\` is applied to each individual transition, rather than all transitions in aggregate.
`
md`
- 9-1-11. Continue with 9-1-10. To scale the dynamic delay to the lenght of the dataset.
`
md`
Go to [Day 23](https://observablehq.com/@hongtaoh/day-twenty-three-2020-09-16).
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
