# Plotly: Add Slider to Vector of Heatmaps

**URL:** <https://discourse.julialang.org/t/plotly-add-slider-to-vector-of-heatmaps/93211>\
**Category:** Visualization\
**Tags:** plotlyjs\
**Created:** [January 19, 2023, 1:49pm UTC](https://discourse.julialang.org/t/plotly-add-slider-to-vector-of-heatmaps/93211 "2023-01-19T13:49:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![phiG](https://avatars.discourse-cdn.com/v4/letter/p/96bed5/32.png) [@phiG](https://discourse.julialang.org/u/phiG)\
**Post date:** [January 19, 2023, 1:49pm UTC](https://discourse.julialang.org/t/plotly-add-slider-to-vector-of-heatmaps/93211/1 "2023-01-19T13:49:23Z")

</div>

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](https://gist.github.com/sglyon/4e85aa915b30586bddf2c0249e94a58b?permalink_comment_id=3743891#gistcomment-3743891) that it should be possible with Plotly Layout Atrributes but I do not get it to work, so I’d really appreciate your help!

```julia
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!

---

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [January 19, 2023, 5:28pm UTC](https://discourse.julialang.org/t/plotly-add-slider-to-vector-of-heatmaps/93211/2 "2023-01-19T17:28:45Z")

</div>

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

```julia
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)

```

---

<div class="post-metadata">

**Author:** ![phiG](https://avatars.discourse-cdn.com/v4/letter/p/96bed5/32.png) [@phiG](https://discourse.julialang.org/u/phiG)\
**Post date:** [January 19, 2023, 5:53pm UTC](https://discourse.julialang.org/t/plotly-add-slider-to-vector-of-heatmaps/93211/3 "2023-01-19T17:53:55Z")

</div>

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.