md`# Day 33, 2020-09-26`
md`
I tried what Scott Murray said on P.202 about "grouping SVG elements". I did find [a solution](https://stackoverflow.com/a/20644664/13716814) to appending a rect and a text element within each g element. However, I still needed to add \`.style("pointer-events", "none")\` within \`text\` elements. Otherwise, when the mouse is right over the text, the color changes, which is so wierd to me. After all, the event listeners are binded to each g, rather than rect nor text, why would the color change when the pointer is over the text (still whithin the g)?
**I don't know**.
Here is the answer to 10-7:
var bars = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("transform", (d, i) => "translate("+ xScale(i) +", 0)")
.on("mouseover", function() {
d3.select(this)
.attr("fill", "orange")
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(250)
.attr("fill", d => "rgb(0, 0, "+ Math.floor(d * 10) +")")
})
.attr("fill", d => "rgb(0, 0, "+ Math.floor(d * 10) +")")
bar.append("rect")
//.attr("x", (d,i) => xScale(i))
.attr("y", d => h - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
//.attr("fill", "none")
bar.append("text")
.text(d => d)
.attr("text-anchor", "middle")
.attr("x", xScale.bandwidth() / 2)
.attr("y", d => h - yScale(d) + 14)
.style("font-family", "sans-serif")
.style("font-size", "11px")
.attr("fill", "white")
.style("pointer-events", "none")
`
md`
The key point is that we first generate a \`g\` element for each data value. Then we position each g using \`transform()\`. Notice that we need to fill the whole group, rather than later rects. Then, we just append a rect and a text element within each g element.
`
md` ## Task 10
- 10-9. Continue with 10-8. During the transition of sorting, if you mouse over some bars, they won't fall into place. Solve this problem by assigning names to transitions.
- 10-10. So far, you can only click once because a second click won't trigger any changes. Modify the codes so that a second click will trigger a re-sort, "placing the bars in descending order" (p. 206). Then a third click again will place the bars in ascending order, and a fourth click will...
- 10-11. Add a staggered delay to the transition so that each bar will move 50ms after the preceding bar moves.
- 10-12. First remove all the labels. Then, add browser default tooltips. When mousing over a bar, a tooltip of "this value is..." will show up. *Hint* : \`.append("title").text(...)\`
`
md`
Go to [Day 34](https://observablehq.com/@hongtaoh/day-34-2020-09-27).
`
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.