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
d3.scaleBand(). Let the output range be
[0, w], and assign 5 percent of the bandwidth to spacing in between bands. Use this
rectaccordingly. Hint :
d3.range(). For example,
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]. Note that stop is exclusive.
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
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.
alert()function within a
What is an event listener: an anonymous function that listens for an event on an element or elements.
.onmethod 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 :
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.