Hover Tool / TapTool: cb_data and ToolTips,

https://github.com/bokeh/bokeh/issues/2997

http://nbviewer.ipython.org/github/birdsarah/pycon_2015_bokeh_talk/blob/master/notebooks/Building%20the%20static%20visualization.ipynb

  On 12/14/15 3:44 PM, Jeffrey Knowles

wrote:

    Wondering if anyone has considered making a hybrid

of the TapTool and the HoverTool that would work in place of
hover over for use on a mobile browser / if this would be a
workable idea.

      Been putting together a little swell browser, using hover

tool to control linked data on seperate plots and also display
data as a tooltip:
(look at the height
plot).

        This takes advantage of the cb_data object in the js

callback:

                    update_ts

= CustomJS(args=dict(sourcedata=sourcedata),

                    code="""

                     function degToCompass(num) {

                    var

val = Math.floor((num / 22.5) + 0.5);

                    var

arr = [“N”, “NNE”, “NE”, “ENE”, “E”, “ESE”, “SE”,
“SSE”, “S”, “SSW”, “SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];

                    return

arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);

  }

                        function

degToCompassArr(arr){

  	                      var

arro = ;

  	                      for

(var i = 0; i<arr.length; i++){

  		arro[i]=degToCompass(arr[i]);

  	}

  	                      return

arro;

  }

                      var y            = cb_data.geometry.y;

                      var x
                   = cb_data.geometry.x;

                      var c
                   = Math.round(-y*24);

                      var data = sourcedata.get('data')

                      var paxis            = data['paxis'];

                      var y2disp_ts        = data['y'];

                      var amp              = data['amp'];

                      var timey            = data['b'];

                      for (i = 0; i < paxis.length; i++) {

                         y2disp_ts[i]  = amp[c][i];

                         timey[i]=y;

                      }

                      var dir = data['dir'];

                     data['y'] = y2disp_ts;

                     data['hh']=amp[Math.round(-y*24)];

data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);

                     sourcedata.trigger('change');

“”")

                    fig2_hovertool
       = fig2.select(type=HoverTool)

                    fig2_hovertool.callback

= update_ts

                    fig2_hovertool.point_policy

= “follow_mouse”

                    fig2_hovertool.mode

= “mouse”

fig2_hovertool.tooltips=OrderedDict([

                        ("Days

Back", “$y”),

                        ("Period",

“@paxis”),

                        ("Height",

“@hh ft”),

                        ("Direction",

“@dd”)

  ])

``

        Thoughts:

        1) My first idea is that could be passed to the tap tool,

so one could do something similar with the 'geometry . I
havn’t jumped into the source yet but would be willing to
try hacking this together if there isn’t already a solution
out there.

      2) A second idea would be to implement tool tips for the

tap tool. (Not sure how feasible this might be, but would
probably rely on 1) as well).

      3) What about a special mobile friendly TapNStay tool that

basically wrapps the hover tool like functionality accessible
to a touch screen?

      4) Designers would probably suggest I go lie under a bus

because such hover nonsense is counter to their ideology.

–

  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+unsubscribe@continuum.io.

  To post to this group, send email to bokeh@continuum.io.

  To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io?utm_medium=email&utm_source=footer)      .

For more options, visit .

https://swellspect.herokuapp.com/
https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io
https://groups.google.com/a/continuum.io/d/optout

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

That code is setting the datasource selection to be
updated based on the hover.
On 12/14/15 3:44 PM, Jeffrey Knowles
wrote:

    Wondering if anyone has considered making a hybrid

of the TapTool and the HoverTool that would work in place of
hover over for use on a mobile browser / if this would be a
workable idea.

      Been putting together a little swell browser, using hover

tool to control linked data on seperate plots and also display
data as a tooltip:
(look at the height
plot).

        This takes advantage of the cb_data object in the js

callback:

                    update_ts

= CustomJS(args=dict(sourcedata=sourcedata),

                    code="""

                     function degToCompass(num) {

                    var

val = Math.floor((num / 22.5) + 0.5);

                    var

arr = [“N”, “NNE”, “NE”, “ENE”, “E”, “ESE”, “SE”,
“SSE”, “S”, “SSW”, “SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];

                    return

arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);

  }

                        function

degToCompassArr(arr){

  	                      var

arro = ;

  	                      for

(var i = 0; i<arr.length; i++){

  		arro[i]=degToCompass(arr[i]);

  	}

  	                      return

arro;

  }

                      var y            = cb_data.geometry.y;

                      var x
                   = cb_data.geometry.x;

                      var c
                   = Math.round(-y*24);

                      var data = sourcedata.get('data')

                      var paxis            = data['paxis'];

                      var y2disp_ts        = data['y'];

                      var amp              = data['amp'];

                      var timey            = data['b'];

                      for (i = 0; i < paxis.length; i++) {

                         y2disp_ts[i]  = amp[c][i];

                         timey[i]=y;

                      }

                      var dir = data['dir'];

                     data['y'] = y2disp_ts;

                     data['hh']=amp[Math.round(-y*24)];

data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);

                     sourcedata.trigger('change');

“”")

                    fig2_hovertool
       = fig2.select(type=HoverTool)

                    fig2_hovertool.callback

= update_ts

                    fig2_hovertool.point_policy

= “follow_mouse”

                    fig2_hovertool.mode

= “mouse”

fig2_hovertool.tooltips=OrderedDict([

                        ("Days

Back", “$y”),

                        ("Period",

“@paxis”),

                        ("Height",

“@hh ft”),

                        ("Direction",

“@dd”)

  ])

``

        Thoughts:

        1) My first idea is that could be passed to the tap tool,

so one could do something similar with the 'geometry . I
havn’t jumped into the source yet but would be willing to
try hacking this together if there isn’t already a solution
out there.

      2) A second idea would be to implement tool tips for the

tap tool. (Not sure how feasible this might be, but would
probably rely on 1) as well).

      3) What about a special mobile friendly TapNStay tool that

basically wrapps the hover tool like functionality accessible
to a touch screen?

      4) Designers would probably suggest I go lie under a bus

because such hover nonsense is counter to their ideology.

–

  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+unsubscribe@continuum.io.

  To post to this group, send email to bokeh@continuum.io.

  To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io?utm_medium=email&utm_source=footer)      .

For more options, visit .

https://swellspect.herokuapp.com/
https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io
https://groups.google.com/a/continuum.io/d/optout

On Mon, Dec 14, 2015 at 5:07 PM, Sarah Bird sbird@alum.mit.edu wrote:

    I should add, that for

desktop users, you could have hover
achieve the same as tap in the
same way as is done here:
http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-hover

          That code is setting the datasource                       selection to be

updated based on the hover.

  On 12/14/15 3:44 PM, Jeffrey Knowles

wrote:

    Wondering if anyone has considered making a hybrid

of the TapTool and the HoverTool that would work in place of
hover over for use on a mobile browser / if this would be a
workable idea.

      Been putting together a little swell browser, using hover

tool to control linked data on seperate plots and also display
data as a tooltip:
https://swellspect.herokuapp.com/ (look at the height
plot).

        This takes advantage of the cb_data object in the js

callback:

                    update_ts

= CustomJS(args=dict(sourcedata=sourcedata),

                    code="""

                     function degToCompass(num) {

                    var

val = Math.floor((num / 22.5) + 0.5);

                    var

arr = [“N”, “NNE”, “NE”, “ENE”, “E”, “ESE”, “SE”,
“SSE”, “S”, “SSW”, “SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];

                    return

arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);

  }

                        function

degToCompassArr(arr){

  	                      var

arro = ;

  	                      for

(var i = 0; i<arr.length; i++){

  		arro[i]=degToCompass(arr[i]);

  	}

  	                      return

arro;

  }

                      var y            = cb_data.geometry.y;

                      var x
                   = cb_data.geometry.x;

                      var c
                   = Math.round(-y*24);

                      var data = sourcedata.get('data')

                      var paxis            = data['paxis'];

                      var y2disp_ts        = data['y'];

                      var amp              = data['amp'];

                      var timey            = data['b'];

                      for (i = 0; i < paxis.length; i++) {

                         y2disp_ts[i]  = amp[c][i];

                         timey[i]=y;

                      }

                      var dir = data['dir'];

                     data['y'] = y2disp_ts;

                     data['hh']=amp[Math.round(-y*24)];

data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);

                     sourcedata.trigger('change');

""")

                    fig2_hovertool
       = fig2.select(type=HoverTool)

                    fig2_hovertool.callback

= update_ts

                    fig2_hovertool.point_policy

= “follow_mouse”

                    fig2_hovertool.mode

= “mouse”

fig2_hovertool.tooltips=OrderedDict([

                        ("Days

Back", “$y”),

                        ("Period",

“@paxis”),

                        ("Height",

“@hh ft”),

                        ("Direction",

“@dd”)

  ])

``

        Thoughts:

        1) My first idea is that could be passed to the tap tool,

so one could do something similar with the 'geometry . I
havn’t jumped into the source yet but would be willing to
try hacking this together if there isn’t already a solution
out there.

      2) A second idea would be to implement tool tips for the

tap tool. (Not sure how feasible this might be, but would
probably rely on 1) as well).

      3) What about a special mobile friendly TapNStay tool that

basically wrapps the hover tool like functionality accessible
to a touch screen?

      4) Designers would probably suggest I go lie under a bus

because such hover nonsense is counter to their ideology.

–

  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+unsubscribe@continuum.io.

  To post to this group, send email to bokeh@continuum.io.

  To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io?utm_medium=email&utm_source=footer)[https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](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 bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/566F67C2.3060309%40alum.mit.edu.

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

–

Jeff Knowles

On 12/14/15 5:31 PM, jeff knowles
wrote:

Hey Sarah,

      Thanks for the suggestions!  The hover is currently

updating the data source as for the spectrum plot using
similar custom js, so perhaps I’ll try having it display text
on a different plot rather than tool tip.

      The hurdle is getting cb_data.geometry (ie the tap

location) for the tap, as I am doing for the hovertool. I’ll
see what I can do!

Thanks!

      JK

      On Mon, Dec 14, 2015 at 5:07 PM, Sarah

Bird sbird@alum.mit.edu
wrote:

              I should add, that for desktop

users, you could have
hover
achieve the same as tap in
the same way as is done here:
http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-hover

                                              That code is setting

the datasource selection to be
updated based on the hover.

On 12/14/15 3:44 PM, Jeffrey Knowles wrote:

                  Wondering if anyone has considered

making a hybrid of the TapTool and the HoverTool
that would work in place of hover over for use on
a mobile browser / if this would be a workable
idea.

                    Been putting together a little swell browser,

using hover tool to control linked data on
seperate plots and also display data as a
tooltip:
https://swellspect.herokuapp.com/
(look at the height plot).

                      This takes advantage of the cb_data object

in the js callback:

                                update_ts

=
CustomJS(args=dict(sourcedata=sourcedata),

                                  code="""

                                   function degToCompass(num) {

                                var

val = Math.floor((num / 22.5) +
0.5);

                                var

arr = [“N”, “NNE”, “NE”, “ENE”, “E”,
“ESE”, “SE”, “SSE”, “S”, “SSW”,
“SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];

                                return

arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);

  }

                                function

degToCompassArr(arr){

                                var

arro = ;

                                for

(var i = 0; i<arr.length; i++){

  		arro[i]=degToCompass(arr[i]);

  	}

                                return

arro;

  }

                                    var y            =

cb_data.geometry.y;

                                    var x
                                 = cb_data.geometry.x;

                                    var c
                                 = Math.round(-y*24);

                                    var data =

sourcedata.get(‘data’)

                                    var paxis            =

data[‘paxis’];

                                    var y2disp_ts        =

data[‘y’];

                                    var amp              =

data[‘amp’];

                                    var timey            =

data[‘b’];

                                    for (i = 0; i < paxis.length;

i++) {

                                       y2disp_ts[i]  = amp[c][i];

                                       timey[i]=y;

                                    }

                                    var dir = data['dir'];

                                   data['y'] = y2disp_ts;

data[‘hh’]=amp[Math.round(-y*24)];

data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);

                                   sourcedata.trigger('change');

""")

                                fig2_hovertool
       =

fig2.select(type=HoverTool)

                                fig2_hovertool.callback

= update_ts

                                fig2_hovertool.point_policy

= “follow_mouse”

                                fig2_hovertool.mode

= “mouse”

fig2_hovertool.tooltips=OrderedDict([

                                ("Days

Back", “$y”),

                                ("Period",

“@paxis”),

                                ("Height",

“@hh ft”),

                                ("Direction",

“@dd”)

  ])

``

                      Thoughts:

                      1) My first idea is that could be passed to

the tap tool, so one could do something
similar with the 'geometry . I havn’t jumped
into the source yet but would be willing to
try hacking this together if there isn’t
already a solution out there.

                    2) A second idea would be to implement tool

tips for the tap tool. (Not sure how feasible
this might be, but would probably rely on 1) as
well).

                    3) What about a special mobile friendly

TapNStay tool that basically wrapps the hover
tool like functionality accessible to a touch
screen?

                    4) Designers would probably suggest I go lie

under a bus because such hover nonsense is
counter to their ideology.

–

                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 .
To post to this group, send email to .
To view this discussion on the web visit .
For more options, visit .

–

            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+unsubscribe@continuum.io.

            To post to this group, send email to .

To view this discussion on the web visit .

–
Jeff Knowles

–

  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+unsubscribe@continuum.io.

  To post to this group, send email to bokeh@continuum.io.

  To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAFd-tDbt93yUtmwFCxcUBxLHKJDndbCiUvPLv4d45QQm0ycY9g%40mail.gmail.com?utm_medium=email&utm_source=footer)      .

For more options, visit .

bokeh+unsubscribe@continuum.io
bokeh@continuum.io
https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io
https://groups.google.com/a/continuum.io/d/optout
bokeh@continuum.io
https://groups.google.com/a/continuum.io/d/msgid/bokeh/566F67C2.3060309%40alum.mit.edu

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

https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAFd-tDbt93yUtmwFCxcUBxLHKJDndbCiUvPLv4d45QQm0ycY9g%40mail.gmail.com
https://groups.google.com/a/continuum.io/d/optout