Simple CustomJS callback issues

Community Support
1

What am I missing here guys? This should work, I feel like I’ve been looking at it too long.
This should just be a dot that revolves in a circle with the slider value, but the callback isn’t working.

import numpy as np
import pandas as pd
from bokeh.models import CustomJS, Slider
from bokeh.layouts import widgetbox, layout
from bokeh.plotting import figure, show, ColumnDataSource

#constants
cent_x = 3
cent_y = 3
radius = 3

#build coord dataframe
df = pd.DataFrame()
theta = np.linspace(0,(2*np.pi),50)
df[‘x’] = radius * np.cos(theta) + cent_x
df[‘y’] = radius * np.sin(theta) + cent_y

#init source (all data)
source = ColumnDataSource(df)

#rend source/build plot
mask = df.index == 0
rend_source = ColumnDataSource(df.loc[mask])
plot = figure(plot_width=400, plot_height=400)
plot.circle(‘x’,‘y’,color=‘red’,size=10,source=rend_source)

#add slider and callback
code = “”"
var v = cb_obj.value;
var s1data = s1.data;
var s2data = s2.data;
s2data[‘x’].push(s1data[‘x’][v]);
s2data[‘y’].push(s1data[‘y’][v]);
s2data[‘index’].push(s1data[‘index’][v]);
s2.change.emit();
“”"
callback = CustomJS(
args=dict(
s1=source,
s2=rend_source),
code=code)

slider = Slider(
start=df.index.min(), end=df.index.max(),
value=0, step=1, title=‘slider’, callback=callback
)

#layout and show plot
controls = widgetbox(slider, width=400)
layout = layout([
[plot],
[controls],
])

show(layout)

``

2

Hi,

CDS columns made from numpy arrays are regular JS arrays, they are typed arrays. Here is s2data, e.g.

  {index: [0], x: Float64Array [6], y: Float64Array [3]} = $1

Typed arrays do not have a .push method, which is also what is seen in the JS console log:

  TypeError: s2data['x'].push is not a function. (In 's2data['x'].push(s1data['x'][v])', 's2data['x'].push' is undefined)

The conversion of numpy arrays to typed arrays offers substantial performance increases, and is normally not a concern for users. However, if you really want to use .push you'll need to convert the columns of rend_source to be plain python lists so that the corresponding JS columns are regular JS arrays, not typed arrays.

Bryan

···

On Jul 18, 2017, at 15:18, rick <[email protected]> wrote:

What am I missing here guys? This should work, I feel like I've been looking at it too long.
This should just be a dot that revolves in a circle with the slider value, but the callback isn't working.

import numpy as np
import pandas as pd
from bokeh.models import CustomJS, Slider
from bokeh.layouts import widgetbox, layout
from bokeh.plotting import figure, show, ColumnDataSource

#constants
cent_x = 3
cent_y = 3
radius = 3

build coord dataframe
df = pd.DataFrame()
theta = np.linspace(0,(2*np.pi),50)
df['x'] = radius * np.cos(theta) + cent_x
df['y'] = radius * np.sin(theta) + cent_y

#init source (all data)
source = ColumnDataSource(df)

#rend source/build plot
mask = df.index == 0
rend_source = ColumnDataSource(df.loc[mask])
plot = figure(plot_width=400, plot_height=400)
plot.circle('x','y',color='red',size=10,source=rend_source)

#add slider and callback
code = """
    var v = cb_obj.value;
    var s1data = s1.data;
    var s2data = s2.data;
    s2data['x'].push(s1data['x'][v]);
    s2data['y'].push(s1data['y'][v]);
    s2data['index'].push(s1data['index'][v]);
    s2.change.emit();
"""
callback = CustomJS(
    args=dict(
         s1=source,
         s2=rend_source),
    code=code)

slider = Slider(
    start=df.index.min(), end=df.index.max(),
    value=0, step=1, title='slider', callback=callback
    )

#layout and show plot
controls = widgetbox(slider, width=400)
layout = layout([
[plot],
[controls],
])

show(layout)

--
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/b2033408-3b5f-4a63-83f2-cc1b83eae132%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

3

Sorry first sentence should be: are NOT regular js arrays

···

On Jul 18, 2017, at 15:40, Bryan Van de ven <[email protected]> wrote:

Hi,

CDS columns made from numpy arrays are regular JS arrays, they are typed arrays. Here is s2data, e.g.

   {index: [0], x: Float64Array [6], y: Float64Array [3]} = $1

Typed arrays do not have a .push method, which is also what is seen in the JS console log:

   TypeError: s2data['x'].push is not a function. (In 's2data['x'].push(s1data['x'][v])', 's2data['x'].push' is undefined)

The conversion of numpy arrays to typed arrays offers substantial performance increases, and is normally not a concern for users. However, if you really want to use .push you'll need to convert the columns of rend_source to be plain python lists so that the corresponding JS columns are regular JS arrays, not typed arrays.

Bryan

On Jul 18, 2017, at 15:18, rick <[email protected]> wrote:

What am I missing here guys? This should work, I feel like I've been looking at it too long.
This should just be a dot that revolves in a circle with the slider value, but the callback isn't working.

import numpy as np
import pandas as pd
from bokeh.models import CustomJS, Slider
from bokeh.layouts import widgetbox, layout
from bokeh.plotting import figure, show, ColumnDataSource

#constants
cent_x = 3
cent_y = 3
radius = 3

build coord dataframe
df = pd.DataFrame()
theta = np.linspace(0,(2*np.pi),50)
df['x'] = radius * np.cos(theta) + cent_x
df['y'] = radius * np.sin(theta) + cent_y

#init source (all data)
source = ColumnDataSource(df)

#rend source/build plot
mask = df.index == 0
rend_source = ColumnDataSource(df.loc[mask])
plot = figure(plot_width=400, plot_height=400)
plot.circle('x','y',color='red',size=10,source=rend_source)

#add slider and callback
code = """
   var v = cb_obj.value;
   var s1data = s1.data;
   var s2data = s2.data;
   s2data['x'].push(s1data['x'][v]);
   s2data['y'].push(s1data['y'][v]);
   s2data['index'].push(s1data['index'][v]);
   s2.change.emit();
"""
callback = CustomJS(
   args=dict(
        s1=source,
        s2=rend_source),
   code=code)

slider = Slider(
   start=df.index.min(), end=df.index.max(),
   value=0, step=1, title='slider', callback=callback
   )

#layout and show plot
controls = widgetbox(slider, width=400)
layout = layout([
[plot],
[controls],
])

show(layout)

--
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/b2033408-3b5f-4a63-83f2-cc1b83eae132%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

4

OIC, thanks for the help.
Just as a curiosity, what toolset do you use when trouble shooting a script like this?

···

On Tuesday, July 18, 2017 at 3:40:22 PM UTC-5, Bryan Van de ven wrote:

Hi,

CDS columns made from numpy arrays are regular JS arrays, they are typed arrays. Here is s2data, e.g.

    {index: [0], x: Float64Array [6], y: Float64Array [3]} = $1

Typed arrays do not have a .push method, which is also what is seen in the JS console log:

    TypeError: s2data['x'].push is not a function. (In 's2data['x'].push(s1data['x'][v])', 's2data['x'].push' is undefined)

The conversion of numpy arrays to typed arrays offers substantial performance increases, and is normally not a concern for users. However, if you really want to use .push you’ll need to convert the columns of rend_source to be plain python lists so that the corresponding JS columns are regular JS arrays, not typed arrays.

Bryan

On Jul 18, 2017, at 15:18, rick [email protected] wrote:

What am I missing here guys? This should work, I feel like I’ve been looking at it too long.

This should just be a dot that revolves in a circle with the slider value, but the callback isn’t working.

import numpy as np

import pandas as pd

from bokeh.models import CustomJS, Slider

from bokeh.layouts import widgetbox, layout

from bokeh.plotting import figure, show, ColumnDataSource

#constants

cent_x = 3

cent_y = 3

radius = 3

build coord dataframe

df = pd.DataFrame()

theta = np.linspace(0,(2*np.pi),50)

df[‘x’] = radius * np.cos(theta) + cent_x

df[‘y’] = radius * np.sin(theta) + cent_y

#init source (all data)

source = ColumnDataSource(df)

#rend source/build plot

mask = df.index == 0
rend_source = ColumnDataSource(df.loc[mask])

plot = figure(plot_width=400, plot_height=400)

plot.circle(‘x’,‘y’,color=‘red’,size=10,source=rend_source)

#add slider and callback

code = “”"

var v = cb_obj.value;    

var s1data = s1.data;

var s2data = s2.data;

s2data['x'].push(s1data['x'][v]);

s2data['y'].push(s1data['y'][v]);

s2data['index'].push(s1data['index'][v]);

s2.change.emit();

“”"

callback = CustomJS(

args=dict(

     s1=source,

     s2=rend_source),

code=code)

slider = Slider(

start=df.index.min(), end=df.index.max(),
value=0, step=1, title='slider', callback=callback

)

#layout and show plot

controls = widgetbox(slider, width=400)

layout = layout([

[plot],

[controls],

])

show(layout)

–
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/b2033408-3b5f-4a63-83f2-cc1b83eae132%40continuum.io.

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