GeoDataFrame / Polygon selection / Tap Toolbox listener

noamnav · March 11, 2019, 4:35pm

Working with multiple patches taken from a GeoDataFrame, I am visualizing a county map of the USA where for each county I have a Climate zone defined as follows:

cZone
Name
geometry
cZoneColorIndex
0
3C
San Francisco
POLYGON ((-122.511983 37.77113, -122.465396 37…
7
1
5A
Suffolk
POLYGON ((-71.19115499999999 42.283059, -71.15…
11
2
5A
Banner
POLYGON ((-104.052825235239 41.69795385306401,…
11
3
4A
Vance
POLYGON ((-78.497783 36.514477, -78.4572778962…
8
4
4A
Sherman
POLYGON ((-102.162463 36.500326, -102.03233901…
8

As the Bokeh Tap Tool bar would only choose a single entity upon click, is there a way to select all similar cZone entities?

e.g from the DF above, when the user would select the polygon representing Vance, Sherman would be added to the selection set and we would be able to manipulate its appearance.

Essentially a ‘tap’ listener and the ability to edit the ‘selection set’.

Core script as follows:

“ILLUSTRATE MAP”

#Read data to json.
json_raw = json.loads(gdf.to_json())

#Convert to String like object.
json_data = json.dumps(json_raw)

#Input GeoJSON source that contains features for plotting.
geosource = GeoJSONDataSource(geojson = json_data)

Define a sequential multi-hue color palette

palette = cividis(15)

#Instantiate LinearColorMapper that linearly maps numbers in a range, into a sequence of colors
color_mapper = LinearColorMapper(palette = palette, low = 1, high = 16)

#set fixed tick locations
ticker = FixedTicker(ticks=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16])

#tick values corresponding ‘ticker’ above
formatter = FuncTickFormatter (code="""
data = {1: ‘1A’, 2: ‘2A’, 3:‘2B’, 4:‘3A’, 5:‘3B-CA’, 6:‘3B-Other’, 7:‘3C’,
8:‘4A’, 9:‘4B’, 10:‘4C’, 11:‘5A’, 12:‘5B’, 13:‘6A’, 14:‘6B’, 15:‘7’, 16:’ '}
return data[tick]
“”")

#Create color bar.
color_bar = ColorBar(color_mapper=color_mapper, label_standoff=8, width = 10, height = 375,
border_line_color=None,location = (0,0), ticker=ticker, formatter=formatter, major_label_text_align=‘left’)

#Add hover tool
hover = HoverTool(tooltips = [ (‘Climate Zone’,’@cZone’),(‘County’,’@Name’)])

#Add select tool
select_tools = [‘tap’, ‘reset’]

#Create figure object.
p = figure(title = ‘USA Climate Zone Map’, plot_height = 450 , plot_width = 800, toolbar_location = “below”,
tools=select_tools)
p.add_tools(hover)
p.xgrid.grid_line_color = None
p.ygrid.grid_line_color = None

#Add patch renderer to figure.
p.patches(‘xs’,‘ys’, source = geosource, fill_color = {‘field’ :‘cZoneColorIndex’, ‘transform’ : color_mapper},
line_color = ‘black’, line_width = 0.25, fill_alpha = 1)

#Specify figure layout.
p.add_layout(color_bar, ‘right’)

#Display figure inline in Jupyter Notebook.
output_notebook()

Display figure.

show(p)

``

Many thanks

Bryan · March 11, 2019, 4:56pm

Hi,

Certainly, but you will have to manage the selection updates yourself. See this recent SO answer:

python - Bokeh linking/ brushing based on column instead of row indices / index - Stack Overflow

Thanks,

Bryan

···

On Mar 11, 2019, at 9:35 AM, [email protected] wrote:

Working with multiple patches taken from a GeoDataFrame, I am visualizing a county map of the USA where for each county I have a Climate zone defined as follows:

cZone Name geometry cZoneColorIndex
0 3C San Francisco POLYGON ((-122.511983 37.77113, -122.465396 37... 7
1 5A Suffolk POLYGON ((-71.19115499999999 42.283059, -71.15... 11
2 5A Banner POLYGON ((-104.052825235239 41.69795385306401,... 11
3 4A Vance POLYGON ((-78.497783 36.514477, -78.4572778962... 8
4 4A Sherman POLYGON ((-102.162463 36.500326, -102.03233901... 8

As the Bokeh Tap Tool bar would only choose a single entity upon click, is there a way to select all similar cZone entities?
e.g from the DF above, when the user would select the polygon representing Vance, Sherman would be added to the selection set and we would be able to manipulate its appearance.

Essentially a 'tap' listener and the ability to edit the 'selection set'.

Core script as follows:

"ILLUSTRATE MAP"

#Read data to json.
json_raw = json.loads(gdf.to_json())

#Convert to String like object.
json_data = json.dumps(json_raw)

#Input GeoJSON source that contains features for plotting.
geosource = GeoJSONDataSource(geojson = json_data)

# Define a sequential multi-hue color palette
palette = cividis(15)

#Instantiate LinearColorMapper that linearly maps numbers in a range, into a sequence of colors
color_mapper = LinearColorMapper(palette = palette, low = 1, high = 16)

#set fixed tick locations
ticker = FixedTicker(ticks=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16])

#tick values corresponding 'ticker' above
formatter = FuncTickFormatter (code="""
            data = {1: '1A', 2: '2A', 3:'2B', 4:'3A', 5:'3B-CA', 6:'3B-Other', 7:'3C',
            8:'4A', 9:'4B', 10:'4C', 11:'5A', 12:'5B', 13:'6A', 14:'6B', 15:'7', 16:' '}
            return data[tick]
            """)

#Create color bar.
color_bar = ColorBar(color_mapper=color_mapper, label_standoff=8, width = 10, height = 375,
border_line_color=None,location = (0,0), ticker=ticker, formatter=formatter, major_label_text_align='left')

#Add hover tool
hover = HoverTool(tooltips = [ ('Climate Zone','@cZone'),('County','@Name')])

#Add select tool
select_tools = ['tap', 'reset']

#Create figure object.
p = figure(title = 'USA Climate Zone Map', plot_height = 450 , plot_width = 800, toolbar_location = "below",
          tools=select_tools)
p.add_tools(hover)
p.xgrid.grid_line_color = None
p.ygrid.grid_line_color = None

#Add patch renderer to figure.
p.patches('xs','ys', source = geosource, fill_color = {'field' :'cZoneColorIndex', 'transform' : color_mapper},
          line_color = 'black', line_width = 0.25, fill_alpha = 1)

#Specify figure layout.
p.add_layout(color_bar, 'right')

#Display figure inline in Jupyter Notebook.
output_notebook()

# Display figure.
show(p)

Many thanks

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6d6938ca-d5d8-41af-b3b1-33e56eb8c1af%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

noamnav · March 12, 2019, 3:39pm

Thanks Bryan,

Never worked with JS previously -

How do i print the variables in the notebook output?

I see how I can get them to appear in the console.log however that’s very inconvenient

callback = CustomJS(args=dict(source=source), code=“”"
var data = source.data;
console.log(data)

// print what's inside 'data' in the notebook's output

“”")

``

cheers

···

On Monday, March 11, 2019 at 4:56:19 PM UTC, Bryan Van de ven wrote:

Hi,

Certainly, but you will have to manage the selection updates yourself. See this recent SO answer:
    [https://stackoverflow.com/questions/54984453/bokeh-linking-brushing-based-on-column-instead-of-row-indices-index/55105750#55105750](https://stackoverflow.com/questions/54984453/bokeh-linking-brushing-based-on-column-instead-of-row-indices-index/55105750#55105750)
Thanks,

Bryan

On Mar 11, 2019, at 9:35 AM, [email protected] wrote:

Working with multiple patches taken from a GeoDataFrame, I am visualizing a county map of the USA where for each county I have a Climate zone defined as follows:

cZone Name geometry cZoneColorIndex

0 3C San Francisco POLYGON ((-122.511983 37.77113, -122.465396 37… 7

1 5A Suffolk POLYGON ((-71.19115499999999 42.283059, -71.15… 11

2 5A Banner POLYGON ((-104.052825235239 41.69795385306401,… 11

3 4A Vance POLYGON ((-78.497783 36.514477, -78.4572778962… 8

4 4A Sherman POLYGON ((-102.162463 36.500326, -102.03233901… 8

As the Bokeh Tap Tool bar would only choose a single entity upon click, is there a way to select all similar cZone entities?
e.g from the DF above, when the user would select the polygon representing Vance, Sherman would be added to the selection set and we would be able to manipulate its appearance.

Essentially a ‘tap’ listener and the ability to edit the ‘selection set’.

Core script as follows:

“ILLUSTRATE MAP”

#Read data to json.

json_raw = json.loads(gdf.to_json())

#Convert to String like object.

json_data = json.dumps(json_raw)

#Input GeoJSON source that contains features for plotting.

geosource = GeoJSONDataSource(geojson = json_data)

Define a sequential multi-hue color palette

palette = cividis(15)

#Instantiate LinearColorMapper that linearly maps numbers in a range, into a sequence of colors

color_mapper = LinearColorMapper(palette = palette, low = 1, high = 16)

#set fixed tick locations

ticker = FixedTicker(ticks=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16])

#tick values corresponding ‘ticker’ above

formatter = FuncTickFormatter (code=“”"
        data = {1: '1A', 2: '2A', 3:'2B', 4:'3A', 5:'3B-CA', 6:'3B-Other', 7:'3C',
        8:'4A', 9:'4B', 10:'4C', 11:'5A', 12:'5B', 13:'6A', 14:'6B', 15:'7', 16:' '}
        return data[tick]
        """)
#Create color bar.
color_bar = ColorBar(color_mapper=color_mapper, label_standoff=8, width = 10, height = 375,

border_line_color=None,location = (0,0), ticker=ticker, formatter=formatter, major_label_text_align=‘left’)

#Add hover tool

hover = HoverTool(tooltips = [ (‘Climate Zone’,‘@cZone’),(‘County’,‘@Name’)])

#Add select tool

select_tools = [‘tap’, ‘reset’]

#Create figure object.

p = figure(title = ‘USA Climate Zone Map’, plot_height = 450 , plot_width = 800, toolbar_location = “below”,
tools=select_tools)

p.add_tools(hover)

p.xgrid.grid_line_color = None

p.ygrid.grid_line_color = None

#Add patch renderer to figure.
p.patches(‘xs’,‘ys’, source = geosource, fill_color = {‘field’ :‘cZoneColorIndex’, ‘transform’ : color_mapper},
      line_color = 'black', line_width = 0.25, fill_alpha = 1)
#Specify figure layout.

p.add_layout(color_bar, ‘right’)

#Display figure inline in Jupyter Notebook.

output_notebook()

Display figure.

show(p)

Many thanks

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6d6938ca-d5d8-41af-b3b1-33e56eb8c1af%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Bryan · March 12, 2019, 3:44pm

Hi,

I'm afraid I don't know of any particular good way. It's JavaScript code, so logging output appears in the JavaScript console, that's just how browsers function. Jupyter itself has JS APIs for communicating with the running Jupyter Kernel, and perhaps these could be leveraged in some way. But you would likely do better asking that kind of question in a Jupyter-specific forum.

Thanks,

Bryan

···

On Mar 12, 2019, at 8:39 AM, [email protected] wrote:

Thanks Bryan,

Never worked with JS previously -
How do i print the variables in the notebook output?
I see how I can get them to appear in the console.log however that's very inconvenient

callback = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    console.log(data)

    // print what's inside 'data' in the notebook's output

  """)

cheers

On Monday, March 11, 2019 at 4:56:19 PM UTC, Bryan Van de ven wrote:
Hi,

Certainly, but you will have to manage the selection updates yourself. See this recent SO answer:

        python - Bokeh linking/ brushing based on column instead of row indices / index - Stack Overflow

Thanks,

Bryan

> On Mar 11, 2019, at 9:35 AM, noa...@gmail.com wrote:
>
> Working with multiple patches taken from a GeoDataFrame, I am visualizing a county map of the USA where for each county I have a Climate zone defined as follows:
>
> cZone Name geometry cZoneColorIndex
> 0 3C San Francisco POLYGON ((-122.511983 37.77113, -122.465396 37... 7
> 1 5A Suffolk POLYGON ((-71.19115499999999 42.283059, -71.15... 11
> 2 5A Banner POLYGON ((-104.052825235239 41.69795385306401,... 11
> 3 4A Vance POLYGON ((-78.497783 36.514477, -78.4572778962... 8
> 4 4A Sherman POLYGON ((-102.162463 36.500326, -102.03233901... 8
>
> As the Bokeh Tap Tool bar would only choose a single entity upon click, is there a way to select all similar cZone entities?
> e.g from the DF above, when the user would select the polygon representing Vance, Sherman would be added to the selection set and we would be able to manipulate its appearance.
>
> Essentially a 'tap' listener and the ability to edit the 'selection set'.
>
> Core script as follows:
>
> "ILLUSTRATE MAP"
>
> #Read data to json.
> json_raw = json.loads(gdf.to_json())
>
>
> #Convert to String like object.
> json_data = json.dumps(json_raw)
>
>
> #Input GeoJSON source that contains features for plotting.
> geosource = GeoJSONDataSource(geojson = json_data)
>
>
> # Define a sequential multi-hue color palette
> palette = cividis(15)
>
>
> #Instantiate LinearColorMapper that linearly maps numbers in a range, into a sequence of colors
> color_mapper = LinearColorMapper(palette = palette, low = 1, high = 16)
>
>
> #set fixed tick locations
> ticker = FixedTicker(ticks=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16])
>
>
> #tick values corresponding 'ticker' above
> formatter = FuncTickFormatter (code="""
> data = {1: '1A', 2: '2A', 3:'2B', 4:'3A', 5:'3B-CA', 6:'3B-Other', 7:'3C',
> 8:'4A', 9:'4B', 10:'4C', 11:'5A', 12:'5B', 13:'6A', 14:'6B', 15:'7', 16:' '}
> return data[tick]
> """)
>
> #Create color bar.
> color_bar = ColorBar(color_mapper=color_mapper, label_standoff=8, width = 10, height = 375,
> border_line_color=None,location = (0,0), ticker=ticker, formatter=formatter, major_label_text_align='left')
>
>
> #Add hover tool
> hover = HoverTool(tooltips = [ ('Climate Zone','@cZone'),('County','@Name')])
>
>
> #Add select tool
> select_tools = ['tap', 'reset']
>
>
> #Create figure object.
> p = figure(title = 'USA Climate Zone Map', plot_height = 450 , plot_width = 800, toolbar_location = "below",
> tools=select_tools)
> p.add_tools(hover)
> p.xgrid.grid_line_color = None
> p.ygrid.grid_line_color = None
>
>
> #Add patch renderer to figure.
> p.patches('xs','ys', source = geosource, fill_color = {'field' :'cZoneColorIndex', 'transform' :color_mapper},
> line_color = 'black', line_width = 0.25, fill_alpha = 1)
>
>
> #Specify figure layout.
> p.add_layout(color_bar, 'right')
>
>
> #Display figure inline in Jupyter Notebook.
> output_notebook()
>
>
> # Display figure.
> show(p)
>
> Many thanks
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6d6938ca-d5d8-41af-b3b1-33e56eb8c1af%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

noamnav · March 13, 2019, 11:21am

Thanks Bryan - ok console it is then, and trying to use customJS.

So when using a TapTool callback:

tap = TapTool(callback = CustomJS.from_py_func(callback))
p.add_tools(tap)

``

How do I then get the access to the selected patch?

(say, to connect it to a widget or even just to know which data row should I be manipulating in my next steps)

def callback(source = geosource, window=None):
data = source.data
print (cb_data)
## get value of selected

``

I see how you can access the x/y coordinates of the ‘tap’ position however that’s not helpful.

Should this at all be a TapTool call back? i tried defining a CustomJS callback with no success

thanks again

···

On Tuesday, March 12, 2019 at 3:44:57 PM UTC, Bryan Van de ven wrote:

Hi,

I’m afraid I don’t know of any particular good way. It’s JavaScript code, so logging output appears in the JavaScript console, that’s just how browsers function. Jupyter itself has JS APIs for communicating with the running Jupyter Kernel, and perhaps these could be leveraged in some way. But you would likely do better asking that kind of question in a Jupyter-specific forum.

Thanks,

Bryan

On Mar 12, 2019, at 8:39 AM, [email protected] wrote:

Thanks Bryan,

Never worked with JS previously -
How do i print the variables in the notebook output?
I see how I can get them to appear in the console.log however that’s very inconvenient

callback = CustomJS(args=dict(source=source), code=“”"
var data = source.data;
console.log(data)
// print what's inside 'data' in the notebook's output
“”")

cheers

On Monday, March 11, 2019 at 4:56:19 PM UTC, Bryan Van de ven wrote:
Hi,

Certainly, but you will have to manage the selection updates yourself. See this recent SO answer:
    [https://stackoverflow.com/questions/54984453/bokeh-linking-brushing-based-on-column-instead-of-row-indices-index/55105750#55105750](https://stackoverflow.com/questions/54984453/bokeh-linking-brushing-based-on-column-instead-of-row-indices-index/55105750#55105750)
Thanks,

Bryan

On Mar 11, 2019, at 9:35 AM, [email protected] wrote:

Working with multiple patches taken from a GeoDataFrame, I am visualizing a county map of the USA where for each county I have a Climate zone defined as follows:

cZone Name geometry cZoneColorIndex
0 3C San Francisco POLYGON ((-122.511983 37.77113, -122.465396 37… 7
1 5A Suffolk POLYGON ((-71.19115499999999 42.283059, -71.15… 11
2 5A Banner POLYGON ((-104.052825235239 41.69795385306401,… 11
3 4A Vance POLYGON ((-78.497783 36.514477, -78.4572778962… 8
4 4A Sherman POLYGON ((-102.162463 36.500326, -102.03233901… 8

As the Bokeh Tap Tool bar would only choose a single entity upon click, is there a way to select all similar cZone entities?
e.g from the DF above, when the user would select the polygon representing Vance, Sherman would be added to the selection set and we would be able to manipulate its appearance.

Essentially a ‘tap’ listener and the ability to edit the ‘selection set’.

Core script as follows:

“ILLUSTRATE MAP”

#Read data to json.
json_raw = json.loads(gdf.to_json())

#Convert to String like object.
json_data = json.dumps(json_raw)

#Input GeoJSON source that contains features for plotting.
geosource = GeoJSONDataSource(geojson = json_data)

Define a sequential multi-hue color palette

palette = cividis(15)

#Instantiate LinearColorMapper that linearly maps numbers in a range, into a sequence of colors
color_mapper = LinearColorMapper(palette = palette, low = 1, high = 16)

#set fixed tick locations
ticker = FixedTicker(ticks=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16])

#tick values corresponding ‘ticker’ above
formatter = FuncTickFormatter (code=“”"
data = {1: ‘1A’, 2: ‘2A’, 3:‘2B’, 4:‘3A’, 5:‘3B-CA’, 6:‘3B-Other’, 7:‘3C’,
8:‘4A’, 9:‘4B’, 10:‘4C’, 11:‘5A’, 12:‘5B’, 13:‘6A’, 14:‘6B’, 15:‘7’, 16:’ '}
return data[tick]
“”")

#Create color bar.
color_bar = ColorBar(color_mapper=color_mapper, label_standoff=8, width = 10, height = 375,
border_line_color=None,location = (0,0), ticker=ticker, formatter=formatter, major_label_text_align=‘left’)

#Add hover tool
hover = HoverTool(tooltips = [ (‘Climate Zone’,‘@cZone’),(‘County’,‘@Name’)])

#Add select tool
select_tools = [‘tap’, ‘reset’]

#Create figure object.
p = figure(title = ‘USA Climate Zone Map’, plot_height = 450 , plot_width = 800, toolbar_location = “below”,
tools=select_tools)
p.add_tools(hover)
p.xgrid.grid_line_color = None
p.ygrid.grid_line_color = None

#Add patch renderer to figure.
p.patches(‘xs’,‘ys’, source = geosource, fill_color = {‘field’ :‘cZoneColorIndex’, ‘transform’ :color_mapper},
line_color = ‘black’, line_width = 0.25, fill_alpha = 1)

#Specify figure layout.
p.add_layout(color_bar, ‘right’)

#Display figure inline in Jupyter Notebook.
output_notebook()

Display figure.

show(p)

Many thanks

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6d6938ca-d5d8-41af-b3b1-33e56eb8c1af%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

tony12624120 · March 13, 2019, 1:37pm

In this specific case it should be possible to access e.g. the selected patch xs property by:
selected_patch_index = source.selected.indices[0];
selected_patch_xs = source.data[‘xs’][selected_patch_index];

The decision where to attach the callback is yours and depends on which event (action) should trigger your callback?

You can have a JS callback attached to any widget (value change, slider move, etc…), any tool (TapTool, HoverTool, etc…), data_source (click on glyph), plot (e.g. for area outside a glyph)

Basically you need to know that all Python objects have their equivalents in BokehJS so you can use them the same way in in both domains (with some syntax differences, of course).

This documentation shows for example that ColumnDataSource has a “selected” property (used in example above).

You can set a breakpoint in code in the browser and inspect the BokehJS structure (also a good alternative to using console.log())

I think you should start by reading this Bokeh page about callbacks.

Good luck!

···

On Wednesday, March 13, 2019 at 12:21:21 PM UTC+1, Noam Naveh wrote: