How to allow user to add points and modify points on a scatter plot


I am very new to the area of interactive visualisations for the browser.

Here is what I want to build:
A figure that has two plots, on the left a scatter plot with some points on it and on the right another plot that is linked with the points in a scatter plot. I wish that users can drag points or add new points and see the effect on the plot on the right. I would also wish that there is a play button and when a user press play something is happening on one of the plots that needs to be calculated online with the chosen points by the user.

Here are my questions:
I have read about D3, bokeh and holoviews. My understanding is that holoviews is built on top of bokeh. Which tool should I use? given that the end product is pure HTML CSS JS (I never want python to be called on a server. everything should work on the client-side).

Thank you so much for all the help

See here for a version of my question:

This is not true, Bokeh does all of its own rendering directly on bare HTML (or WebGL) canvas. Bokeh has never been built on or used D3 (that’s not a knock against D3 by the way, it’s just the way things are). I wish I knew where this mis-notion about D3 was coming from, though, because I’ve heard it multiple times now.

In any case, it’s not really clear what your preferences or requirements are that dictate any particular choice here, so it’s not really possible to give much advice. Any advice on this topic is certainly going to be heavy on opinion, regardless. All the tools you mentioned can accomplish what you describe AFAIK.

I am sorry I got this wrong! I edited my question, hopefully to stop spreading the misinformation.

I am surprised by you saying “All the tools you mentioned can accomplish what you describe AFAIK.”

I’ll try then the most high-level option. Thanks