Marker glyphs on top of images with BokehJS

Dustin_Maas · May 1, 2014, 9:01pm

Hello,

I’ve built a simple web application that uses BokehJS to display and update an image glyph every time new data is received via a websocket. I would like to add a marker glyph on top of the image glyph to show the location of the maximum image value, but I can’t find any information in the BokehJS Interface Reference on how to do this. Is it possible? If so, how can I accomplish this?

Thank you for your help,

Dustin

Here is the CoffeeScript for my real-time image plot:

···

$ →

window.first_message = 1

window.ws = new ReconnectingWebSocket ‘ws://’ + document.domain + ‘:8080/ws’

ws.onopen = () → console.log ‘open’

ws.onmessage = (e) →

console.log e

msg = JSON.parse e.data

console.log msg

if window.first_message then init_plot(msg) else update(msg)

ws.onclose = (e) →

console.log ‘websocket closed!!’

ws.onerror = (e) →

console.log ‘error’

init_plot = (msg) →

window.img = Bokeh.Collections(‘ColumnDataSource’).create(

data:

image: [msg.img_vector]

)

image = {

type: ‘image’,

x: msg.x_min

y: msg.y_min

dw: msg.x_max

dh: msg.y_max

image: ‘image’

rows: msg.y_pixels

cols: msg.x_pixels

palette: ‘Spectral-10’

}

options = {

dims: [20 * msg.x_pixels, 20 * msg.y_pixels]

xrange: [0, msg.x_max]

yrange: [0, msg.y_max]

xaxes: ‘min’

yaxes: ‘min’

tools: true

}

window.first_message = 0

plot = Bokeh.Plotting.make_plot(image, window.img, options)

Bokeh.Plotting.show(plot)

update = (msg) →

data = window.img.get(‘data’)

data[‘image’] = [msg.img_vector]

window.img.set(‘data’, data)

window.img.trigger(‘change’, img, {})

Bryan · May 1, 2014, 9:11pm

Hi Dustin,

You can definitely do this. The JS potting interface is not quite as developed and documented as the python side yet, but it is possible to pass more than one glyph and source to make plot. You scan do:

plot = Bokeh.Plotting.make_plot([image, marker], [window.img, window.marker], options)

Where "marker" is a glyph spec for whatever glyph you want to show at the maximum value. Then to update it you simply update the data in the window.marker, something like:

window.marker.set('data', {x: [newx], y: [newy]})
@source.trigger('change', window.marker, {})

whenever the (x,y) for the max value changes.

Let me know if this is enough to get you going, if not I can try to work up a complete example.

BTW we are *definitely* interested in expanding and improving the BokehJS api, so if yo have any thoughts or ideas (or contributions!) please don't hesitate to share them here on on GitHub.

Thanks,

Bryan

···

On May 1, 2014, at 2:01 PM, Dustin Maas <[email protected]> wrote:

Hello,

I've built a simple web application that uses BokehJS to display and update an image glyph every time new data is received via a websocket. I would like to add a marker glyph on top of the image glyph to show the location of the maximum image value, but I can't find any information in the BokehJS Interface Reference on how to do this. Is it possible? If so, how can I accomplish this?

Thank you for your help,
Dustin

Here is the CoffeeScript for my real-time image plot:

$ ->
  window.first_message = 1
  window.ws = new ReconnectingWebSocket 'ws://' + document.domain + ':8080/ws'
  ws.onopen = () -> console.log 'open'
  ws.onmessage = (e) ->
    console.log e
    msg = JSON.parse e.data
    console.log msg
    if window.first_message then init_plot(msg) else update(msg)
  ws.onclose = (e) ->
    console.log 'websocket closed!!'
  ws.onerror = (e) ->
    console.log 'error'

  init_plot = (msg) ->
    window.img = Bokeh.Collections('ColumnDataSource').create(
      data:
        image: [msg.img_vector]
    )

    image = {
      type: 'image',
      x: msg.x_min
      y: msg.y_min
      dw: msg.x_max
      dh: msg.y_max
      image: 'image'
      rows: msg.y_pixels
      cols: msg.x_pixels
      palette: 'Spectral-10'
    }

    options = {
      dims: [20 * msg.x_pixels, 20 * msg.y_pixels]
      xrange: [0, msg.x_max]
      yrange: [0, msg.y_max]
      xaxes: 'min'
      yaxes: 'min'
      tools: true
    }
    window.first_message = 0

    plot = Bokeh.Plotting.make_plot(image, window.img, options)
    Bokeh.Plotting.show(plot)

  update = (msg) ->
    data = window.img.get('data')
    data['image'] = [msg.img_vector]
    window.img.set('data', data)
    window.img.trigger('change', img, {})

--
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/a26b6562-6421-46ec-a4a2-5a303cd4215e%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Dustin_Maas · May 1, 2014, 10:07pm

Great! That works perfectly. Thank you for the quick response and the great work so far on Bokeh.

Best,

Dustin

···

On Thu, May 1, 2014 at 3:11 PM, Bryan Van de Ven [email protected] wrote:

Hi Dustin,

You can definitely do this. The JS potting interface is not quite as developed and documented as the python side yet, but it is possible to pass more than one glyph and source to make plot. You scan do:
    plot = Bokeh.Plotting.make_plot([image, marker], [window.img, window.marker], options)
Where “marker” is a glyph spec for whatever glyph you want to show at the maximum value. Then to update it you simply update the data in the window.marker, something like:
    window.marker.set('data', {x: [newx], y: [newy]})

    @source.trigger('change', window.marker, {})
whenever the (x,y) for the max value changes.

Let me know if this is enough to get you going, if not I can try to work up a complete example.

BTW we are definitely interested in expanding and improving the BokehJS api, so if yo have any thoughts or ideas (or contributions!) please don’t hesitate to share them here on on GitHub.

Thanks,

Bryan

On May 1, 2014, at 2:01 PM, Dustin Maas [email protected] wrote:

Hello,

I’ve built a simple web application that uses BokehJS to display and update an image glyph every time new data is received via a websocket. I would like to add a marker glyph on top of the image glyph to show the location of the maximum image value, but I can’t find any information in the BokehJS Interface Reference on how to do this. Is it possible? If so, how can I accomplish this?

Thank you for your help,

Dustin

Here is the CoffeeScript for my real-time image plot:

$ →

window.first_message = 1

window.ws = new ReconnectingWebSocket ‘ws://’ + document.domain + ‘:8080/ws’

ws.onopen = () → console.log ‘open’

ws.onmessage = (e) →
console.log e
msg = JSON.parse e.data
console.log msg
if window.first_message then init_plot(msg) else update(msg)
ws.onclose = (e) →
console.log 'websocket closed!!'
ws.onerror = (e) →
console.log 'error'
init_plot = (msg) →
window.img = Bokeh.Collections('ColumnDataSource').create(
  data:
    image: [msg.img_vector]
)
image = {
  type: 'image',
  x: msg.x_min
  y: msg.y_min
  dw: msg.x_max
  dh: msg.y_max
  image: 'image'
  rows: msg.y_pixels
  cols: msg.x_pixels
  palette: 'Spectral-10'
}
options = {
  dims: [20 * msg.x_pixels, 20 * msg.y_pixels]
  xrange: [0, msg.x_max]
  yrange: [0, msg.y_max]
  xaxes: 'min'
  yaxes: 'min'
  tools: true
}
window.first_message = 0
plot = Bokeh.Plotting.make_plot(image, window.img, options)
Bokeh.Plotting.show(plot)
update = (msg) →
data = window.img.get('data')
data['image'] = [msg.img_vector]
window.img.set('data', data)
window.img.trigger('change', img, {})
–

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/a26b6562-6421-46ec-a4a2-5a303cd4215e%40continuum.io.

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

–

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/8XVJZwnMayA/unsubscribe.

To unsubscribe from this group and all its topics, 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/31A53FDD-4300-4A6D-9774-DD23A6207A9B%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.