import random
from jinja2 import Template
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.util.browser import view
########## BUILD FIGURES ################
PLOT_OPTIONS = dict(plot_width=800, plot_height=300)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
red = figure(responsive=True, tools='pan', **PLOT_OPTIONS)
red.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
blue = figure(responsive=False, tools='pan', **PLOT_OPTIONS)
blue.scatter(data(), data(), color="blue", **SCATTER_OPTIONS)
green = figure(responsive=True, tools='pan,resize', **PLOT_OPTIONS)
green.scatter(data(), data(), color="green", **SCATTER_OPTIONS)
########## RENDER PLOTS ################
# Define our html template for out plots
template = Template('''
Responsive plots
{{ js_resources }}
{{ css_resources }}
Resize the window to see some plots resizing
Red - pan tool, responsive
{{ plot_div.red }}
Green - pan and resize tools, responsive (maintains new aspect ratio)
{{ plot_div.green }}
Blue - pan tool, not responsive
{{ plot_div.blue }}
{{ plot_script }}
''')
resources = INLINE
js_resources = resources.render_js()
css_resources = resources.render_css()
script, div = components({'red': red, 'blue': blue, 'green': green})
html = template.render(js_resources=js_resources,
css_resources=css_resources,
plot_script=script,
plot_div=div)
filename = 'embed_multiple_responsive.html'
with open(filename, 'w') as f:
f.write(html)
view(filename)