interactive plotting of multidim arrays

Hi,

I try to make an interactive plot similar to this example:
http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-selections

However for each point selected on the left panel, I want to plot a time series on the right.
E.g. input x and y shape is (10, ), then the shape of the arrays of hjd and flux is
(10, 168), and thus represent a full time series for each point.

I didn’t find and example more similar to what I want, and somehow I assumed that the following code should work, but it doesn’t. I have to admit that my JS
skills are extremely limited, so I hope someone could point out a trivial error in the snippet below.

Many thanks.

Brigitta

source = ColumnDataSource(data=dict(y1=y1[:10], x0=x0[:10], x1=x1[:10], hjd=hjd, flux=flux))
s2 = ColumnDataSource(data=dict(hjd=[], flux=[], y1=[], x1=[]))

pp.circle('hjd', 'flux', source=s2)
source.callback = CustomJS(args=dict(s2=s2), code="""
        var inds = cb_obj.get('selected')['1d'].indices;
        var d1 = cb_obj.get('data');
        var d2 = s2.get('data');
        d2['x1'] = []
        d2['hjd'] = []
        d2['flux'] = []

        for (i = 0; i < inds.length; i++) {
            for (j = 0; j < d1['hjd'][inds[i]].lenght; j++) {
                d2['hjd'].push(d1['hjd'][inds[i]][j])
                d2['flux'].push(d1['flux'][inds[i]][j])
            }
        }
        s2.trigger('change');
    """)

It looks like you have a typo in this line:

  for (j = 0; j < d1['hjd'][inds[i]].lenght; j++) {

Where "length" is mis-spelled, can you first check that that is not the problem? Currently, that would probably result in errors in the browser JS console, which you could also check for.

Bryan

···

On Sep 24, 2015, at 6:20 AM, Brigitta Sipocz <[email protected]> wrote:

Hi,

I try to make an interactive plot similar to this example:
http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-selections

However for each point selected on the left panel, I want to plot a time series on the right.
E.g. input x and y shape is (10, ), then the shape of the arrays of ``hjd`` and ``flux`` is
(10, 168), and thus represent a full time series for each point.

I didn't find and example more similar to what I want, and somehow I assumed that the following code should work, but it doesn't. I have to admit that my JS
skills are extremely limited, so I hope someone could point out a trivial error in the snippet below.

Many thanks.

Brigitta

source = ColumnDataSource(data=dict(y1=y1[:10], x0=x0[:10], x1=x1[:10], hjd=hjd, flux=flux))
s2 = ColumnDataSource(data=dict(hjd=, flux=, y1=, x1=))

pp.circle('hjd', 'flux', source=s2)
source.callback = CustomJS(args=dict(s2=s2), code="""
        var inds = cb_obj.get('selected')['1d'].indices;
        var d1 = cb_obj.get('data');
        var d2 = s2.get('data');
        d2['x1'] =
        d2['hjd'] =
        d2['flux'] =
        
        for (i = 0; i < inds.length; i++) {
            for (j = 0; j < d1['hjd'][inds[i]].lenght; j++) {
                d2['hjd'].push(d1['hjd'][inds[i]][j])
                d2['flux'].push(d1['flux'][inds[i]][j])
            }
        }
        s2.trigger('change');
    """)

--
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/e0ecb19f-6f5f-445f-ac78-58980eb40e2c%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks Bryan.

Fixing the spelling hasn’t solved it, but good to know about the browser console. Sadly I don’t see any trivial error there.

In the meantime I manage to get it work though, with the compromise of plotting only one time series at a time (which actually makes sense, and what was the original idea anyway).

source.callback = CustomJS(args=dict(s2=s2), code="""
        var inds = cb_obj.get('selected')['1d'].indices;
        var d1 = cb_obj.get('data');

        s2.get('data')['hjd'] = d1['hjd'][inds[0]]
        s2.get('data')['flux'] = d1['flux'][inds[0]]
        s2.get('data')['fluxerr'] = d1['fluxerr'][inds[0]]
       
        cb_obj.trigger('change');
        s2.trigger('change');
    """)
···

On 24 September 2015 at 18:16, Bryan Van de Ven [email protected] wrote:

It looks like you have a typo in this line:

    for (j = 0; j < d1['hjd'][inds[i]].lenght; j++) {

Where “length” is mis-spelled, can you first check that that is not the problem? Currently, that would probably result in errors in the browser JS console, which you could also check for.

Bryan

On Sep 24, 2015, at 6:20 AM, Brigitta Sipocz [email protected] wrote:

Hi,

I try to make an interactive plot similar to this example:

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-selections

However for each point selected on the left panel, I want to plot a time series on the right.

E.g. input x and y shape is (10, ), then the shape of the arrays of hjd and flux is

(10, 168), and thus represent a full time series for each point.

I didn’t find and example more similar to what I want, and somehow I assumed that the following code should work, but it doesn’t. I have to admit that my JS

skills are extremely limited, so I hope someone could point out a trivial error in the snippet below.

Many thanks.

Brigitta

source = ColumnDataSource(data=dict(y1=y1[:10], x0=x0[:10], x1=x1[:10], hjd=hjd, flux=flux))

s2 = ColumnDataSource(data=dict(hjd=, flux=, y1=, x1=))

pp.circle(‘hjd’, ‘flux’, source=s2)

source.callback = CustomJS(args=dict(s2=s2), code="""

    var inds = cb_obj.get('selected')['1d'].indices;
    var d1 = cb_obj.get('data');
    var d2 = s2.get('data');
    d2['x1'] = []
    d2['hjd'] = []
    d2['flux'] = []
    for (i = 0; i < inds.length; i++) {
        for (j = 0; j < d1['hjd'][inds[i]].lenght; j++) {
            d2['hjd'].push(d1['hjd'][inds[i]][j])
            d2['flux'].push(d1['flux'][inds[i]][j])
        }
    }
    s2.trigger('change');
""")

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/e0ecb19f-6f5f-445f-ac78-58980eb40e2c%40continuum.io.

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

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/9EBFEADB-3BCE-40E2-8ED4-63E1FEDA163C%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.