Underlying plot data dissapears when animation frames are added

Hello folks, I’m posting this issue as I couldn’t find answer on stackoverflow and in the docs. I’m trying to create animated plot with some data underneath, and animate points in consecutive frames. When I add the frames to the plot my underlying spline dissapears. I’m attaching exemplary script which you can paste into jupyter notebook.

Python 3.7.5

jupyter==1.0.0
numpy==1.18.1
plotly==4.5.4

import math
import numpy as np
import plotly.graph_objects as go
import plotly.io as pio
import plotly.offline as pyo


class Plot:

    def __init__(
        self,
        image_width: int = 1200,
        image_height: int = 900
    ) -> None:

        self.IMAGE_WIDTH = image_width
        self.IMAGE_HEIGHT = image_height

        pyo.init_notebook_mode(connected=False)
        pio.renderers.default = 'notebook'

    def population(self, filename: str = 'population'):
        x = np.linspace(
            start=0,
            stop=20,
            num=100,
            endpoint=True
        )

        y = np.array([math.sin(x_i) for x_i in x])

        x_min = np.min(x)
        x_max = np.max(x)

        y_min = np.min(y)
        y_max = np.max(y)

        fig = go.Figure(
            data=[
                go.Scatter(
                    y=y,
                    x=x,
                    mode="lines",
                    line_shape='spline'
                )
            ]
        )

        frames = []

        for i in range(50):
            x = np.random.random_sample(size=5)
            x *= 20

            y = np.array([math.sin(x_i) for x_i in x])

            scatter = go.Scatter(
                x=x,
                y=y,
                mode='markers',
                marker=dict(
                    color='Green',
                    size=12,
                    line=dict(
                        color='Red',
                        width=2
                    )
                ),
            )

            frame = go.Frame(data=[scatter])

            frames.append(frame)

        fig.frames = frames

        fig.layout = go.Layout(
            xaxis=dict(
                range=[x_min, x_max],
                autorange=False
            ),
            yaxis=dict(
                range=[y_min, y_max],
                autorange=False
            ),
            title="Start Title",
            updatemenus=[
                dict(
                    type="buttons",
                    buttons=[
                        dict(
                            label="Play",
                            method="animate",
                            args=[None]
                        )
                    ]
                )
            ]
        )

        fig.update_layout(
            xaxis_title='x',
            yaxis_title='y',
            title='Fitness landscape',
            # autosize=True
        )

        pyo.iplot(
            fig,
            filename=filename,
            image_width=self.IMAGE_WIDTH,
            image_height=self.IMAGE_HEIGHT
        )

plot = Plot()
plot.population()

Without frames

With frames

Consecutive frames are missing underlying spline.

[empet]

When your fig.data contains only one trace then it is supposed that each frame updates that trace and the trace is no more displayed during the animation.

That’s why you must define:

fig = go.Figure(
            data=[
                go.Scatter(
                    y=y,
                    x=x,
                    mode="lines",
                    line_shape='spline'
                )]*2)

i.e. include the same trace twice in fig.data.

At the same time modify the frame definition as follows:

 frame = go.Frame(data=[scatter],
                  traces=[1])

traces = [1] informs plotly.js that each frame updates the trace fig.data[1], while fig.data[0] is unchanged during the animation.

[dtoniolo]

Hi, can you give us additional clarifications on how go.Traces work? To be more specific, my current understanding is the following;

• the frames argument in the go.Figure constructor is just a container for the frames. To define an animations, controls need to be added that tell the figure which frames to pick and in which order.
• Each frame modifies certain traces. Which ones will be affected is specified by the traces argument. If it is not given, the traces are chosen as the first ones in the data argument of the figure.
• The data argument of the figure is used to determine the traces that exist before the animation is started.

However, I have the following questions:

• Instead of using the traces argument of the go.Frame constructor, can we pass named traces to the data argument (of the same constructor)?
• Can the frames be used to define new traces (i.e. traces that don’t exist in the data argument of the figure) (e.g. if the figure only has one trace, but each frame as two)?
• How can (if it is possible) data be shared across traces? I guess that the baseframe argument has something to do with this, but I’m not sure about its meaning.

I’ll post it here because in the end this issue seems to be about the current lack of good documentation about the inner workings of go.Frame, but I can open a new issue if needed.