6.1 Task 9-1

6.1.1 From Day 20

  • 9-1-1. Make a normal-looking 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 ]. Width and height of the SVG: 600, 250.

6.1.2 From Day 21

  • 9-1-2. Create an xScale using d3.scaleBand(). Let the output range be [0, w], and assign 5 percent of the bandwidth to spacing in between bands. Use this xScale when setting x, and width of each rect accordingly. Hint :

    1. For .domain(), use d3.range(). For example, range(10) will produce [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]. Note that stop is exclusive.

    2. bandwidth().

  • 9-1-3. Put the text of corresponding data values right in the middle of the top of each bar. Think hard about how to set the x (Hint : You’ll need to use xScale(i), and xScale.bandwidht().

  • 9-1-4. Let the text “Click here” appear above the bar chart. When visitors click “Click here”, the text “Hey, don’t click that” will pop up.

    • Hint : Add a paragraph element before our javascript. Down at the end of our d3 code, select this new p, and add an event listener to the element. You’ll use the alert() function within a on function.

    • What is an event listener: an anonymous function that listens for an event on an element or elements.

    • The .on method takes on two arguments: the event type, and the listener itself which is an anonymous function.

  • 9-1-5. Rather than generating the annoying pop-up text, updating the dataset. That is to say, after people click on the text, the bar chart will represent this updated dataset: [11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5,10,13,19,21,25,22,18,15,13];

  • 9-1-6. Add transition to the bars heights.

  • 9-1-7. Let the transition last for 1 second. Now, we can see that labels did not have smooth transitions along with the bar heights. Add transition and duration to labels as well.

  • 9-1-8. Make the rate of motion be linear using the ease() function. Hint : easeLinear.

  • 9-1-9. Create a one second delay before each transition.

  • 9-1-10. Make the delay dynamic (so called “staggered delays”) such that each element is delayed 100 ms more than the preceding one.

6.1.3 From Day 22

  • 9-1-11. Continue with 9-1-10. To scale the dynamic delay to the length of the dataset such that visitors need to wait for at most 1 second to see the last rect element move.

    • Why? If we only have 25 data values, 9-1-10 might be okay. However, if we have 1000 data points, then visitors have to wait for a very long time to see the transition finish. Scaling the delay to the length of the data makes more sense.