6.3 Unsolved puzzles in Task 9

6.3.1 Puzzle one from Day 26

Maybe the answer: See Day 30.

6.3.2 Puzzle two

Something I don’t understand but don’t have time to figure out:

  • I want to let the exiting label to turn red and move to the upper-right corner before disappearing, so I specified .attr("x", w).attr("y", 0). after the transition syntaxes and before .remove(). However, I noticed that it just cannot move horizontally. It keeps within its original horizontal position.

  • I just don’t know why and how Scott Murray’s codes worked. Why should we use bars.enter()... here?

  • How to get the transition in Scott Murray’s codes when updating the bars?

  • I used dataset.pop(), which is supposed to delete the last data value. Yes, when I used

                .attr("x", w)
                .attr("y", h)

The exiting bar traveled from the left! Why???

6.3.3 Puzzle three from Day 40

I was redoing Task 9-2-1. The answer is Chapter 09/17_randomized_data.html.

The only difference is that I have already updated the xScale and yScale within the bar and text updating codes. Also, I made a “small” mistake: I put dataset = [] inside the for loop.

To make the changes more noticeable, change the color of the bar to red within within the bar and text updating codes. Here are the things I didn’t understand:

  • Why isn’t the red obscuring the colors of previous rects?

  • Why is there a larger gap between the start of the first bar?

See more information about d3 band scales here.

6.3.4 Puzzle four and five from Day 45