7.1 Task 10

7.1.1 From Day 32

  • 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.

    • Note : In Scott Murray’s book, 05_mouseout_html and 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", ...).

  • 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).

    • If you find it too difficult to implement, see Day 33 for an answer.

  • 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()

7.1.2 From Day 33

  • 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(...)