How to compare two interactive bokeh maps side by side?

Question

I am trying to compare interactive bokeh maps side by side with the sales of two reps. I used this code twice changing the variables for the second map and then used show(row(layout, layout2)), but the graphs are on top of one another instead of horizontally aligned. There is also the issue of the first map not updating the values. I was wondering if I could put the code below in an array with possibly a loop instead of duplicating the code twice.

from bokeh.io import curdoc, output_notebook
from bokeh.models import Slider, HoverTool
from bokeh.layouts import widgetbox, row, column

def json_data(selectedRep):
    rep = selectedRep
    df_rep = df[df['SalesRep'] == rep]
    merged = map7.merge(df_rep, on='Name')
    merged_json = json.loads(merged.to_json())
    json_data = json.dumps(merged_json)
    return json_data

geosource = GeoJSONDataSource(geojson=json_data('JIM'))

palette = brewer['YlGnBu'][9]

palette = palette[::-1]

color_mapper = LinearColorMapper(palette=palette, low = 50000, high = 400000)



hover = HoverTool(tooltips = [('Sales Region','@RegionName'),('Rank','@{Place Finished}'),('Sales Amt','@Sales')

color_bar = ColorBar(color_mapper = color_mapper, label_standoff =8, width = 500, height = 20, border_line_color=None,
                         location = (0,0), orientation ='horizontal')


p = figure(title = "JIM'S SALES TOTAL", plot_height = 500, plot_width = 500, toolbar_location = None, tools =[hover])
p.xaxis.major_tick_line_color = None  # turn off x-axis major ticks
p.xaxis.minor_tick_line_color = None  # turn off x-axis minor ticks

p.yaxis.major_tick_line_color = None  # turn off y-axis major ticks
p.yaxis.minor_tick_line_color = None 
p.xaxis.visible = False
p.xgrid.visible = False
p.yaxis.visible = False
p.ygrid.visible = False    

p.patches('xs','ys', source = geosource,fill_color = {'field' :'Sales', 'transform' : color_mapper},
              line_color = 'black', line_width = 0.25, fill_alpha = 1)
p.add_layout(color_bar, 'below')


def update_rep(attr, old, new):

    rep = select.value
    new_data = json_data(rep)
    geosource.geojson = new_data
    layout = column(p, widgetbox(select))
    p.title.text = "%s 'S SALES TOTAL" %rep


select = Select(title='Which Rep', value='JIM', options=['ALLEN', 'CARL', 'MIKE', 'DAVID', 'JIM', 'LISA'])

select.on_change('value',update_rep)
layout = column(p, widgetbox(select))
curdoc().add_root(layout)

from bokeh.layouts import row
show(row(layout, layout2))

Answer 1

p = column(p, widgetbox(select))
p2 = column(p2, widgetbox(select2))
layout = row(p, p2)
d = curdoc().add_root(layout)

I figured out the solution to both problems.