Hi there. I’m quite new to observable and I’m try to build a dataviz based on flowers, trying to stick with @mbostock’s reusable chart pattern as much as I can.
Here is my very first tentative blueprint:
As you can see in the first cells, I inserted transitions for gradients in order to smooth coloring updates. In this working case, there is just a continuous cycle that changes flower data in the same cell.
If you scroll down to the bottom of the notebook (ie. The problem with transitions), you can see that if I change data from another cell (e.g., set foo to data[1] or to data[2] transitions are not triggered anymore. It looks like the chart cell is recomputed again from scratch.
Is there a way to trigger transitions upon data updates in the Observable machinery?
Cheers!
hello, nice visualization 
I created a small fork to demonstrate a solution to the problem with transitions:
The idea is that you want the DOM element that you’ll be selecting to be defined in a cell that isn’t dependent on the data. The same goes for the flowerPlot instance. then you can have a cell that calls the flowerPlot and applies it to the DOM element whenever the data changes.
1 Like
Hello @enjalot Oh great, thanks! Got it! I guess this is the side-effect cell you usually want to avoid (unless you need it, as it happens here)
Cheers!
yes! one way I think about it is that side-effects on data are generally unwanted (because it will likely interfere with dataflow). side-effects on DOM elements however are less “bad” because there is only ever one presentation of the DOM element and if the side effects follow dataflow then you can more easily & reliably reason about how the effects unfold.
1 Like
Thanks again for your help!