md`# Day 32 (Task 10), 2020-09-25`
md`
\`d3.select("p).on("click", function() {} );\` binds an *event listener* to the p element.
`
md`# Task 10
- 10-1. Make a bar chart for this dataset: [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]. Set width of the SVG to be 600 and the height 250. Set the inner padding to be 5% of the bandwidth.
- 10-2. Tack on an \`.on()\` function when you create \`rect\` so that when you click each bar, that bar's data value will be shown in the console.
- 10-3. Add \`CSS\` so that when the mouse is hovering the element, the bar turn orange.
- To enable this highlighting effect, make sure that you are using \`.attr("fill", ...)\`, rater than \`.style("fill", ...)\`.
- 10-4. Use \`.on("mouseover", ...)\` to achieve the same effect.
- 10-5. You will see that when the mouse leaves the bar, the color does not restore. Use \`mouseout\` to solve this problem. In addition, add a transition (1/4 second) to color restoration.
`
md`
**Note** : In Scott Murray's book, [05_mouseout_html](https://github.com/scotthmurray/d3-book/blob/master/chapter_10/05_mouseout.html) and [06_smoother.html](https://github.com/scotthmurray/d3-book/blob/master/chapter_10/06_smoother.html) of Chapter 10 did not work the way he mentioned in the book. When the mouse left a bar, it turns black, not its original color.
To solve this problem, reference nothing when defining the anonymous function right after \`mouseout\`. Then, use an anonymous function referencing \`d\` within \`.attr("fill", ...)\`.
`
md`
- 10-6. Continue with 10-5. Mouse over a bar and then move the pointer right above the label of this bar. See what happens. Modify your codes so that when the pointer is on the label, the bar does not change its color. This can be done with either CSS or D3. Try both.
- 10-7. How to achieve the result of 10-6 by grouping SVG elements (p. 202, page number in the book, not that on pdf).
- 10-8. Continue with \`10-6\`. Add an event listener for a click event. Whichever bar you click, the bars will be sorted based on their associated data values. Add a transition (one second) to this process.
- *Hint* : Add a click event right at the end of rects-creating codes. Name the event listener as \`sortBars\` or anything else you prefer. Later define this \`sortBars\`. Select all the \`rects\`, then use a \`sort()\` method whitin which we need to use a \`comparator\` function, to sort the data
- d3.ascending()
`
md`
Go to [Day 33](https://observablehq.com/@hongtaoh/day-33-2020-09-26).
`
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.