Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

How to display mutil trajectory use animation

hello all!
recentlly, i need display 2600+ frames data, and keep previous frame data when see current frame. now , it achieve by extendData in dcc.Graph, but each time fresh data, need 700-800ms (2300+ figure trace).

trace_count = len(self.correspond_track_trace_id)
        trace_list = [go.Scatter(x=[], y=[], mode="lines",  name="mine_car", line = dict(color = ('rgb(139,117,0)'), width = 6))]
        real_obstacle_id = list(self.correspond_track_trace_id.keys())

        for trace_idx in range(1,trace_count):
            trace_i = go.Scatter(x=[], y=[], mode="lines",  name = str(trace_idx)+'('+real_obstacle_id[trace_idx]+')')
            trace_list.append(trace_i)
        fig = go.Figure(data = trace_list)
        
        #fig 2 trajectory
        pre_trace_count = len(self.predict_correspond_track_trace_id)
        pre_trace_list = [go.Scatter(x=[], y=[], mode="lines",  name="mine_car", line = dict(color = ('rgb(139,117,0)'), width = 6))]
        pre_obstacle_id = list(self.predict_correspond_track_trace_id.keys())

        for trace_idx in range(1,pre_trace_count):
            pre_trace_i = go.Scatter(x=[], y=[], mode="lines",  name = str(trace_idx)+'('+pre_obstacle_id[trace_idx]+')')
            pre_trace_list.append(pre_trace_i)
        pre_fig = go.Figure(data = pre_trace_list)

        app = dash.Dash(__name__, update_title=None)  # remove "Updating..." from title
        app.layout = html.Div([
            dcc.Graph(id='graph', figure=fig, clear_on_unhover=True), 
            dcc.Graph(id='pre_graph', figure=pre_fig, clear_on_unhover=True),
            dcc.Interval(id="interval",interval=20),
            ])

        @app.callback([Output('graph', 'extendData'),Output('pre_graph', 'extendData')], [Input('interval', 'n_intervals')])
        def update_data(n_intervals):
            # tuple is (dict of new data, target trace index, number of points to keep)
            if n_intervals is None:
                n_intervals = 0
                
            if(n_intervals<len(self.update_x_list)):
                graph_out = (dict(x=self.update_x_list[n_intervals], y=self.update_y_list[n_intervals]), self.update_trace_id_list[n_intervals], 5000)
            else:
                graph_out = (dict(x=[],y=[]), [], 5000)
            
            if(n_intervals<len(self.predict_update_x_list)):
                pre_graph_out = (dict(x=self.predict_update_x_list[n_intervals], y=self.predict_update_y_list[n_intervals]), self.predict_update_trace_id_list[n_intervals], 5000)
            else:
                pre_graph_out = (dict(x=[],y=[]), [], 5000)
            
            return graph_out,pre_graph_out

then i think use animation way to do it more quick … follow this code idea , my compute would crash, maybe amount of data is too much.

data_list = []
        for trace_i in range(self.trace_count1):
            data_list.append(go.Scatter(x=self.track1[trace_i][:2], y=self.track1[trace_i][:2], mode='lines'))

        frames1 = [dict(data= [dict(type='scatter',
                           x=self.track1[trace_idx][:k+1],
                           y=self.track1[trace_idx][:k+1])  for trace_idx in range(self.trace_count1)],
               traces= [i for i in range(self.trace_count1)],  #this means that  frames[k]['data'][0]  updates trace1, and   frames[k]['data'][1], trace2 
               name = str(k),
              )for k  in  range(1, self.frame_count1 -1)] 

        fig = go.Figure(data=data_list, frames=frames1)
        fig.show()

so is there some better way to make animations, i would very appreciation for someone help!