6.2 Task 9-2

Continue with Task 9-1-11.

6.2.1 From Day 23

  • 9-2-1. Make changes so that every time you click, new data will show up with transitions. The new data will be an array of random integers with values between 0 and 24. Let the new array have the same length as the original one (the one before any updates). Hint :

    • Use a for loop;

    • Math.random() generates random numbers from \(0\) up to, but not including \(1\).

  • 9-2-2. Add extra logical to set the vertical placement and style of labels. “When the data value is less than or equal to 1, place the label up above the bar and set its fill to black. Otherwise, place and style the label normally” (p. 167). Hint :

if () {}
  else {} 
// Since we use function (d) { }, we need to add "return" in our if statement.
// Also note that we still need to fill out the else {} part. We cannot leave it as blank.
  • 9-2-3. We earlier used Math.random() * 25. Replace 25 with a variable maxValue. Set the maxValue to be 100.

Note: We’ll stop editing bar charts temporarily starting from 9-2-4.

  • 9-2-4. Based on the results we got from Task 8, do the following: 1. Delete the CSS for .axis path, line, and text; 2. Let the radius of each circle be a constant: 2 px. Then, do the following:

    1. Rename the class of xAxis as x axis and that of yAxis as y axis.

    2. When people click on the text “Click here for new data”, a new pair of 50 integers between 0 and 100 will show up. Make transitions to these changes and set the duration to be 1 second. Make sure that scales, and both axes are also updated. Hint : to update the axes, first select the axis, and make a transition, set the transition’s duration, and call the axis generator.

  • 9-2-5. Make changes to the code so that when you click the trigger, the fill of all the circles changes to magenta, and the radius becomes 3 px. When the transition is over, the fill changes to black and the radii become 2px.

    • Hint : Within circle-updating code, use two .on() statements, whithin which you need to first specify whether it’s start or end, and then use an anonymous function to first select the current element and set the attributions.

  • 9-2-6. Add a transition (which lasts for 1 second) to the start of the transition and see what will happen.

6.2.2 From Day 25

  • 9-2-7. Modify the code so that when you click the trigger, each circle will turn pink and its radius immediately increases from 2 to 7. Then circles move (1 second) to their new positions. In the end, circles transition (1 second) to original color and size.

  • 9-2-8. “Instead of reelecting elements and calling a new transition on each one with .on("end", ...), just tack a second transition onto the end of the chain.” (p. 174). This chaining approach is recommended when “sequencing multiple transitions”.

6.2.3 From Day 28

  • 9-2-9. Go back to our bar charts. Based on codes from Task 9-2-3. Make changes so that every time you click the trigger, a new integer between 0 and 24 will be added. Update both the bars and the text labels. The newly generated bars and labels will move from the right border of the SVG to its proper place. Make the transition last for half a second. Hint : Use .merge().

6.2.4 From Day 31

  • 9-2-10. Create a p element with the text “Click here to remove data”. Every time you click it, the first bar and its associated label will be removed. Add a transition (half a second) to the removal so that the exiting bar will move to the bottom-right corner of the SVG and then disappear. Make sure to update the bars and labels.

Hint : - To remove the first data value from dataset, use .shift();

  • To remove svg elements (rect and text), use .exit().remove(). The .exit() function returns a reference to the exiting element; Transition syntaxes should be added between .exit() and .remove();

  • To make sure that the exiting bar moves to the bottom-right corner before disappearing, set its position after the transition and before the removal;

  • After the removal, we need to update the bars and labels. That’s fairly easy. For rect, just use svg.selectAll("rect"), and then set its position, width, height and color using attr("x", ...).... For text, first use svg.selectAll("text").text(d => d), and then set texts’ positions.