Black Lives Matter. Please consider donating to Black Girls Code today.

Animate KDE plot

Hi all,

I have the following code which creates unique graphs per timestamps it’s fed:

from plotly.graph_objs import *
import plotly.express as px
import plotly
from plotly.subplots import make_subplots

[...]

fig = make_subplots(rows=1, cols=len(bandwidths), subplot_titles = bandwidths)
for bw in range(len(bandwidths)):
    # Create obe kde plot for each bandwidth
    fig.append_trace(self.make_kdeplot(df1['rel_str'], df1['price'], a,b, c,d, N, cubehelix_cs, date_str , bandwidths[bw]), row = 1, col = bw+1)
    
    if bandwidths[bw] == min(bandwidths):
        target_range = dict(sorted(self.target_range[1].items(), key = itemgetter(1), reverse = True)[:10]) 
        for n in target_range:
            if n <= high and n >= low:
                if n > self.cur_p: self.orders[ts] = [n, -1]
                else:self.orders[ts] = [n, 1]
                filename = filename + '_I'
            if plot :
                # Green lines on the graph
                fig.append_trace(go.Scatter(x = pred_table.rel_str.clip(0, b), y = [n]*100,
                                    name = 'Last Close', line=dict(color='green', width=4, dash='dash')), 1, bw+1)
    if plot :
        # append blue and red lines
        fig.append_trace(go.Scatter(x = pred_table.rel_str.clip(0, b), y = [high]*100,
                                    name = 'Next High', line=dict(color='firebrick', width=4)), 1, bw+1)
        fig.append_trace(go.Scatter(x = pred_table.rel_str.clip(0, b), y = [low]*100,
                                    name = 'Next Low', line=dict(color='royalblue', width=4)), 1, bw+1)
        fig.append_trace(go.Scatter(x = pred_table.rel_str.clip(0, b), y = [pred_table['cur_p'].loc[pred_table.hit == 1].min()]*100,
                                    name = 'Last Close', line=dict(color='royalblue', width=4, dash='dash')), 1, bw+1)
    
if plot :
    fig.update_layout(title_text=date_str)
    fig.write_html(self.path_to_metadata + '240/graphs/' + filename + '.html')

[...]

Instead of Having one file per ts/cycle, I’d like to have one file with the animation of the data evolution. Maybe something like the animation_group setting of plotly express?
The KDE plot is created using scipy and the following plotly functions:

x, y, Z = self.kde_scipy(varY, varX, a,b, c,d, N, bw )
data = Contour(
                    z=Z,
                    x=x,
                    y=y,
                    colorscale=colorsc,
                    reversescale=True,
                    opacity=0.9,
                    contours=Contours(
                        showlines=False)
                    )

Screenshot of produced graph: https://imgur.com/dnTUuEc
The script can and should be able to print one graph per “Bandwidth” on the same page, animated with a “rolling timestamp” like in the plotly express example page:
https://plot.ly/python/plotly-express/#scatter-and-line-plots

Bonus point: How to fix the legend on the right side?

Thanks!

Anyone has any idea? :thinking: