Hover Tool / TapTool: cb_data and ToolTips,

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.

Hi Jeffrey,

Firstly - thanks for sharing your work - the site looks great.

There are quite a few holes in touch support at the moment - I have

written up an issue here: But that’s not your question. I don’t think it’s a terrible idea and
with the new Custom Models you should be able to experiment with one
yourself without having to recompile bokeh.
My other suggestion though would be to have a third small plot.
Perhaps it would live under the line chart. This would just hold
text data. When you Tap and item on the chart not only would it
update the line chart but also the text. You wouldn’t need any
CustomJS as you could just use a shared data source and have
selection take care of it. The trick is to make the non-selected
text all white / transparent and have the selected text be visible /
black (whatever you want). I did this for my Africa water map - the code is very old bokeh
code, but you should still be able get the idea. Scroll to the
bottom of the notebook:
and click on different countries to see it in action (also notice it
working with the tabs).
Please note the gray boxes are nbviewer artefacts and you wouldn’t
get that on your plot.
Hope this helps,
Sarah Bird

···

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 [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/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

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:
(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 [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/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

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 [email protected] 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 [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/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 [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/566F67C2.3060309%40alum.mit.edu.

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

Jeff Knowles

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!

  Because you're using an image glyph? If so, then a workaround (we

don’t have hit testing on image yet) is
to add
invisible glyphs (square markers, circles, whatever) on the same
plot
and attach a hovertool to them.

···

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 [email protected]
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 [email protected].

            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 [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/CAFd-tDbt93yUtmwFCxcUBxLHKJDndbCiUvPLv4d45QQm0ycY9g%40mail.gmail.com?utm_medium=email&utm_source=footer)      .

For more options, visit .

[email protected]
[email protected]
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
[email protected]
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