md`# Day Twenty Nine, 2020-09-22`
md`
## Understanding, finally:
svg.selectAll("placeholder-for-rects") // This will select all placeholder elements and hand them off to the next step
.data(dataset) // This will bind data to the selected placeholder elements, and then return references to all elements to which data was just bound. References to these elements are called "update selection".
.enter() // Select elements that do not yet exist and hand them off to the next step.
.append("rect") // Create a rect element within each element returned by \`enter()\`, and then return reference to this newly created element.
`
md`
- 9-1-4.
- \`<p>Click Here</p>\`. No need to use ""
- \`alert("phrase here")\`
- 9-1-5. Even if you used \`svg.selectAll("placeholder-for-rects")\` to create and select placeholder elements to be used later, you still need to use \`svg.selectAll("rect")\` in \`.on()\` when you updating the data.
`
md` ## Task 9-2
- 9-2-5. Within \`.on("start", ...)\`, you need to use \`d3.select(this)\`, rather than \`svg.select(this)\`.
- 9-2-7. You can add many transitions you want. However, you cannot add a transition within in \`.on("start", ...)\`, which is designed for immediate transformations, not interpolated ones.
For example,
\`svg.selectAll("circle")
.data(dataset)
.transtion()
.duration(1000)
.transition()
.duration(1000)
.
.
.
\` is okay.
- 9-2-9.
- \`bars.enter().append("rect")...\` will return references to newly created element. Therefore, all the codes that follow will be used for this newly created bar, until you use \`merge()\`.
`
md`
Go to [Day 30](https://observablehq.com/@hongtaoh/day-thirty-2020-09-22).
`
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.
