Most markers not visible unless chart is double-clicked with plotly.express `animation_frame`

[eliasdabbas]

Creating an animated plotly.express chart using animation_frame works fine, but I realized that when selecting a certain value on the slider, most markers are not visible. It all works fine when I double click on the chart.

plotly==4.0.0
pandas==0.24.2

import random
import plotly.express as xp
import pandas as pd
import plotly

df = pd.DataFrame({
    'date': pd.date_range('2019-01-01', '2019-12-31'),
    'number': random.choices(range(1,200), k=365)
    
})
df['month'] = df['date'].dt.month
df.head()

	date	      number	 month
0	2019-01-01	152	1
1	2019-01-02	127	1
2	2019-01-03	39	1
3	2019-01-04	195	1
4	2019-01-05	69	1

xp.scatter(df, x='date', y='number', animation_frame='month')

Selecting month 6 gives the following empty chart:

After double-clicking the chart it looks fine:

Any idea what might be causing that?
Thanks!

[jonmmease]

Hi @eliasdabbas, thanks for taking the time to report this. Do you seem the same behavior when using a numeric (rather than datetime) x-axis?

Do you have any ideas on this @nicolaskruchten?

[eliasdabbas]

Thanks @jonmmease
I just tried with a numeric x-axis. Yes, the issue is still there.

[nicolaskruchten]

The issue is that when using animation_frames, the axis range is computed using only the initial frame (at the moment) meaning that you must manually set the x and y range to include all of the data when animating, in order for data to be visible in all frames.

This is unfortunate, and we'll try to automate it in the future :)

[eliasdabbas]

Interesting feature actually. I tried setting range_x and range_y, and the behavior is now different. It shows the whole range, as if hiding everything but the selected month.

There might be an issue though, and here is what I'm getting using the same data frame:

xp.scatter(df, x='date', y='number', animation_frame='month', 
           range_x=[df['date'].min(), df['date'].max()],
           range_y=[df['number'].min(), df['number'].max()]
          )

Moving from month 1 to 2 to 3, I get the above.

Now, double-clicking any month, would expand the points to cover the whole chart. Clicking month 3, for example, would limit the x range of the chart to that month:

Now, if I go to another month, say 8, it shows an empty chart, because the x range is now defined as month 3. You would have to double click again to show data points of month 8.

Is this the intended behavior, or is there any way to get the user to click on a month and get that month's points without double-clicking? Because it would seem that are no data points and the user might think there is nothing there.
Thanks

[nicolaskruchten]

This is, unfortunately, the intended behaviour at the moment: the slider does not impact the range of the chart.

[eliasdabbas]

I see. OK, thanks!

[joelostblom]

Are the axes ranges set to the extent of the data in the first frame before plotting or are they automatically adjusted after the data points have been plotted on the canvas? If the former, would it be possible to set the axes to the extent of the entire data set instead of the data to be added to the first frame? If it is the latter, I guess all the frames need to be looped through and the min/max axes values recorded and then used to readjust all frames?

[nicolaskruchten]

Today Plotly.js auto-ranges to the first frame, but in the near future it will actually transition ranges as well as data, and/or internally auto-range all frames. I don't want to code this into the Python layer at this time as undoing that to defer to the JS layer would cause unnecessary churn.

Today the recommendation is to manually set the ranges on your animations to ensure things look good in all frames.

[gvwilson]

Hi - we are currently trying to tidy up Plotly's public repositories to help us focus our efforts on things that will help users most. Since this issue has been sitting for several years, I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our backlog. Thanks for your help - @gvwilson