Updating colours on an animation using HTML and then refreshing the animation slider

plotly.js
,
1

So I have been trying to set up a 3D scatter animation for a number of plots however I wanted an HTML dropdown control to change the color scheme of a scatter grouping.

A problem arose in that when I updated my scatter’s color scheme, the animation bar seemed to get scrambled.

After some big thinkies I came to some working code of:

function updateColor(){
    // Prep the color arrays
    var update_colorscale = []
    var update_color = []
   // Loop through the scatter data
    for (const[points, data] of Object.entries(document.getElementById('plot').data)){
        // My color selectors are encoded to color with the 'points' value appended
        if (data.x.length == 1){
            // If a single point set the color selector but a null space for the colorscale
            update_color.push(document.getElementById('color_' + String(points)).value)
            update_colorscale.push(null)
        } else {
            // If multiple points set the colors to the original values and set the colorscale based on selected option
            update_color.push(data.marker.color)
            update_colorscale.push(document.getElementById('color_' + String(points)).value)
        }
    }
    // Restyle (recolour your points) based on the arrays of values built
    Plotly.restyle('plot', {
        'marker.color': update_color,
        'marker.colorscale': update_colorscale,
    });
    // Refresh the animation layout to refresh the animation frame
    Plotly.relayout('plot') 
};

And your chart should continue playing from where it left off. Without the .relayout() the animation sequence became “scrambled”

Edit: Except now the plot reverts back to its old color scheme on play… =/

1 Like