Plotly: Add Slider to Vector of Heatmaps

Specific Domains Visualization
1

Hello everyone,

this is my first post here so I hope I don’t ask something too trivial.
I have a vector of matrices, each of same size, and I am able to plot a single one of them as a heatmap with PlotlyJS by accessing the index of where the matrix can be found in the vector. I added a minimal working example code below.

I would like to add a slider to the plot such that you can view how the heatmap changes while iterating through the vector. I know from here that it should be possible with Plotly Layout Atrributes but I do not get it to work, so I’d really appreciate your help!

using PlotlyJS
DataVector = [[0 0 0; 1 0 1; 2 1 2],
              [1 3 3; 4 2 4; 5 3 5]]

HeatmapVector = []
#Convert Matrices to Heatmaps
for d in DataVector
    Heatmap_i = heatmap(z = d)
    push!(HeatmapVector, Heatmap_i)
end
#HERE SHOULD BE A SLIDER, SUCH THAT I DO NOT 
#HAVE TO ACCESS THE INDEX [1] or [2] below
#SO I CAN ACCESS EACH HEATMAP BY USING THE SLIDER
layout = Layout(xaxis_side="top")
plot(HeatmapVector[2],layout)

thank you very much for your help!

2

I added one more matrix to DataVector. To interactively display a short sequence of heatmaps it is recommended to use updatemenus, not slider.

DataVector = [[0 0 0; 1.0 0 1; 2 1 2],
              [1 3 3; 4 2.0 4; 5 3 5],
              [2 5 1;  4 7 3; 6.0 2 5]] 
colorscales=[colors.imola, colors.deep, colors.viridis]
fig = Plot(heatmap(z=DataVector[1], colorscale=colors.imola), #basic plot, updated by slider
           Layout(width=500, height=400, margin_b=90,           
                  sliders=[attr(active=0, 
                                pad_t=20, 
                                steps=[attr(method = "restyle",
                                            label= "Heatmap $k",
                                            args = [attr(z= (DataVector[k], ), 
                                                         colorscale=(colorscales[k], ))] 
                                                        ) for k= 1:length(DataVector)])
                              ])) 
display(fig)
2 Likes
3

That is exactly what I wanted, thank you so much for your time and your nice solution!
I hope this will also be relevant for others later since I did not found much about sliders or updatemenus in the meantime.