First of all I wanna say this is one of the trickiest patterns on Observable and you’re not alone! I’m still learning how to use it well myself, and I’ve been using Observable for years and I work here lol…
Severo’s right: because the whole chart depends on
data, which depends on
day, the whole chart gets destroyed and recreated whenever
day changes, so it doesn’t even have a chance to transition.
I’ve made a few changes in this fork, which I just sent you as a suggestion so you can merge it: https://observablehq.com/compare/0dc83de85e454301@304...0559b22316a2e5c6@360
I’ve pulled out the default value of the datepicker (
"2020-10-19", my birthday!) to a new cell called
defaultDay instead of
day to compute
data. That way,
data doesn’t change when the datepicker changes. (If it did, then the whole chart gets blown away and remade every time, because it has all the initialization code that depends on
viewof from the definition of
riderchart (and from the reference in
tooltip) because it’s currently unnecessary and was breaking the
update cell so it never actually ran. You should use
viewof when you want to dispatch events that set a value on the DOM node the cell returns; you’re not currently doing that, so you don’t need it. If you’re going to add that, you’ll need to tweak the
update cell to also refer to the view, like:
Finally, I changed the
updateChart method to use the argument
day to recompute the data, which is binds to the
rects selection. I’m using
.call instead of separate statements so that I can just declare the transition once, and to ensure that the children still have the updated data bound to them.
Now it works! Looks great! Cool project, hope this helps, let me know if you have questions.