Linking a slider to the fill colour of a geoplot

I’ve been exploring UK coronavirus data and bokeh has been of great help, my full code can be found here, particularly coronavirus/coronavirus.ipynb at master · cjw296/coronavirus · GitHub.

I’m looking to merge two things I’ve been exploring: cases over time and zoomable case detail comparing different sources. [there were links here, but as a new user I’m apparently not allowed more than two links in a post :-/ ]

The bokeh plots core is currently:

def geoplot(data, title, column, tooltips, x_range=None, y_range=None):
    p = figure(title=title,
               plot_height = 800 ,
               plot_width = 600, 
               toolbar_location = 'below',
               tools = "pan, wheel_zoom, box_zoom, reset",
               active_scroll = 'wheel_zoom',
               match_aspect=True,
               x_range=x_range,
               y_range=y_range)

    areas = p.patches(
        'xs','ys', source = GeoJSONDataSource(geojson=data.to_json()),
        fill_color=linear_cmap(column, tuple(reversed(Reds[256])), 0, data[column].max(), nan_color='gray'),
        line_color = 'gray', 
        line_width = 0, 
        fill_alpha = 1
    )

    p.add_tools(HoverTool(
        renderers = [areas],
        tooltips = tooltips,
    ))
    
    return p

zoe_title = f'ZOE COVID Symptom Study data for {zoe_date:%d %b %Y}'
zoe = geoplot(zoe_new_lad16.to_crs('EPSG:3857'), zoe_title, 'percentage', tooltips=[
    ('Name','@lad16nm'),
    ('Percentage','@percentage_string')
])

phe_data = phe_recent_geo[['geometry', 'lad19nm', cases, 'population', '% of population']]
phe = geoplot(phe_data[~phe_data.geometry.isnull()], phe_recent_title, '% of population', 
              x_range=zoe.x_range, y_range=zoe.y_range, tooltips=[
        ('Name','@lad19nm'),
        ('Cases', '@{Daily lab-confirmed cases}{1}'),
        ('Population', '@{population}{1}'),
        ('Percentage','@{% of population}{1.111}%'),
])

p = row(zoe, phe)

So, I now want to add a date slider, but we’re getting into JS territory, and I’m not much of a JS developer! It occurs to be that I should really only send the geodata to the front end once, and send the ‘percentage’ data separately, with the slider switching which day’s percentages are used to colour the area.

Where can I find good examples of how to do this kind of thing?

Once I’ve got that working, the icing on the cake would be to have a way to “play” the animation by advancing the date on the slider. Again, examples of how to do this very gratefully received!

Cases over time: https://twitter.com/chriswithers13/status/1273235426539683842

Pan/zoom Bokeh plot: https://cjw296.github.io/coronavirus/zoe_phe.html