HV to use Bokeh sources directly

Since there is such a tight integration between Holoviews and Bokeh, is it possible to use Bokeh ColumnDataSource (and by extension AjaxDataSource) to feed the HV plots? A trivial example would be:

xs = range(-10,11)
ys = [100-x**2 for x in xs]
source = ColumnDataSource({'xs':xs, 'ys':ys})

#Bokeh
p = figure(plot_width=400, plot_height=400)
p.line('xs', 'ys', source=source)
show(p)

#Current Holoviews
curve = hv.Curve((xs, ys))
curve

#Proposed Holoviews
curve = hv.Curve(('xs', 'ys'), source=source)
curve

[ahuang11]

I’m not entirely sure what CDS/AjaxDataSource is, but here’s a potential workaround?

Also, usually, the workflow is from holoviews -> bokeh (you can get back the bokeh object by doing hv.renderer('bokeh').get_plot(your_holoviews_object).state)

import pandas as pd
import holoviews as hv

df = pd.read_json('http://gherka.pythonanywhere.com/data')
hv.Scatter(df)

[gherka]

Thanks a lot for comments and suggestions. In the end I decided to go with pure Bokeh as exporting Holoviews’ HoloMap into a static HTML didn’t work. Rather than that, I tweaked the API to accept parameters so that the API call would return the filtered data:

initial_state = r'http://gherka.pythonanywhere.com/data/HB=NHS Tree&Sex=Male&Measure=Big Count'
source = AjaxDataSource(data_url=initial_state, method='GET')

p = figure(plot_width=800, plot_height=300)

p.line('Year', 'Value', source=source)
p.grid.visible = False
p.title.align='center'

select_hb = Select(title="Select Health Board:", value="NHS Tree",
                options=["NHS Tree", "NHS Rock", "NHS Train"])

select_measure = Select(title="Select measure:", value="Big Count",
                       options=["Big Count", "Small Rate"])

callback_hb = CustomJS(args=dict(source=source), code="""
    if (typeof measure === 'undefined'){
    measure = 'Big Count'; //default value
    };

    hb = cb_obj.value;
    var new_url = `http://gherka.pythonanywhere.com/data/HB=${hb}&Sex=Male&Measure=${measure}`;

    fetch(new_url).then(function(response) { return response.json(); })
    .then(function(result) {source.data = result;})
    
    source.change.emit();
""")

callback_measure = CustomJS(args=dict(source=source), code="""
    if (typeof hb === "undefined"){
    hb = 'NHS Tree'; //default value
    };

    measure = cb_obj.value;
    var new_url = `http://gherka.pythonanywhere.com/data/HB=${hb}&Sex=Male&Measure=${measure}`;

    fetch(new_url).then(function(response) { return response.json(); })
    .then(function(result) {source.data = result;})

    source.change.emit();
""")

select_measure.js_on_change('value', callback_measure)
select_hb.js_on_change('value', callback_hb)

layout = column(row(select_hb, select_measure),p)
show(layout)