d3 Object Constancy in Observable

Hello! Having fun with Observable so far - very cool tool. I’m trying to transition between datasets in a d3 visualization with object constancy based on an input change from a different cell, but it seems that the whole d3 cell is redrawn each time.

Here’s the Observable:

Basically trying to get those points to transition between states; currently they transition from 0,0 to their final location, as if it’s an “enter” selection not an “update” selection. Is this possible in Observable?


Sure, here’s an example:

The default behavior with reactivity is that the old cell values are discarded and new cell values are computed. This is generally the cleanest (most functional) approach, since it reduces the likelihood of nondeterministic behavior.

But, you can have cells expose mutable values (such as DOM subtrees), if desired, and then reach into them across cells to modify the values. In the sortable bar chart above, the chart cell exposes a chart.update function which is then called from another cell to trigger the transition.

Ah, makes sense. Thanks @mbostock