rill icon indicating copy to clipboard operation
rill copied to clipboard

rescaling animation lines and scales in line charts can create some disorienting effects

Open bcolloran opened this issue 3 years ago • 2 comments

Describe the bug the scales and lines rescale at different speeds, which can cause jumping around or rubber-band ish effects, particularly when toggling a filter that removes/adds a lot of data.

See e.g this clip, where clicking the filter (which removes data) cause the line to immediately drop nearly to the baseline, then to grow back up; it's not clear what the animation is showing in that case -- am I looking at less or more? Likewise when the filter is untoggled, which adds data: the line immediately jumps above the top of the plot viewport, then the line animates in from the top, which kind of creates an impression of the values on the line getting smaller (data being removed).

https://user-images.githubusercontent.com/2380975/182660965-10ed7ce9-6ca3-4eaf-940c-ebb912ef5668.mp4

Expected behavior I'm not really sure, but just brainstorming here: I think what I would want an animation to do overall is to put the new line I'm looking at in the context of the old line. By animating the line and the scale at the same time, this can be a bit muddy, and sometime the animation can feel like confusing blur of motion rather than helping to contextualize.

One idea to try might be something like: rather than updating the existing line to have new values, add a second line to the plot for the new values and rescale the whole plot to fit that new line while fading out the old line. Something like that might help establish the scale of the pre and post filter lines with an animation that is a bit more "monotonic" (i.e. the animation would only convey one motion of growth or shrinkage, not the up-then-down or down-then-up motions in the clip above). This might only be needed for very large changes -- I have no idea what the threshold would be, but I could imagine updating the existing line might work if the scales are basically the same, and that the "monotonic" treatment might only be needed if the scales are very different (making this up: maybe 2x or more?)

bcolloran avatar Aug 03 '22 16:08 bcolloran

yeah this is not ideal as-is and is something we had to punt on. There are a few animation interactions that are not really working here imo.

hamilton avatar Aug 03 '22 17:08 hamilton

Think I have a straightforward solution here. When the underlying data changes:

  • first, rescale the x axis if needed.
  • if the y-hull of the new data is larger than the old data, then we rescale the y axis, then the data.
  • if the y-hull of the new data is smaller than the old data (meaning the old data gets clipped) we can rescale the data first, then the y axis. This will show what's happening while preserving the overall shape.

Would need to try this out and see how it goes.

hamilton avatar Aug 04 '22 14:08 hamilton