Day 40, 2020-10-03Day 37&38&39, 2020-09-30 & 2020-10-01 & 2020-10-02Day 35 & Day 36, 2020-09-28 & 2020-09-29Day 34, 2020-09-27Day 33, 2020-09-26Day 32 (Task 10), 2020-09-25Day 31 (9-2-10), 2020-09-24Day Thirty (A puzzle to be solved), 2020-09-22Day Twenty Nine, 2020-09-22Day Twenty-Eight (Task 9-2-9), 2020-09-21Day Twenty-Seven, 2020-09-20Day Twenty Six, 2020-09-19Day Twenty Five, 2020-09-18Day Twenty Four, 2020-09-17Day Twenty Three (Task 9-2), 2020-09-16Day Twenty Two (Task 9-1 continued), 2020-09-15Day Twenty (Task 8 Continued + Task 9-1), 2020-09-13Day Nineteen (Task 8), Spet. 12, 2020Day Eighteen (Task 7-1-10, 11, Sept. 11, 2020Day Fourteen, Fifteen, Sixteen & Seventeen, Spet. 07 ~ 10, 2020Day Thirteen (Task 7-1), 2020-09-06Day Twelve, Sept. 5, 2020: ScalesDay Eleven, Sept.4th, 2020Day Ten (Task 6-6), Sept. 3rd, 2020Day Nine, 2020-09-02Day Eight, Spet. 1, 2020Day Six, 30 Aug 2020Day Five, 29 Aug 2020Day Four, 28 Aug 2020Day Three, 27 Aug 2020Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands
Day Twenty-One (Task 9-1 continued), 2020-09-14
md`# Day Twenty-One (Task 9-1 continued), 2020-09-14`
md`
- 9-1-1. In \`yScale\`, if \`.range(0, h)\`, then the \`y\` axis should be \`h - yScale(d)\`. If \`.range(h,0)\`, then the \`height\` of bars should be \`h - yScale(d)\`.
`
md`
- 9-1-2. Create \`xScale\` using \`d3.scaleBand()\`. Let the output range be ([0, w]), and assign 5 percent of the band width to spacing in between bands. Use this \`xScale\` in "x", and "width" accordingly. *Hint* :
1. For \`.domain()\`, use \`d3.range()\`. For example, \`range(10)\` will generate \`[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\`.
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 on "Click here", let the text "Hey, don't click that" 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.
- \.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 annyoying 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 1000 milliseconds. Now, we can see that labels did not have smooth transations 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.
- 9-1-9. Create a 1000-ms delay before the transition.
- 9-1-10. Make the delay dynamic (so called "staggered delays") such that each subsequent element is dalyed 100 ms more than the preceding element.
`
md`
Go to [Day 22](https://observablehq.com/@hongtaoh/day-twenty-two-spet-15th-2020).
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.