[Python] I don't understand why the monthly sst is not changing in browser

Hi all, I don't understand why the monthly sintetic sea surface temperature is not changing in the browser after running this script (I checked that monthly data is different):

import numpy as np
from bokeh.io import output_file, show
from bokeh.plotting import figure
from bokeh.models import (
ColumnDataSource, LinearColorMapper, ColorBar, Button, CustomJS, Title
)
from bokeh.layouts import column


Grid:

lon = np.linspace(-180, 180, 18)
lat = np.linspace(-90, 90, 9)
lon2d, lat2d = np.meshgrid(lon, lat)


Generate 12 months of SST data with clear variability:

frames = []
for month in range(12):
sst = (
15
+ 10 * np.cos(lat2d * np.pi / 18)
+ 10 * np.sin((lon2d + month * 30) * np.pi / 9)
+ 5 * np.cos(lat2d * np.pi / 45 + month)
+ np.random.normal(scale=1.5, size=lat2d.shape)
)
frames.append(sst)

# Color scaling
vmin = np.min(frames)
vmax = np.max(frames)
mapper = LinearColorMapper(palette="Turbo256", low=vmin, high=vmax)

# Initial frame
source = ColumnDataSource(data=dict(image=[frames[0]]))


Figure:

p = figure(
x_range=(-180, 180), y_range=(-90, 90),
width=800, height=400
)
p.image(
image="image",
x=-180, y=-90,
dw=360, dh=180,
color_mapper=mapper,
source=source
)
color_bar = ColorBar(color_mapper=mapper)
p.add_layout(color_bar, 'right')


Title:

title = Title(text="Monthly SST - Jan")
p.add_layout(title, 'above')

# Button
button = Button(label="▶ Play", width=100)

# Convert frames to nested lists for JavaScript
frames_list = [f.tolist() for f in frames]


this is javascript section:

# Callback: escape all braces carefully
callback = CustomJS(args=dict(source=source, button=button, title=title), code=f"""
if (!window._sst_anim) {{
var frames = {frames_list};
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var current = 0;
window._sst_anim = setInterval(function() {{
current = (current + 1) % frames.length;
source.data = Object.assign({{}}, source.data, {{image: [frames[current]]}});
title.text = "Monthly SST - " + months[current];
}}, 600);
button.label = "⏸ Pause";
}} else {{
clearInterval(window._sst_anim);
window._sst_anim = null;
button.label = "▶ Play";
}}
""")
button.js_on_click(callback)


Output:

output_file("sst_animation_working.html")
show(column(button, p))


Thank you for any help in advance

Continue reading...