How can I animate rescaling of my scatter plot?


We are developing an AngularJS application and using Plotly.js for our scatter plot. We would like the data in the scatter plot to always take up as much of the available space in the plot as possible. We have lassoing and deleting points enabled. This means that if the user lassoes a bunch of points (say all the points in the upper half of the plot) and deletes them, we want the plot to rescale so that the remaining points take up the empty space left behind by the deleted points.

For example, I start with this:

Then I lasso the upper points:

Then I hit delete and the plot rescales:

I’ve implemented this and it works fine. But some users have reported that it’s a bit confusion because it’s not clear that after rescaling they are looking at the same data set. In other words, it looks like the first data set is being replaced by another rather than rescaling.

One solution we’ve been considering is animation. We’re wondering if it’s possible to animate the rescaling as a smooth transition so that the user can see that the initial data set is simply being rescaled. Is this possible?