Fading points on animation

Dash Python
1

Hi there,

Is there an example of fading and brightening points on an animated scatterplot? In other words, the only animation I am looking for is pulsating points.
I see some documentation here but kind of complicated for the simple use case above.

Thanks!

2

Hi @tbillah,

This is such an example:

import numpy as np
from ast import literal_eval
import plotly.graph_objects as go
np.random.seed(123)

pl_color = ['rgb(12, 7, 134)',
 'rgb(69, 3, 158)',
 'rgb(114, 0, 168)',
 'rgb(155, 23, 158)',
 'rgb(188, 54, 133)',
 'rgb(215, 87, 107)',
 'rgb(236, 120, 83)',
 'rgb(250, 159, 58)']*2

num_color = np.array([literal_eval(color[3:]) for color in pl_color])


fig= go.Figure(go.Scatter(x=np.random.randint(1, 11, 16),
                          y=np.random.randint(1, 11, 16),
                          mode='markers',
                          marker_size=20,
                          marker_color=pl_color))


def fading(num_color, proportion):
    #proportion is a no between 0 and 1
    dir = np.array([255, 255, 255])-num_color   
    new_color= (num_color +  proportion*dir).astype(int)
    return [f'rgb{str(tuple(c))}' for c in new_color]

#fading(num_color, 0.7)


frames = []
props= np.concatenate((np.linspace(0, 1, 21), np.linspace(0, 1, 21)[::-1][1:]))
for k, p in enumerate(props):
    frames.append(go.Frame(data= [go.Scatter(marker_color= fading(num_color, p))],
                       name=f'fr{k}'
                      ))

fig.update_layout(width=600, height=600, plot_bgcolor='#ffffff')
fig.update_layout(updatemenus = [
             dict(
                type="buttons",
                buttons=[
                    dict(
                        label="Play",
                        method="animate",
                        args=[
                            None,
                            dict(
                                frame=dict(duration=100, redraw=False),
                                fromcurrent=True,
                                transition=dict(duration=0)
                            )
                        ]
                    )
                ],
                direction='left',
                pad={'r': 10, 't': 87},
                showactive=False,
                x=0.1,
                xanchor='right',
                y=-0.1,
                yanchor='top'
            )
        ],
        sliders = [dict(steps = [dict(method= 'animate',
                                      args= [[f'fr{k}'],                           
                                             dict(mode= 'immediate',
                                             frame= dict(duration=100, redraw=False),
                                             transition=dict(duration= 0))
                                            ],
                              label=f'{k+1}'
                             ) for k in range(len(frames))], 
                   active=0,
                   transition= dict(duration= 0 ),
                   x=0, # slider starting position  
                   y=0, 
                   currentvalue=dict(font=dict(size=12), 
                                  prefix='fr: ', 
                                  visible=True, 
                                  xanchor= 'center'
                                 ),  
                len=1.0) #slider length
           ])
fig.update(frames=frames)

The initial plot is a scatter plot with a color associated to each marker. Each frame updates only the marker colors, that are more and more fading until they get white, and then their color intensity increases to reach the initial color again.

To start the animation just click the button Play. You can adjust the frame duration in updatemenus and sliders.

The fading function has as arguments the array of rgb values of the marker color codes in fig.data[0] (initial data), and the fading proportion, as a number in the interval [0,1]. The color intensity decreases/increases linearly.

1 Like