I am trying to utilize gmaps with bokeh to display a visualization of all houses in my dataframe in the NYC area. I have it to display all the houses but the issue I am having is how do I setup a slider to control which datapoints are being display on my plot given a range of values for example I would like my slider to only show houses priced between 250,000-500,000 and etc. This is my code.
bokeh.io.reset_output()
output_notebook()
API_KEY = 'Key....'
map_options = GMapOptions(lat=40.750042, lng=-73.906670, map_type="roadmap", zoom=11)
source = ColumnDataSource(
data=nyc_df
)
p = gmap('Key', map_options, title="New York City")
tooltips = [("price","@price"), ("Address","@StreetAddress"), ("Neighborhood",
"@Neighborhood")]
p.circle(x="longitude", y="latitude", size=3, fill_color="blue", fill_alpha=0.8,
source=source)
p.add_tools( HoverTool(tooltips=tooltips))
js_code = """
var data = source.data
var f = slider.value
var price = data['price']
var x = data['latitude']
var y = data['longitude']
for (var i = 0; i<price.length; i++){
if (price[i] <= f && price[i] > (f-250000)) {
p.circle(x="longitude", y="latitude", size=3, fill_color="blue",
fill_alpha=0.8, source=data[i])
}
else {
continue
}
}
source.change.emit()
"""
slider = Slider(title="Price: ", start=min(nyc_df.price),
end=max(nyc_df.price), value=100000, step=250000)
update_js = CustomJS(args=dict(source=source, slider=slider), code=js_code)
slider.js_on_change('value', update_js)
show(column(slider, p))
My thought process basically to reset the map dots each time the value changes but I know this is wrong and if there is a different method without replotting the data points perphaps some of the points just disappears given the range of values would be more effective.
I have tried googling but it seems I can't seem to find anything similar to my problem. I am still fairly new to this I apogolize for my poor code ahead of time. Here is the result.
