Data join() calls enter instead of update

I would like to update my data output based on a select input. Whenever I change the input the new values are entered but the update and exit joins are not triggered.

See notebook:

Could anybody see what I am doing wrong? I have asked the same Question on Stackoverflow and there I got the response that the code worked fine outside of ObservableHQ.

There’s a longer explanation to be made, but the short answer is that it is indeed due to Observable’s evaluation model — the cell containing your update code is re-run when the select box changes, and since that cell also happens to create a brand new div, you wind up creating all the elements anew each time.

A minimal change is to move the div variable to its own cell:

Now the update code runs reactively in response to the select box, and the data-join joins to the existing contents of div.

Thank you so much!

I am trying to run the code in R shiny using the R2d3 package. There I have the same issue that all code re-runs whenever the data changes. Is there a general concept or D3 way of isolating code from re-running on input change?