Adding an animation button to a julia plot with slider

Plotly R, MATLAB, Julia, Net Plotly Julia
1

Hi everyone,

here I have an almost minimal working example for a Julia Plot that generates some heatmaps in one plot and has a slider to slide through all of them manually. However, the updatemenus attribute and with it the play button does not work, and I cannot find an example with a play button for Julia. When clicking the play button, it should automatically iterate through the heatmap subplots. I also asked about this on the Julia forum, however I did not succeed in translating working python/js examples into julia. Any help is greatly appreciated.

Thank you very much!

using PlotlyJS

#random matrices for heatmaps
Matrices   = [rand(2,2) for i = 1 : 5]
colorscale = [[0, "white"], [1, "cyan"]]

# create the steps for the slider
steps = [attr(            
    method = "restyle",             
    label= "Heatmap $k",            
    args = [attr(                    
            z= (Matrices[k], ), 
            colorscale=(colorscale, )
    )]) 
    for k= 1:length(Matrices)]

#generate the Plot data 
maps = Plot(
    heatmap(z=Matrices[1], colorscale=colorscale),
    Layout(
        width=400, 
        height=400, 
        margin_b=90,
        sliders= [
            attr(
                active=0, 
                pad_t=20,
                steps=steps
            )
        ],
        # add a button to automatically slide the slider
        updatemenus=[
            attr(
                type="buttons",
                buttons=[attr(
                    label="Play",
                    method="animate",
                    args=[nothing, attr(
                        frame=attr(duration=1000, redraw=true),
                        transition=attr(duration=0)
                    )] #end button args
                )] #end buttons
            ) #end updatemenus attribute
        ] #end updatemenus
    ) #end layout
)

#display the plot data
display(maps)
2

In the Julia Forum post linked above, we were able to solve my problem in the following way. The buttons do not work in vscode, only when directly pasting the code into the Julia Terminal (which then opens the plot in a web browser).

#Code for generating a plotly plot with multiple frames.
#The individual frames can be viewed by clicking and dragging a slider or with clicking the play/pause buttons. 
#The animation only works when viewing the plot in a browser (which will automatically open when pasting the code into the Julia Terminal).
using PlotlyJS

#data to be plotted: a vector of random matrices
Matrices = [rand(2, 2) for i = 1:100]

#define colorscheme for the plot
colorscale = [[0, "white"], [1, "cyan"]]

#generate the initial frame
trace = [heatmap(z = Matrices[1], colorscale = colorscale, zmin=0, zmax=1)]

#store all frames in a vector
frames = PlotlyFrame[
    frame(
        data = [attr(z = Matrices[k], colorscale = colorscale, zmin=0, zmax=1)],
        layout = attr(title_text = "Heatmap $k"), #update title
        name = "frame_$k", #update frame name
        traces = [0],
    ) for k = 1:length(Matrices)
]

#define the slider for manually viewing the frames
sliders_attr = [
    attr(
        active = 0,
        minorticklen = 0,
        pad_t = 10,
        steps = [
            attr(
                method = "animate",
                label = "Heatmap $k",
                args = [
                    ["frame_$k"], #match the name of the frame again
                    attr(
                        mode = "immediate",
                        transition = attr(duration = 0),
                        frame = attr(duration = 5, redraw = true),
                    ),
                ],
            ) for k = 1:length(Matrices)
        ],
    ),
]

#define the displaying time per played frame (in milliseconds)
dt_frame = 250

#define the play and pause buttons
buttons_attr = [
    attr(
        label = "Play",
        method = "animate",
        args = [
            nothing,
            attr(
                fromcurrent = true,
                transition = (duration = dt_frame,),
                frame = attr(duration = dt_frame, redraw = true),
            ),
        ],
    ),
    attr(
        label = "Pause",
        method = "animate",
        args = [
            [nothing],
            attr(
                mode = "immediate",
                fromcurrent = true,
                transition = attr(duration = dt_frame),
                frame = attr(duration = dt_frame, redraw = true),
            ),
        ],
    ),
]

#layout for the plot
layout = Layout(
    width = 500,
    height = 500,
    margin_b = 90,
    # add buttons to play the animation
    updatemenus = [
        attr(
            x = 0.5,
            y = 0,
            yanchor = "top",
            xanchor = "center",
            showactive = true,
            direction = "left",
            type = "buttons",
            pad = attr(t = 90, r = 10),
            buttons = buttons_attr,
        ),
    ],
    #add the sliders
    sliders = sliders_attr,
)

#save the plot and show it
plotdata = Plot(trace, layout, frames)
display(plotdata)