It seems change on mutable data causes invalidation for all cells. I can see why it’s important; the data-flow of an observable note is reactive. However, for a project that I am working on, I want to use .update() with mutable data.
The chart is svg heavy at the moment, so re-rendering all data(recreating all svg elements) would cause a significant performance drop. I am aware it is possible to use .update(), if the data is defined as a non-reactive data. The problem is that the data is really complex so it would be very unwise to put it as a non-reactive.
I’ve tried to illustrate what I have in mind with this observable note:
is there a way to prevent invalidation for a specific cell, so that I can observe the data and use it for .update()?
I recommend exposing an update method for your chart as described in Learn D3: Animation.
Here’s a suggestion applying the technique to your notebook:
Note that for this technique to work, you must ensure that neither chart nor any of its upstream dependencies (such as scaleRadius and scaleX) reference data; if they do, then assigning to mutable data will cause the chart to be redrawn from scratch rather than transitioning. That’s why in my suggestion I mutate the domains of the scales inside chart.update, but it’d probably be slightly cleaner to make those local variables to the chart cell rather than having them as cells. (You might find the minimap helpful for tracing dependencies.)
You can also opt-out of “reacting” to the mutable data changing by referencing mutable data instead of data.
I couldn’t think of such technique. The attached notes are also a tremendous help for me.