Confirm that the minimum is close to zero, and the maximum is close to 39
Uncheck all except "amount 1"
Confirm the minimum is 17 and the maximum is around 36
Your task 1: recalculate y axix
Every time we select or unselect a data source, recalculate the y axis so that we have no white space at the top or bottom
We want something like this:
Your task 2: animation
When we disable or enable a data source, we will recalculate the y axis, but instead of having the line jump from the old y axis to the new y axis, we want a smooth 300 milisecond or so animation to bring the remaining line from the old to the new y axis.
Get the latest master of https://github.com/dcycle/starterkit-csv-to-d3/issues/7
./scripts/deploy.sh
Go to /line-chart-multiple-lines.html
Confirm that the minimum is close to zero, and the maximum is close to 39
Uncheck all except "amount 1"
Confirm the minimum is 17 and the maximum is around 36
Your task 1: recalculate y axix
Every time we select or unselect a data source, recalculate the y axis so that we have no white space at the top or bottom
We want something like this:
Your task 2: animation
When we disable or enable a data source, we will recalculate the y axis, but instead of having the line jump from the old y axis to the new y axis, we want a smooth 300 milisecond or so animation to bring the remaining line from the old to the new y axis.
See https://stackoverflow.com/questions/71328594/axis-scale-shift-in-d3-js for an example of animation in d3
See https://hackernoon.com/animating-line-charts-with-d3js also
Please make sure the chart and its animation looks nice to you